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

Reusable react components for payment kit v2

# 結帳元件

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

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

### 元件流程

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

```d2 Checkout Component Flow icon=mdi:transit-connection-variant
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: "支付結果"
```

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

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

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