@blocklet/payment-react/docs/components-ui.zh-TW.md

Reusable react components for payment kit v2

# UI 元件

`@blocklet/payment-react` 函式庫提供了一組細粒度的 UI 元件，旨在為您在建構支付和結帳介面時提供最大的靈活性。與封裝整個流程的高階 [結帳元件](./components-checkout.md) 不同，這些元件是建立自訂使用者體驗的基礎。

當您需要將支付功能整合到現有應用程式佈局中，或者當標準結帳流程不符合您的特定設計要求時，這些元件是理想的選擇。

<x-cards data-columns="3">
  <x-card data-title="PricingTable" data-icon="lucide:layout-list" data-href="/components/ui/pricing-table">
    在結構化表格中顯示訂閱方案和定價選項，允許使用者選擇方案並繼續結帳。
  </x-card>
  <x-card data-title="PaymentSummary" data-icon="lucide:receipt" data-href="/components/ui/payment-summary">
    在結帳流程中顯示訂單的詳細摘要，包括項目、總計和試用資訊。
  </x-card>
  <x-card data-title="Form Elements" data-icon="lucide:form-input" data-href="/components/ui/form-elements">
    一系列專門的輸入元件，用於建構自訂的支付和聯絡資訊表單，例如地址、電話和國家選擇。
  </x-card>
</x-cards>

## 組成您的支付 UI

UI 元件旨在組合在一起以建構一個完整的支付頁面。這些元件大多需要存取支付上下文以獲取支付方式和設定等資料，因此它們必須在 `PaymentProvider` 內進行渲染。

以下是一個概念性範例，說明如何結合 `PricingTable` 和 `PaymentSummary` 來建立一個自訂結帳頁面。

```jsx A Custom Checkout Page icon=logos:react
import { PaymentProvider } from '@blocklet/payment-react';
import { PricingTable, PaymentSummary } from '@blocklet/payment-react/components';
// useSessionContext hook 在 PaymentProvider 文件中有定義
import { useSessionContext } from '/path/to/session/context'; 

function CustomCheckoutPage() {
  const { session, connectApi } = useSessionContext();
  
  // 在實際應用中，您會從後端獲取此資料
  const pricingData = { /* ... pricing table data object ... */ };
  const selectedItems = [ /* ... line items based on user selection ... */ ];
  const currency = { /* ... currency object ... */ };

  const handleSelect = (priceId, currencyId) => {
    console.log('使用者選擇的方案：', priceId, '使用的貨幣：', currencyId);
    // 將所選方案新增到 'selectedItems' 狀態並更新 UI
  };

  return (
    <PaymentProvider
      apiHost={connectApi}
      sessionId={session.user?.did}
      locale="en"
    >
      <div className="checkout-container" style={{ display: 'flex', gap: '2rem' }}>
        <div className="pricing-section" style={{ flex: 2 }}>
          <h2>選擇您的方案</h2>
          <PricingTable table={pricingData} onSelect={handleSelect} />
        </div>
        <div className="summary-section" style={{ flex: 1 }}>
          <h2>訂單摘要</h2>
          <PaymentSummary items={selectedItems} currency={currency} />
        </div>
      </div>
    </PaymentProvider>
  );
}
```

在這個範例中，`PricingTable` 和 `PaymentSummary` 在一個自訂頁面上一起使用。`PaymentProvider` 包裹了整個結構，使得支付設定和方法對所有子元件都可用。

## 下一步

現在您已經了解了 UI 元件的作用，請深入了解每個元件的具體細節，開始建構您的自訂支付流程。我們建議從 `PricingTable` 開始。

[了解 PricingTable 元件 &rarr;](./components-ui-pricing-table.md)