跳到主要內容

結帳元件

@blocklet/payment-react 函式庫提供了一組高階的結帳元件，旨在為各種支付場景提供完整、即用的入口點。這些元件封裝了從選擇產品到完成支付的整個使用者流程，讓您能以最少的設定整合複雜的支付體驗。

無論您需要顯示價格表、接受捐贈，還是處理直接支付連結，這些元件都能處理會話建立、狀態管理和 UI 渲染的底層邏輯。

元件流程

典型的流程是使用者與像 CheckoutTable 或 CheckoutDonate 這樣的入口點元件互動。這些元件接著會建立一個 CheckoutSession，並將最終的支付處理委託給核心的 CheckoutForm 元件。

Checkout Component Flow

d2
direction: down

User: {
  shape: c4-person
}

Checkout-Flow: {
  label: "結帳流程"

  Entry-Points: {
    label: "面向使用者的元件"
    shape: rectangle

    CheckoutTable: {
      label: "CheckoutTable"
    }

    CheckoutDonate: {
      label: "CheckoutDonate"
    }
  }

  Core-Processor: {
    label: "核心支付處理器"
    shape: rectangle

    CheckoutForm: {
      label: "CheckoutForm"
    }
  }
}

User -> Checkout-Flow.Entry-Points.CheckoutTable: "選擇一個訂閱"
User -> Checkout-Flow.Entry-Points.CheckoutDonate: "進行捐贈"
Checkout-Flow.Entry-Points.CheckoutTable -> Checkout-Flow.Core-Processor.CheckoutForm: "選擇方案時"
Checkout-Flow.Entry-Points.CheckoutDonate -> Checkout-Flow.Core-Processor.CheckoutForm: "捐贈操作時"
Checkout-Flow.Core-Processor.CheckoutForm -> User: "支付結果"

探索下方的元件，找到最適合您應用程式需求的選擇。

CheckoutForm

用於處理支付的基礎元件。它接受一個 `paymentLink` 或 `checkoutSession` ID，並渲染完整的支付 UI。

CheckoutTable

顯示一個完整的價格表。當使用者選擇一個方案時，它會自動啟動一個結帳會話並渲染支付表單。

CheckoutDonate

一個用於新增捐贈功能的彈性元件。它處理捐贈設定、顯示支持者歷史記錄，並管理捐贈支付流程。

這些元件中的每一個都設計為高度可自訂，並且可以無縫整合到您的應用程式中。點擊任何卡片以查看其詳細文件和使用範例。