# プロバイダー

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

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

<!-- DIAGRAM_IMAGE_START:architecture:16:9::1765377042 -->
![Providers](assets/diagram/providers-01.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

このライブラリは、それぞれ異なる目的を果たす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>

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