@blocklet/payment-react/docs/overview.zh.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="预构建的 UI 组件" 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 通信和状态的上下文。所有其他支付组件都必须在此提供者内包装才能正常工作。这种方式集中了支付逻辑，并使各个组件保持轻量和专注。

```d2 High-Level Architecture
direction: down

User: {
  shape: c4-person
}

Your-Application: {
  label: "你的应用"
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

    Payment-Components: {
      label: "支付组件"
      shape: rectangle
      grid-columns: 2

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

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

User -> Your-Application.PaymentProvider.Payment-Components: "与 UI 交互"
Your-Application.PaymentProvider -> Payment-Kit-Backend: "处理 API 通信"
Payment-Kit-Backend -> Your-Application.PaymentProvider: "返回数据"
Your-Application.PaymentProvider.Payment-Components -> User: "渲染 UI 更新"

```

## 你可以构建什么

- **订阅服务：** 使用 `CheckoutTable` 为 SaaS 产品快速实现定价页面和结账流程。
- **电子商务结账：** 使用 `CheckoutForm` 构建用于销售商品的一次性支付表单。
- **捐赠系统：** 使用 `CheckoutDonate` 添加灵活的捐赠小部件以支持创作者或事业。
- **客户门户：** 使用 `CustomerInvoiceList` 和其他历史组件为用户显示发票历史和管理支付方式。

## 下一步

现在你已经对 `@blocklet/payment-react` 提供的功能有了大致了解，最好的学习方式就是动手构建一些东西。

深入阅读我们的 [入门指南](./getting-started.md) 来安装该库，并在几分钟内创建你的第一个支付表单。