如何开启打赏功能?

@blocklet/payment-react 提供了一个强大的打赏功能，通过 CheckoutDonate 组件和可选的 DonateProvider，开发者可以轻松为文章、内容或其他服务添加打赏支持，与 Blocklet 的支付基础设施无缝集成。

本指南将详细介绍如何启用打赏功能，包括安装依赖和代码集成。

步骤 1：安装 Payment Kit

打赏功能依赖 Payment Kit 作为后端支持。你需要从 Blocklet 商店下载并安装 Payment Kit：

测试商店

Payment Kit

正式商店

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，否则使用基本方式。