@blocklet/payment-react/docs/providers.zh.md

Reusable react components for payment kit v2

# 提供者

Context 提供者是 `@blocklet/payment-react` 的一个核心概念。它们充当您应用程序部分的包装器，使用 React 的 Context API 将必要的数据和函数传递给嵌套在其中的所有组件。这避免了需要通过组件树的多个层级手动向下传递 props。

要使用此库中的大多数组件，您必须使用适当的提供者来包装您的应用程序或相关页面。

```d2 Basic Provider Structure icon=graph:flowchart
direction: down

您的应用程序: {
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

    CheckoutForm: {
      label: "CheckoutForm"
    }
    CustomerInvoiceList: {
      label: "CustomerInvoiceList"
    }
  }
}

您的应用程序 -> PaymentProvider: "包装"
PaymentProvider -> CheckoutForm: "提供上下文"
PaymentProvider -> CustomerInvoiceList: "提供上下文"
```

该库提供了两个主要的提供者，每个都有不同的用途。选择适合您需求的一个。

<x-cards>
  <x-card data-title="PaymentProvider" data-icon="lucide:package" data-href="/providers/payment-provider">
    这是几乎所有支付相关操作所需的基础提供者。它管理支付方式、货币设置、用户会话信息，并提供一个预配置的 API 客户端。
  </x-card>
  <x-card data-title="DonateProvider" data-icon="lucide:heart" data-href="/providers/donate-provider">
    一个用于捐赠功能的专用提供者。它处理捐赠小部件的配置和状态，例如使用 CheckoutDonate 组件实现的那些小部件。
  </x-card>
</x-cards>

点击上方的提供者以查看其详细文档，包括所需的 props 和设置示例。