CurrencySelector
The CurrencySelector component renders an interactive list of available payment currencies. Each currency is displayed as a distinct card, showing its logo, symbol, and the associated payment network, allowing users to easily choose their preferred option.
This component is a form element designed to be integrated into broader payment flows, such as within a CheckoutForm or a custom payment UI.
Props#
The CurrencySelector component accepts the following props:
Prop | Type | Description | Required |
|---|---|---|---|
|
| The | Yes |
|
| An array of currency objects to display as selectable options. See the | Yes |
|
| A callback function that fires when the user selects a currency. It receives the | Yes |
TPaymentCurrency Interface#
The currencies prop requires an array of objects, where each object represents a selectable currency and must conform to the following structure:
interface TPaymentCurrency {
id: string; // Unique identifier for the currency option
logo: string; // URL to the currency or payment method logo
name: string; // The display name of the currency
symbol: string; // The currency symbol or ticker (e.g., "USDT", "BTC")
method: {
id: string; // ID of the associated payment method or network
name: string; // Display name of the associated payment method or network (e.g., "TRON Network")
};
}Example Usage#
Below is a complete example of how to implement the CurrencySelector. It uses the useState hook from React to manage the user's selection and updates the UI accordingly.
import React, { useState } from 'react';
import { CurrencySelector } from '@blocklet/payment-react';
import type { TPaymentCurrency } from '@blocklet/payment-types';
import { Box, Typography } from '@mui/material';
// Mock data representing available currencies
const mockCurrencies: TPaymentCurrency[] = [
{
id: 'usdt_tron',
logo: 'https://example.com/usdt.png',
name: 'Tether',
symbol: 'USDT',
method: {
id: 'tron_network',
name: 'TRON Network',
},
},
{
id: 'btc_native',
logo: 'https://example.com/btc.png',
name: 'Bitcoin',
symbol: 'BTC',
method: {
id: 'bitcoin_network',
name: 'Bitcoin Network',
},
},
{
id: 'eth_native',
logo: 'https://example.com/eth.png',
name: 'Ethereum',
symbol: 'ETH',
method: {
id: 'ethereum_network',
name: 'Ethereum Network',
},
},
];
export default function MyPaymentPage() {
const [selectedCurrencyId, setSelectedCurrencyId] = useState<string>('usdt_tron');
const handleCurrencyChange = (currencyId: string, methodId?: string) => {
console.log(`Selected Currency ID: ${currencyId}, Method ID: ${methodId}`);
setSelectedCurrencyId(currencyId);
};
return (
<Box sx={{ padding: 2, border: '1px solid #ddd', borderRadius: '4px' }}>
<Typography variant="h6" gutterBottom>
Select Your Payment Currency
</Typography>
<CurrencySelector
value={selectedCurrencyId}
currencies={mockCurrencies}
onChange={handleCurrencyChange}
/>
<Typography sx={{ marginTop: '20px' }}>
Current Selection: <strong>{selectedCurrencyId}</strong>
</Typography>
</Box>
);
}In this example, selectedCurrencyId holds the state for the chosen currency. When a user clicks a currency card, the handleCurrencyChange function is triggered, which updates the state. The CurrencySelector re-renders to visually reflect the new selection.