@blocklet/payment-react/docs/components-checkout.zh.md

Reusable react components for payment kit v2

# Checkout 组件

`@blocklet/payment-react` 库提供了一套高级 Checkout 组件，旨在为各种支付场景提供完整、即用型的入口点。这些组件封装了从选择产品到完成支付的整个用户流程，让您能够以最少的设置集成复杂的支付体验。

无论您需要显示定价表、接受捐赠，还是处理直接支付链接，这些组件都会处理会话创建、状态管理和 UI 渲染的底层逻辑。

### 组件流程

典型流程涉及用户与入口点组件（如 `CheckoutTable` 或 `CheckoutDonate`）进行交互。这些组件随后会创建一个 `CheckoutSession`，并将最终的支付处理委托给核心的 `CheckoutForm` 组件。

```d2 Checkout Component Flow icon=mdi:transit-connection-variant
direction: down

User: {
  shape: c4-person
}

Checkout-Flow: {
  label: "Checkout Flow"

  Entry-Points: {
    label: "User-Facing Components"
    shape: rectangle

    CheckoutTable: {
      label: "CheckoutTable"
    }

    CheckoutDonate: {
      label: "CheckoutDonate"
    }
  }

  Core-Processor: {
    label: "Core Payment Processor"
    shape: rectangle

    CheckoutForm: {
      label: "CheckoutForm"
    }
  }
}

User -> Checkout-Flow.Entry-Points.CheckoutTable: "Selects a subscription"
User -> Checkout-Flow.Entry-Points.CheckoutDonate: "Makes a donation"
Checkout-Flow.Entry-Points.CheckoutTable -> Checkout-Flow.Core-Processor.CheckoutForm: "On plan selection"
Checkout-Flow.Entry-Points.CheckoutDonate -> Checkout-Flow.Core-Processor.CheckoutForm: "On donate action"
Checkout-Flow.Core-Processor.CheckoutForm -> User: "Payment Result"
```

浏览以下组件，找到最适合您应用程序需求的组件。

<x-cards data-columns="3">
  <x-card data-title="CheckoutForm" data-icon="lucide:credit-card" data-href="/components/checkout/checkout-form">
    处理支付的基础组件。它接收一个 `paymentLink` 或 `checkoutSession` ID，并渲染完整的支付 UI。
  </x-card>
  <x-card data-title="CheckoutTable" data-icon="lucide:table" data-href="/components/checkout/checkout-table">
    显示一个完整的定价表。当用户选择一个方案时，它会自动启动一个结账会话并渲染支付表单。
  </x-card>
  <x-card data-title="CheckoutDonate" data-icon="lucide:heart-handshake" data-href="/components/checkout/checkout-donate">
    一个用于添加捐赠功能的灵活组件。它负责处理捐赠设置、显示支持者历史记录以及管理捐赠支付流程。
  </x-card>
</x-cards>

这些组件中的每一个都设计为高度可定制，并且可以无缝集成到您的应用程序中。单击任何卡片以查看其详细文档和使用示例。