# 元件
`@blocklet/payment-react` 函式庫提供了一套全面的預建 React 元件，旨在加速支付、訂閱和捐贈功能的開發。這些元件經過分類，以幫助您為工作找到合適的工具，無論您需要一個完整的即插即用解決方案，還是需要精細的 UI 元素來建立自訂體驗。
所有元件都設計為在 `PaymentProvider` 上下文中無縫工作，該上下文處理狀態管理和 API 通訊。
## 元件架構
下圖說明了高階元件通常如何互動。面向使用者的元件，如 `CheckoutTable` 或 `CheckoutDonate`，作為入口點，然後利用核心的 `CheckoutForm` 來處理最終的支付處理。
## 元件類別
探索我們的元件類別，找到您需要的建構區塊。
### 結帳元件
這些是高階元件，提供完整、開箱即用的支付體驗。將它們用作您支付流程的主要入口點。
處理支付連結和結帳工作階段的主要元件。
呈現完整的價格表並處理結帳流程。
使用這個靈活的元件實現捐贈功能。
### UI 元件
用於建立自訂支付表單和顯示的精細元件集合。結合這些區塊，建立一個與您應用程式設計完美匹配的使用者介面。
在結構化表格中顯示訂閱方案和價格選項。
顯示訂單的詳細摘要，包括項目和總計。
用於建立自訂支付和聯絡表單的輸入元件集合。
### 業務邏輯元件
旨在處理複雜業務工作流程的專用元件，例如管理逾期發票、恢復訂閱和設定自動點數儲值。
處理客戶或訂閱的逾期發票付款。
讓使用者輕鬆地恢復已取消的訂閱。
管理和設定自動點數儲值功能。
### 歷史記錄元件
向您的使用者顯示歷史支付和點數資料。這些元件可以輕鬆呈現發票、付款和點數交易的列表。
呈現客戶的發票列表，包含詳細資訊和狀態。
顯示客戶的付款歷史，包括交易詳情。
顯示點數授予列表，包括狀態和剩餘金額。