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:
The library includes two primary providers, each designed for a specific use case.