Components

The @blocklet/payment-react library provides a comprehensive suite of pre-built React components designed to accelerate the development of payment, subscription, and donation features. These components are organized into logical categories to help you find the right tool for your specific use case, from high-level, all-in-one solutions to granular UI building blocks.

All components are designed to be composable and customizable, ensuring they can fit seamlessly into your application's design and logic.

Component Architecture#

The components are structured into distinct categories based on their functionality. This modular approach allows you to import only what you need and gives you a clear path for building your payment interfaces.

Provider Requirements#

A critical concept to understand is that almost all components in this library must be wrapped within a PaymentProvider to function correctly. This provider supplies the necessary context, such as the user session and API connection details. Specific components, like CheckoutDonate, may require an additional provider like DonateProvider.

Before using any components, ensure you have set up the required context. For more details, refer to the Providers documentation.

Component Categories#

Checkout Components#

These are high-level components that encapsulate entire payment flows. They offer the quickest way to integrate functionality for standard checkouts, pricing plan selections, and donation widgets with minimal configuration.

Key Components: CheckoutForm, CheckoutTable, CheckoutDonate

Read more in the Checkout Components section.

UI Components#

For more granular control over your user interface, the UI Components provide the essential building blocks. This category includes everything from standalone pricing tables and payment summaries to individual form elements like address fields, country selectors, and status indicators.

Key Components: PricingTable, PaymentSummary, AddressForm, PhoneInput, Status

Explore the full set in the UI Components section.

Business Logic Components#

These components are designed to handle specific, complex business scenarios. They abstract away the underlying logic for tasks like allowing a user to resume a canceled subscription or facilitating the payment of multiple overdue invoices, enabling you to implement these features efficiently.

Key Components: OverdueInvoicePayment, ResumeSubscription

Learn how to manage these workflows in the Business Logic Components section.

History Components#

Displaying historical data is a common requirement for user account pages. These components make it easy to render lists of a customer's past invoices, payments, and credit transactions, often including built-in support for pagination and filtering.

Key Components: CustomerInvoiceList, CustomerPaymentList, CreditGrantsList

Find out how to display user data in the History Components section.

Next Steps#

Now that you have an overview of the component categories, you can explore the specific documentation for the components that fit your needs. If you're looking for the fastest integration path, we recommend starting with the Checkout Components.