跳到主要内容

Checkout 组件

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

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

组件流程

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

Checkout Component Flow

d2
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"

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

CheckoutForm

处理支付的基础组件。它接收一个 `paymentLink` 或 `checkoutSession` ID，并渲染完整的支付 UI。

CheckoutTable

显示一个完整的定价表。当用户选择一个方案时，它会自动启动一个结账会话并渲染支付表单。

CheckoutDonate

一个用于添加捐赠功能的灵活组件。它负责处理捐赠设置、显示支持者历史记录以及管理捐赠支付流程。

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