支付按钮 | Solana

Commerce Kit 目前处于测试阶段。API 可能会在正式发布前发生变动。关于 Commerce Kit 的更多信息，请参阅Commerce Kit 文档。

来自 Commerce Kit 的 PaymentButton 组件，提供了完整的支付界面——开箱即用地处理钱包连接、代币选择、交易处理和 UI 状态。

安装

pnpm add @solana-commerce/kit

基本用法

import { PaymentButton } from "@solana-commerce/kit";

function Checkout() {
  return (
    <PaymentButton
      config={{
        merchant: { name: "My Store", wallet: "your-wallet-address" },
        mode: "buyNow"
      }}
      paymentConfig={{
        products: [{ id: "item-1", name: "Coffee", price: 5.0, quantity: 1 }]
      }}
      onPaymentSuccess={(signature) => {
        console.log("Payment confirmed:", signature);
      }}
    />
  );
}

欢迎访问 Commerce Kit Playground 配置和测试该组件。

打赏按钮

支付弹窗

Solana Pay 二维码弹窗

支付模式

mode 选项决定了按钮的行为：

模式	描述
`buyNow`	单一商品购买，金额固定
`cart`	购物车，支持多商品
`tip`	用户自定义金额（捐赠/打赏）

配置

必填配置

属性	类型	描述
`merchant.name`	`string`	结账时显示的商户名称
`merchant.wallet`	`string`	用于接收付款的 Solana 钱包地址
`mode`	`'buyNow' \| 'cart' \| 'tip'`	支付流程类型

可选配置

属性	类型	描述
`network`	`'mainnet' \| 'devnet'`	Solana 网络（默认值：`'mainnet'`）
`rpcUrl`	`string`	自定义 RPC 节点
`allowedMints`	`string[]`	通过 mint 地址限制可接受的代币
`showQR`	`boolean`	启用二维码支付选项
`theme`	`ThemeConfig`	外观自定义（颜色、圆角等）

支付配置

对于 buyNow 和 cart 模式，请通过 paymentConfig 提供产品：

paymentConfig={{
  products: [
    { id: '1', name: 'T-Shirt', price: 25, quantity: 2 },
    { id: '2', name: 'Hoodie', price: 45, quantity: 1 }
  ]
}}

事件回调

回调函数	参数	描述
`onPaymentSuccess`	`(signature: string)`	交易已在链上确认
`onPaymentError`	`(error: Error)`	支付在任意阶段失败
`onPaymentStart`	`()`	支付流程已启动
`onCancel`	`()`	用户已取消支付

自定义触发器

用你自己的元素替换默认按钮：

<PaymentButton
  config={{
    merchant: { name: "Shop", wallet: "address" },
    mode: "buyNow"
  }}
  paymentConfig={{
    products: [{ id: "1", name: "Product", price: 10, quantity: 1 }]
  }}
>
  <button className="my-custom-button">Pay with Solana</button>
</PaymentButton>

Table of Contents