Skip to main content

Web UI Component Integration

ChainPay provides ready-to-use Web UI components that allow you to quickly integrate payment functionality into your website.

Installation​

First, install the ChainPay component package:

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

Basic Usage​

1. Import Components and Styles​

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

2. Basic Example​

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: "en",
    currency: "$",
    appId: "app-xxxx-xxxx-xxxx-xxxx-xxxx",
    getSignInfoFn: async (params) => {
      return await getSign(params);
    },
    onSuccess() {
      console.log("Payment successful");
    },
    onCountDownTimeout() {
      console.log("Payment timeout");
    },
    onError(error) {
      console.error("Payment error:", error);
    },
  });

  return (
    <button
      onClick={() =>
        showPayModal({
          amount: 0.01,
        })
      }
    >
      Mock payment
    </button>
  );
}

3.sign description​

getSign method is used to get sign info, mainly used for user submit params, and return sign info by merchant server.

example: user submit params:

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

merchant server receive params, and return sign info.

{
    "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"
}

next step: create order, and submit order info to chainpay, and get pay link.