Providers

Providers are the foundation of the @blocklet/payment-react library. They use React's Context API to manage state and share essential data—like user sessions, payment settings, and API clients—across all payment-related components. Wrapping your application in the appropriate provider is a necessary first step before using any of the library's components.

This library offers two primary providers:

• PaymentProvider: The core provider for all general payment and subscription features.
• DonateProvider: A specialized provider for managing donation widgets and settings.

PaymentProvider#

The PaymentProvider is the main provider that you will use in almost every integration. It is responsible for handling user authentication, fetching payment method settings, managing test/live modes, and providing a pre-configured API client to all nested components. Any component that deals with payments, subscriptions, or invoices must be a descendant of PaymentProvider.

It centralizes access to critical data, ensuring a consistent and secure payment environment.

View the PaymentProvider documentation to learn about its configuration and usage.

DonateProvider#

The DonateProvider is designed specifically for donation features. It manages the configuration and state for the CheckoutDonate component, such as preset amounts, button text, and donation history display.

It is important to note that the DonateProvider must be used within a PaymentProvider, as it relies on the core payment context to process donations.

View the DonateProvider documentation for implementation guides and examples.

With an understanding of the providers, you are ready to explore their specific configurations. We recommend starting with the PaymentProvider as it is fundamental to the library's operation.

Next, proceed to the PaymentProvider documentation.