跳到主要內容

CurrencySelector

CurrencySelector 組件提供了一個使用者友善的介面，讓使用者能從可用選項清單中選擇支付貨幣。它會顯示每種貨幣的標誌、符號及相關的支付方式，方便使用者進行選擇。此組件通常用於較大的支付或結帳表單中。

屬性

Prop類型描述必填
valuestring當前所選貨幣的 ID。此 ID 應由父組件的狀態管理。是
currenciesTPaymentCurrency[]一個可用貨幣物件的陣列，用以顯示為可選選項。是
onChange(currencyId: string, methodId?: string) => void當使用者選擇貨幣時執行的回呼函式。它會接收新的貨幣 ID 和可選的相關支付方式 ID。是

TPaymentCurrency 類型

currencies 屬性需要一個具有以下結構的物件陣列：

TPaymentCurrency

typescript
export type TPaymentCurrency = {
  id: string;       // 貨幣選項的唯一識別碼
  logo: string;     // 貨幣/方式標誌的 URL
  name: string;     // 貨幣的顯示名稱
  symbol: string;   // 貨幣符號（例如：'$'、'€'）
  method: {         // 相關的支付方式
    id: string;
    name: string;
  };
};

使用範例

這是一個如何實現 CurrencySelector 組件的基本範例。您需要在父組件中管理所選貨幣的狀態，並提供一個可用貨幣的清單。

請注意，@blocklet/payment-react 組件設計為在 PaymentProvider 內運作，PaymentProvider 提供了必要的主題和上下文。請確保您的組件被適當地包裹。

MyCurrencySelectorComponent.tsx

jsx
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 主題。