, '€')\\n method: { \u002f\u002f Associated payment method\\n id: string;\\n name: string;\\n };\\n};\",\"children\":[]}}},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Usage Example\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Here is a basic example of how to implement the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"CurrencySelector\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" component. You need to manage the selected currency's state in the parent component and provide a list of available currencies.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Note that \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"@blocklet\u002fpayment-react\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" components are designed to work within a \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"PaymentProvider\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\", which supplies the necessary theme and context. Ensure your component is wrapped accordingly.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"type\":\"x-component\",\"version\":1,\"format\":\"\",\"data\":{\"component\":\"code\",\"properties\":{\"component\":\"code\",\"language\":\"jsx\",\"title\":\"MyCurrencySelectorComponent.tsx\",\"icon\":\"logos:react\",\"body\":\"import React, { useState } from 'react';\\nimport { PaymentProvider } from '@blocklet\u002fpayment-react';\\nimport { CurrencySelector } from '@blocklet\u002fpayment-react\u002fcomponents';\\nimport type { TPaymentCurrency } from '@blocklet\u002fpayment-types';\\nimport { useSessionContext } from '@\u002fhooks\u002fsession-context'; \u002f\u002f Adjust this import path to your project structure\\n\\n\u002f\u002f Mock data for demonstration purposes\\nconst mockCurrencies: TPaymentCurrency[] = [\\n {\\n id: 'usd_xxxxxx',\\n logo: 'https:\u002f\u002fpath-to-your\u002fusd-logo.png',\\n name: 'US Dollar',\\n symbol: 'USD',\\n method: {\\n id: 'stripe_yyyyy',\\n name: 'Stripe',\\n },\\n },\\n {\\n id: 'eth_zzzzzz',\\n logo: 'https:\u002f\u002fpath-to-your\u002feth-logo.png',\\n name: 'Ethereum',\\n symbol: 'ETH',\\n method: {\\n id: 'crypto_aaaaa',\\n name: 'Crypto Payment',\\n },\\n },\\n];\\n\\nfunction MyCurrencySelectorComponent() {\\n const [selectedCurrency, setSelectedCurrency] = useState\u003cstring\u003e(mockCurrencies[0].id);\\n\\n const handleCurrencyChange = (currencyId: string, methodId?: string) =\u003e {\\n console.log(`Selected currency: ${currencyId}, Method: ${methodId}`);\\n setSelectedCurrency(currencyId);\\n };\\n\\n return (\\n \u003cdiv\u003e\\n \u003ch3\u003eSelect a Currency\u003c\u002fh3\u003e\\n \u003cCurrencySelector\\n value={selectedCurrency}\\n currencies={mockCurrencies}\\n onChange={handleCurrencyChange}\\n \u002f\u003e\\n \u003c\u002fdiv\u003e\\n );\\n}\\n\\n\u002f\u002f Your App's entry point\\nexport default function App() {\\n const { session, connectApi } = useSessionContext();\\n\\n if (!session || !connectApi) {\\n return \u003cdiv\u003eLoading...\u003c\u002fdiv\u003e;\\n }\\n\\n return (\\n \u003cPaymentProvider session={session} connectApi={connectApi}\u003e\\n \u003cMyCurrencySelectorComponent \u002f\u003e\\n \u003c\u002fPaymentProvider\u003e\\n );\\n}\",\"children\":[]}}},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"In this example:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"We define a \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"mockCurrencies\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" array that follows the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"TPaymentCurrency\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" structure.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"MyCurrencySelectorComponent\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" uses the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"useState\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" hook to keep track of the \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"selectedCurrency\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\".\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"handleCurrencyChange\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" function updates the state when a new currency is selected and logs the new values.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"CurrencySelector\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" is a controlled component, with its \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"value\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" and \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"onChange\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" props managed by the parent's state.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The entire component is wrapped in \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":16,\"mode\":\"normal\",\"style\":\"\",\"text\":\"PaymentProvider\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" to ensure proper rendering and access to the Material-UI theme used for styling.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":5}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"number\",\"start\":1,\"tag\":\"ol\"}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}","originLink":null,"cover":null,"excerpt":"The CurrencySelector component provides a user-friendly interface for selecting a payment currency from a list of available options. It displays each ","author":"z1VV21NqNWkiadznN32ALkos5dQqQwnCMty","topicId":null,"boardId":"payment-kit-react","type":"doc","status":"publish","parentId":"Kavr_1z_y9zFb9KGEg65CmnK","pinnedAt":null,"featured":null,"lastCommentedAt":"2025-09-26T13:15:18.676Z","commentCount":0,"publishTime":"2025-09-26T13:15:18.676Z","contentVersion":0,"slug":"components-ui-form-elements-currency-selector-8b3f3d","accessType":"public","deletedAt":null,"createdAt":"2025-09-26T13:15:18.676Z","updatedAt":"2025-09-26T13:15:18.679Z","locale":"en"}; CurrencySelector