Components

The @blocklet/payment-react library offers a comprehensive suite of pre-built React components designed to accelerate the development of payment, subscription, and donation features. These components are categorized to help you find the right tool for the job, whether you need a complete drop-in solution or fine-grained UI elements to build a custom experience.

All components are designed to work seamlessly within the PaymentProvider context, which handles state management and API communication.

Component Architecture#

The following diagram illustrates how the high-level components typically interact. User-facing components like CheckoutTable or CheckoutDonate act as entry points, which then utilize the core CheckoutForm to handle the final payment processing.

Component Categories#

Explore our component categories to find the building blocks you need.

Checkout Components#

These are high-level components that provide complete, out-of-the-box payment experiences. Use them as the primary entry points for your payment flows.

UI Components#

A collection of granular components for building custom payment forms and displays. Combine these blocks to create a user interface that perfectly matches your application's design.

Business Logic Components#

Specialized components designed to handle complex business workflows, such as managing overdue invoices, resuming subscriptions, and configuring automatic credit top-ups.

History Components#

Display historical payment and credit data to your users. These components make it easy to render lists of invoices, payments, and credit transactions.