@blocklet/payment-react
Version:
Reusable react components for payment kit v2
108 lines (90 loc) • 5.32 kB
Markdown
# CurrencySelector
`CurrencySelector`コンポーネントは、利用可能なオプションのリストから支払い通貨を選択するための、使いやすいインターフェースを提供します。各通貨をロゴ、シンボル、関連する支払い方法とともに表示し、ユーザーが簡単に選択できるようにします。このコンポーネントは通常、より大きな支払いフォームやチェックアウトフォーム内で使用されます。
## Props
| Prop | Type | Description | Required |
| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
| `value` | `string` | 現在選択されている通貨のIDです。親コンポーネントのstateで管理する必要があります。 | Yes |
| `currencies` | `TPaymentCurrency[]` | 選択可能なオプションとして表示される、利用可能な通貨オブジェクトの配列です。 | Yes |
| `onChange` | `(currencyId: string, methodId?: string) => void` | ユーザーが通貨を選択したときに実行されるコールバック関数です。新しい通貨IDと、オプションで関連する支払い方法のIDを受け取ります。 | Yes |
### TPaymentCurrency 型
`currencies` propは、以下の構造を持つオブジェクトの配列を想定しています：
```typescript TPaymentCurrency icon=mdi:code-json
export type TPaymentCurrency = {
id: string; // 通貨オプションの一意の識別子
logo: string; // 通貨/メソッドのロゴのURL
name: string; // 通貨の表示名
symbol: string; // 通貨記号（例：'$'、'€'）
method: { // 関連する支払い方法
id: string;
name: string;
};
};
```
## 使用例
以下は`CurrencySelector`コンポーネントを実装する基本的な例です。親コンポーネントで選択された通貨のstateを管理し、利用可能な通貨のリストを提供する必要があります。
`@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`フックを使用して`selectedCurrency`を追跡します。
3. `handleCurrencyChange`関数は、新しい通貨が選択されたときにstateを更新し、新しい値をログに出力します。
4. `CurrencySelector`は制御されたコンポーネントであり、その`value`と`onChange` propsは親のstateによって管理されます。
5. コンポーネント全体が`PaymentProvider`でラップされ、適切なレンダリングとスタイリングに使用されるMaterial-UIテーマへのアクセスを確保します。