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

Reusable react components for payment kit v2

# Providers

Context Providers are a core concept in `@blocklet/payment-react`. They act as wrappers around parts of your application, using React's Context API to pass down essential data and functions to all the components nested within them. This avoids the need to pass props down manually through many levels of your component tree.

To use most of the components in this library, you must wrap your application or relevant pages with the appropriate provider.

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

Your-Application: {
  shape: rectangle

  PaymentProvider: {
    label: "PaymentProvider"
    shape: rectangle

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

Your-Application -> PaymentProvider: "Wraps"
PaymentProvider -> CheckoutForm: "Provides context"
PaymentProvider -> CustomerInvoiceList: "Provides context"
```

The library offers two main providers, each serving a distinct purpose. Choose the one that fits your needs.

<x-cards>
  <x-card data-title="PaymentProvider" data-icon="lucide:package" data-href="/providers/payment-provider">
    The fundamental provider required for nearly all payment-related operations. It manages payment methods, currency settings, user session information, and provides a pre-configured API client.
  </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 configuration and state for donation widgets, such as those implemented with the CheckoutDonate component.
  </x-card>
</x-cards>

Click on a provider above to view its detailed documentation, including required props and setup examples.