快速上手
@blocklet/payment-react 是一个专为 Blocklet 应用设计的 React 组件库，集成支付流程、订阅管理和打赏功能，与 Blocklet 的支付基础设施无缝衔接。
本指南将带你完成从安装到运行一个简单支付组件的完整过程。
前提条件#
- Node.js 和 npm 已安装。
- 一个 Blocklet 应用环境，用于提供
session和connectApi配置。 - （可选）Payment Kit 已部署，用于支持支付功能（详见 Payment Kit 文档）。
步骤 1：安装组件库#
在你的 React 项目中通过 npm 安装 @blocklet/payment-react：
npm install @blocklet/payment-react步骤 2：基本集成#
在你的应用中引入核心组件并配置支付环境。以下是一个简单的支付表单示例：
import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
function App() {
// 假设 session 和 connectApi 已从你的认证系统获取
const session = /* 从你的认证服务获取 */;
const connectApi = /* 从 Blocklet 环境获取 */;
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutForm
id="plink_xxx" // 支付链接 ID，由 Payment Kit 提供
mode="inline" // 内嵌显示模式
showCheckoutSummary={true} // 显示结账概要
onChange={(state) => console.log('结账状态：', state)} // 状态变化回调
/>
</PaymentProvider>
);
}
export default App;关键配置说明：#
session：用户会话数据，通常从你的认证系统获取。connectApi：Blocklet 提供的支付 API 接口，确保已正确初始化。id：支付链接 ID（例如 `plink_xxx`），由 Payment Kit 生成，用于标识特定的支付流程。
步骤 3：运行与测试#
- 启动项目
npm start在浏览器中打开应用，你将看到一个内嵌的支付表单。
- 测试支付流程
- 输入测试数据（若使用测试模式，确保
livemode=false）。 - 检查控制台输出，确认
onChange回调是否正常触发。
通过以上步骤，你可以在几分钟内让支付功能在你的应用中运行起来！准备好后，探索更多高级功能，让你的支付体验更上一层楼。
更多探索#
- 自定义样式：通过
theme属性调整组件外观。 - 探索更多组件：
- CheckoutTable：展示定价表格。
- OverdueInvoicePayment：处理逾期账单。
- CheckoutDonate：添加打赏功能，详见 启用打赏指南。