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.
CheckoutForm
The primary component for handling payment links and checkout sessions.
CheckoutTable
Renders a complete pricing table and handles the checkout flow.
CheckoutDonate
Implement donation functionality with this flexible component.
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.
PricingTable
Display subscription plans and pricing options in a structured table.
PaymentSummary
Show a detailed summary of an order, including line items and totals.
Form Elements
A collection of inputs for building custom payment and contact forms.
Business Logic Components
Specialized components designed to handle complex business workflows, such as managing overdue invoices, resuming subscriptions, and configuring automatic credit top-ups.
OverdueInvoicePayment
Handle the payment of overdue invoices for a customer or subscription.
ResumeSubscription
Allow users to resume a canceled subscription with ease.
Auto-Topup Components
Manage and configure automatic credit top-up functionality.
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.