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

Reusable react components for payment kit v2

# Providers

To enable payment functionalities in your application, you must first wrap your components with the appropriate context providers. These providers use React's Context API to supply essential data and functions throughout your component tree, eliminating the need to pass props down manually.

Nearly all components in `@blocklet/payment-react` depend on a provider to function correctly. Wrapping your application or a specific page in a provider makes payment settings, user session information, and API clients available to all nested payment components.

The following diagram illustrates how these providers wrap your application components:

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

The library includes two primary providers, each designed for a specific use case.

<x-cards data-columns="2">
  <x-card data-title="PaymentProvider" data-icon="lucide:package" data-href="/providers/payment-provider">
    The core provider required for all standard payment operations. It manages payment methods, currency settings, API access, and user session data.
  </x-card>
  <x-card data-title="DonateProvider" data-icon="lucide:heart" data-href="/providers/donate-provider">
    A specialized provider for donation features. It handles the unique settings and state management for donation components like `CheckoutDonate`.
  </x-card>
</x-cards>

For detailed setup instructions and available properties, please refer to the documentation for each specific provider.