Checkout Components

The @blocklet/payment-react library provides a set of high-level Checkout Components designed to serve as complete, ready-to-use entry points for various payment scenarios. These components encapsulate the entire user flow, from selecting a product to completing the payment, allowing you to integrate complex payment experiences with minimal setup.
Whether you need to display a pricing table, accept donations, or process a direct payment link, these components handle the underlying logic of session creation, state management, and UI rendering.
Component Flow#The typical flow involves a user interacting with an entry-point component like CheckoutTable or CheckoutDonate. These components then create a CheckoutSession and delegate the final payment processing to the core CheckoutForm component.

Explore the components below to find the best fit for your application's needs.
CheckoutForm
The fundamental component for processing payments. It takes a `paymentLink` or `checkoutSession` ID and renders the complete payment UI.
CheckoutTable
Displays a complete pricing table. When a user selects a plan, it automatically initiates a checkout session and renders the payment form.
CheckoutDonate
A flexible component for adding donation functionality. It handles donation setup, displays supporter history, and manages the donation payment flow.
Each of these components is designed to be highly customizable and can be integrated seamlessly into your application. Click on any card to view its detailed documentation and usage examples.
Overview

Getting Started

Providers

Components

Guides

Hooks

Checkout Components

Component Flow#

CheckoutForm

CheckoutTable

CheckoutDonate

Components

CheckoutForm
