UI 元件 | ArcBlock

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

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

PricingTable

在結構化表格中顯示訂閱方案和定價選項，允許使用者選擇方案並繼續結帳。

PaymentSummary

在結帳流程中顯示訂單的詳細摘要，包括項目、總計和試用資訊。

Form Elements

一系列專門的輸入元件，用於建構自訂的支付和聯絡資訊表單，例如地址、電話和國家選擇。

組成您的支付 UI

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

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

A Custom Checkout Page

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 開始。