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

Reusable react components for payment kit v2

# プロバイダー

Context Provider は `@blocklet/payment-react` の中心的な概念です。これらはアプリケーションの一部をラップする役割を果たし、React の Context API を使用して、ネストされたすべてのコンポーネントに重要なデータと機能を渡します。これにより、コンポーネントツリーの多くのレベルを通じて手動でプロップを渡す必要がなくなります。

このライブラリのほとんどのコンポーネントを使用するには、アプリケーションまたは関連ページを適切なプロバイダーでラップする必要があります。

```d2 基本的なプロバイダー構造 icon=graph:flowchart
direction: down

あなたのアプリケーション: {
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

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

あなたのアプリケーション -> PaymentProvider: "ラップする"
PaymentProvider -> CheckoutForm: "コンテキストを提供"
PaymentProvider -> CustomerInvoiceList: "コンテキストを提供"
```

このライブラリは、それぞれ異なる目的を果たす2つの主要なプロバイダーを提供しています。ニーズに合ったものを選択してください。

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

上のプロバイダーをクリックすると、必須のプロップや設定例など、詳細なドキュメントが表示されます。