@blocklet/payment-react/docs/components-ui.zh.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 一个自定义结账页面 icon=logos:react
import { PaymentProvider } from '@blocklet/payment-react';
import { PricingTable, PaymentSummary } from '@blocklet/payment-react/components';
// useSessionContext 钩子在 PaymentProvider 文档中有定义
import { useSessionContext } from '/path/to/session/context'; 

function CustomCheckoutPage() {
  const { session, connectApi } = useSessionContext();
  
  // 在实际应用中，您会从后端获取这些数据
  const pricingData = { /* ... 定价表数据对象 ... */ };
  const selectedItems = [ /* ... 基于用户选择的订单项 ... */ ];
  const currency = { /* ... 货币对象 ... */ };

  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)