Web UI 组件集成

ChainPay 提供了即用型的 Web UI 组件，让您能够快速将支付功能集成到您的网站中。

安装

首先，安装 ChainPay 组件包：

npm install @chainpay/component
# 或
yarn add @chainpay/component

基本用法

1. 导入组件和样式

import { useChainPay } from "@chainpay/component";
import "@chainpay/component/dist/style.css";

2. 基本示例

async function getSign(params) {
  const res = await fetch("/merchant/getSign", {
    method: "POST",
    body: JSON.stringify(params),
  });
  return await res.json();
}

export default function PayDemo() {
  const { showPayModal } = useChainPay({
    language: "zh",
    currency: "¥",
    appId: "app-ca9b8041-7ffa-4dda-ab69-20e35c168b69",
    getSignInfoFn: async (params) => {
      return await getSign(params);
    },
    onSuccess() {
      console.log("支付成功");
    },
    onCountDownTimeout() {
      console.log("支付超时");
    },
    onError(error) {
      console.error("支付错误:", error);
    },
  });

  return (
    <button
      onClick={() =>
        showPayModal({
          amount: 0.01,
        })
      }
    >
      模拟支付
    </button>
  );
}

3.签名说明

getSign方法，主要用于用户提交参数，由商户服务端提供签名结果，具体可参考demo页面了解流程。

举例说明: 用户提交参数:

{"amount":"0.01","payChannel":"xxx","currency":"USDH","currencyId":"USDH","extra":{"channel_pay_type":""}}

商户端接收参数，进行签名，返回签名结果。

{
    "code": 0,
    "data": {
        "payChannel": "xxx",
        "sign": "YDX+V5YDoM1u1SF/taOBFHKeKJ97CYG1WUyPpIpmyx37sFQYtGPtTWS0kfS/4pswAocfammge+ic8pGTCkJtD5jT/bH+QHc3VoCR1P8VwFEyo1Vcx++4wLmWKWuCiMQYQX2PXf8dgFqPVeZh71XE9+HNtVNbJh/EB7ysS8hSQPE=",
        "outTradeNo": "1757576708027995345",
        "amount": "0.01",
        "currency": "USDH",
        "currencyId": "USDH",
        "timestamp": "",
        "timeExpire": "",
        "payAddress": "",
        "extra": {
            "channel_pay_type": ""
        }
    },
    "msg": "success"
}

然后创建订单，向chainpay提交订单信息，获取支付链接。