@blocklet/payment-react
Version:
Reusable react components for payment kit v2
108 lines (90 loc) • 4.08 kB
Markdown
# CurrencySelector
`CurrencySelector` 組件提供了一個使用者友善的介面，讓使用者能從可用選項清單中選擇支付貨幣。它會顯示每種貨幣的標誌、符號及相關的支付方式，方便使用者進行選擇。此組件通常用於較大的支付或結帳表單中。
## 屬性
| Prop | 類型 | 描述 | 必填 |
| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
| `value` | `string` | 當前所選貨幣的 ID。此 ID 應由父組件的狀態管理。 | 是 |
| `currencies` | `TPaymentCurrency[]` | 一個可用貨幣物件的陣列，用以顯示為可選選項。 | 是 |
| `onChange` | `(currencyId: string, methodId?: string) => void` | 當使用者選擇貨幣時執行的回呼函式。它會接收新的貨幣 ID 和可選的相關支付方式 ID。 | 是 |
### TPaymentCurrency 類型
`currencies` 屬性需要一個具有以下結構的物件陣列：
```typescript TPaymentCurrency icon=mdi:code-json
export type TPaymentCurrency = {
id: string; // 貨幣選項的唯一識別碼
logo: string; // 貨幣/方式標誌的 URL
name: string; // 貨幣的顯示名稱
symbol: string; // 貨幣符號（例如：'$'、'€'）
method: { // 相關的支付方式
id: string;
name: string;
};
};
```
## 使用範例
這是一個如何實現 `CurrencySelector` 組件的基本範例。您需要在父組件中管理所選貨幣的狀態，並提供一個可用貨幣的清單。
請注意，`@blocklet/payment-react` 組件設計為在 `PaymentProvider` 內運作，`PaymentProvider` 提供了必要的主題和上下文。請確保您的組件被適當地包裹。
```jsx MyCurrencySelectorComponent.tsx icon=logos:react
import React, { useState } from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CurrencySelector } from '@blocklet/payment-react/components';
import type { TPaymentCurrency } from '@blocklet/payment-types';
import { useSessionContext } from '@/hooks/session-context'; // 根據您的專案結構調整此匯入路徑
// 用於示範的模擬資料
const mockCurrencies: TPaymentCurrency[] = [
{
id: 'usd_xxxxxx',
logo: 'https://path-to-your/usd-logo.png',
name: 'US Dollar',
symbol: 'USD',
method: {
id: 'stripe_yyyyy',
name: 'Stripe',
},
},
{
id: 'eth_zzzzzz',
logo: 'https://path-to-your/eth-logo.png',
name: 'Ethereum',
symbol: 'ETH',
method: {
id: 'crypto_aaaaa',
name: 'Crypto Payment',
},
},
];
function MyCurrencySelectorComponent() {
const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);
const handleCurrencyChange = (currencyId: string, methodId?: string) => {
console.log(`選擇的貨幣：${currencyId}，方式：${methodId}`);
setSelectedCurrency(currencyId);
};
return (
<div>
<h3>選擇貨幣</h3>
<CurrencySelector
value={selectedCurrency}
currencies={mockCurrencies}
onChange={handleCurrencyChange}
/>
</div>
);
}
// 您的應用程式進入點
export default function App() {
const { session, connectApi } = useSessionContext();
if (!session || !connectApi) {
return <div>載入中...</div>;
}
return (
<PaymentProvider session={session} connectApi={connectApi}>
<MyCurrencySelectorComponent />
</PaymentProvider>
);
}
```
在此範例中：
1. 我們定義了一個遵循 `TPaymentCurrency` 結構的 `mockCurrencies` 陣列。
2. `MyCurrencySelectorComponent` 使用 `useState` hook 來追蹤 `selectedCurrency`。
3. `handleCurrencyChange` 函式在選擇新貨幣時更新狀態，並記錄新值。
4. `CurrencySelector` 是一個受控組件，其 `value` 和 `onChange` 屬性由父組件的狀態管理。
5. 整個組件被包裹在 `PaymentProvider` 中，以確保正確的渲染和存取用於樣式設定的 Material-UI 主題。