@blocklet/payment-react/docs/overview.zh-TW.md

Reusable react components for payment kit v2

# 總覽

`@blocklet/payment-react` 是一個全方位的 React 元件庫，旨在簡化將支付流程、訂閱和捐贈系統整合到您的 blocklet 中的過程。它建立在 [Payment Kit](https://www.arcblock.io/docs/arcblock-payment-kit) 的基礎之上，提供了一套預先建置、可自訂且生產就緒的元件，幫助您以最少的精力打造強大的支付體驗。

## 主要功能

<x-cards data-columns="3">
  <x-card data-title="預先建置的使用者介面元件" data-icon="lucide:layout-template">
    包含一組豐富的元件，如結帳表單、定價表和捐贈小工具，開箱即用，涵蓋常見的支付情境。
  </x-card>
  <x-card data-title="可自訂主題" data-icon="lucide:palette">
    使用 Material-UI 主題完全控制您的支付流程外觀和風格，確保一致的使用者體驗。
  </x-card>
  <x-card data-title="支援 i18n" data-icon="lucide:languages">
    內建的國際化支援讓您能輕鬆為全球受眾本地化元件文字。
  </x-card>
  <x-card data-title="全方位的支付操作" data-icon="lucide:credit-card">
    輕鬆處理複雜的支付邏輯，包括訂閱、退款、發票管理和計量計費。
  </x-card>
  <x-card data-title="最佳化效能" data-icon="lucide:package-minus">
    透過內建的延遲載入和動態元件匯入支援，最佳化您應用程式的套件大小並提升效能。
  </x-card>
</x-cards>

## 運作方式

此函式庫圍繞著提供者-元件模型架構。`PaymentProvider` 是此函式庫的核心，它建立了一個管理身份驗證、API 通訊和狀態的上下文 (context)。所有其他支付元件都必須包裹在此提供者內才能正常運作。這種方式集中了支付邏輯，並使個別元件保持輕量和專注。

```d2 高階架構
direction: down

User: {
  shape: c4-person
}

Your-Application: {
  label: "Your Application"
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

    Payment-Components: {
      label: "Payment Components"
      shape: rectangle
      grid-columns: 2

      CheckoutForm: { label: "CheckoutForm" }
      CheckoutTable: { label: "CheckoutTable" }
      CheckoutDonate: { label: "CheckoutDonate" }
      CustomerInvoiceList: { label: "CustomerInvoiceList" }
    }
  }
}

Payment-Kit-Backend: {
  label: "Payment Kit Backend"
  shape: cylinder
}

User -> Your-Application.PaymentProvider.Payment-Components: "Interacts with UI"
Your-Application.PaymentProvider -> Payment-Kit-Backend: "Handles API Communication"
Payment-Kit-Backend -> Your-Application.PaymentProvider: "Returns Data"
Your-Application.PaymentProvider.Payment-Components -> User: "Renders UI Updates"

```

## 您可以建立什麼

- **訂閱服務：** 使用 `CheckoutTable` 為 SaaS 產品快速實作定價頁面和結帳流程。
- **電子商務結帳：** 使用 `CheckoutForm` 為銷售商品建立一次性支付表單。
- **捐贈系統：** 使用 `CheckoutDonate` 新增靈活的捐贈小工具以支持創作者或公益事業。
- **客戶入口網站：** 使用 `CustomerInvoiceList` 和其他歷史記錄元件為使用者顯示發票歷史並管理支付方式。

## 下一步

既然您已對 `@blocklet/payment-react` 提供的功能有了大致了解，最好的學習方式就是動手實作。

深入閱讀我們的 [入門指南](./getting-started.md) 來安裝此函式庫，並在幾分鐘內建立您的第一個支付表單。