如何开启打赏功能?
@blocklet/payment-react 提供了一个强大的打赏功能，通过 CheckoutDonate 组件和可选的 DonateProvider，开发者可以轻松为文章、内容或其他服务添加打赏支持，与 Blocklet 的支付基础设施无缝集成。
本指南将详细介绍如何启用打赏功能，包括安装依赖和代码集成。
步骤 1：安装 Payment Kit#
打赏功能依赖 Payment Kit 作为后端支持。你需要从 Blocklet 商店下载并安装 Payment Kit：
- 测试商店
- 正式商店
安装步骤：#
- 访问上述链接，选择适合你的环境（测试或生产）的商店。
- 下载并部署 Payment Kit 到你的 Blocklet 应用中。
- 完成安装后，获取
session和connectApi配置，用于连接 Payment Kit 的认证和支付服务。
提示：测试商店适合开发和调试，正式商店用于生产环境。确保你的 Payment Kit 已正确运行并与前端应用通信。
步骤2：安装 @blocklet/payment-react#
在你的 React 项目中安装组件库：
npm install @blocklet/payment-react步骤 3：集成打赏组件#
根据你的需求，可以选择以下两种方式集成打赏功能：
方式 1：基本使用 - CheckoutDonate#
直接使用 CheckoutDonate 组件，提供完整的打赏配置，适合简单场景：
import { PaymentProvider, CheckoutDonate } from '@blocklet/payment-react';
function DonationButton() {
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutDonate
livemode={false} // 测试模式，生产环境改为 true
settings={{
target: "post-123", // 必填，打赏实例的唯一标识符（如文章 ID）
title: "支持作者", // 必填，打赏弹窗标题
description: "如果这篇文章对你有帮助，不妨请我喝杯咖啡", // 必填，打赏描述
reference: "https://your-site.com/posts/123", // 必填，打赏参考链接
beneficiaries: [
{
address: "tip user did", // 必填，受益人地址（替换为实际 DID）
share: "100", // 必填，受益占比
},
],
amount: {
presets: ['1', '5', '10'], // 预设打赏金额
custom: false, // 是否允许用户输入自定义金额
},
appearance: {
button: {
text: '打赏', // 按钮文本
icon: '<Like />', // 自定义图标（需替换为实际 JSX 组件）
size: 'large', // 按钮尺寸
color: 'error', // 按钮颜色
variant: 'contained', // 按钮样式
},
history: {
variant: 'default', // 打赏历史显示样式
},
},
}}
/>
</PaymentProvider>
);
}
export default DonationButton;方式 2：高级使用 - DonateProvider（推荐）#
自 Payment Kit 1.18.7 版本起，DonateProvider 允许 Payment Kit 统一管理打赏的开启状态和配置，简化前端代码，适合需要动态控制打赏的场景：
import { PaymentProvider, DonateProvider, CheckoutDonate } from '@blocklet/payment-react';
function DonationButton() {
return (
<PaymentProvider session={session} connect={connectApi}>
<DonateProvider
mountLocation="your-unique-donate-instance" // 必填，打赏实例的挂载位置标识符
description="帮助定位此打赏实例" // 可选，描述挂载位置的作用
>
<CheckoutDonate
settings={{
target: "post-123", // 必填，打赏实例的唯一标识符
title: "支持作者", // 必填，打赏弹窗标题
description: "如果这篇文章对你有帮助，不妨请我喝杯咖啡", // 必填，打赏描述
reference: "https://your-site.com/posts/123", // 必填，打赏参考链接
beneficiaries: [
{
address: "tip user did", // 必填，受益人地址（替换为实际 DID）
share: "100", // 必填，受益占比
},
],
}}
/>
</DonateProvider>
</PaymentProvider>
);
}
export default DonationButton;配置说明#
- target：用于标识打赏对象（如文章或内容）的唯一字符串，确保不重复。
- beneficiaries.address：替换为实际的受益人 DID（Decentralized Identifier）
- DonateProvider：需 Payment Kit 1.18.7 或更高版本支持，提供更集成的管理方式。
注意事项#
- 版本兼容：若使用
DonateProvider，确保 Payment Kit 版本 ≥ 1.18.7，否则使用基本方式。