Overview

@blocklet/payment-react is a React component library for building payment flows, subscriptions, and donation systems within Blocklet applications. It integrates directly with Blocklet's payment infrastructure, providing a streamlined way to handle transactions.

This library provides pre-built UI components, context providers, and utility functions to accelerate the development of payment-related features. Whether you need a simple checkout form, a complete pricing table, or a customer's invoice history, @blocklet/payment-react offers the tools to build it efficiently.

Key Features#

• Pre-built UI Components: A rich set of components including checkout forms, pricing tables, and donation widgets to cover common use cases.
• Customizable Themes: Gain full control over the look and feel using Material-UI themes, ensuring consistency with your application's design.
• Internationalization (i18n) Support: Built-in localization capabilities to support a global user base.
• Lazy Loading: Optimize your application's bundle size by dynamically importing components only when they are needed.
• Comprehensive Payment Operations: Functionality to manage subscriptions, process refunds, view invoices, and handle metered billing.

How It Works#

The library is built around a provider pattern. You wrap your application or relevant component tree with a PaymentProvider, which handles authentication, API communication, and state management. Components within this provider can then access the payment context to perform actions and display data.

This architecture decouples your UI components from the direct handling of API requests, making your code cleaner and easier to maintain.

Next Steps#

To begin integrating payments into your application, proceed to the next section.

• Getting Started: A step-by-step guide to installing the library and building a minimal, functional payment form.