Overview

@blocklet/payment-react is a comprehensive React component library designed to streamline the integration of payment flows, subscriptions, and donation systems into your blocklets. Built on top of Payment Kit, it provides a suite of pre-built, customizable, and production-ready components to help you build powerful payment experiences with minimal effort.

Key Features#

Pre-built UI Components

Includes a rich set of components like checkout forms, pricing tables, and donation widgets to cover common payment scenarios out of the box.

Customizable Themes

Gain full control over the look and feel of your payment flows using Material-UI themes, ensuring a consistent user experience.

i18n Support

Built-in internationalization support allows you to easily localize component text for a global audience.

Comprehensive Payment Operations

Easily handle complex payment logic, including subscriptions, refunds, invoice management, and metered billing.

Optimized Performance

Optimize your application's bundle size and improve performance with built-in support for lazy loading and dynamic component imports.

How It Works#

The library is architected around a provider-component model. The PaymentProvider is the core of the library, creating a context that manages authentication, API communication, and state. All other payment components must be wrapped within this provider to function correctly. This centralizes the payment logic and makes individual components lightweight and focused.


What You Can Build#

  • Subscription Services: Quickly implement pricing pages and checkout flows for SaaS products using CheckoutTable.
  • E-commerce Checkouts: Build one-time payment forms for selling goods with CheckoutForm.
  • Donation Systems: Add flexible donation widgets to support creators or causes with CheckoutDonate.
  • Customer Portals: Display invoice history and manage payment methods for users with CustomerInvoiceList and other history components.

Next Steps#

Now that you have an overview of what @blocklet/payment-react offers, the best way to learn is by building something.

Dive into our Getting Started guide to install the library and create your first payment form in minutes.

Getting Started