@chainpay/component v0.8.7

Chainpay component

The useChainPay parameter is the same as the showPayModal parameter, but the parameters passed in by showPayModal have higher priority.

Demo

import { useChainPay, ChainpayLng } from "chainpay-component";
import "chainpay-component/dist/style.css";

export default function Index() {
  const test = () => {
    console.log("test");
  };

  const { showPayModal } = useChainPay({
    dark: true,
    language: "en",
    currency: "¥",
    appId: "xxx", // required
    pollingInterval: 1000,
    getOrderInfoFn: async (params) => {
      console.log(params);
      await sleep(3000);
      return {
        code: "a12312321321",
        countDown: Math.ceil(Math.random() * 10) * 60 * 1000,
      };
    },
    onError(error) {
      console.log("error", error);
    },
    pollingFn: async () => {
      await sleep(1000);
      const n = Math.random();
      if (n > 0.5) {
        throw new Error("pollingFn error");
        return {
          status: "success",
        };
      }
      return {
        status: "pending",
      };
    },
    onSuccess() {
      console.log("success");
    },
    onClose() {
      console.log("close");
    },
    onCountDownTimeout() {
      console.log("countDownTimeout");
    },
  });

  return (
    <div className="flex justify-center w-[100vw]">
      <button
        type="button"
        onClick={() =>
          showPayModal({
            currency: "$",
            code: "",
            amount: 1993,
          })
        }
      >
        open
      </button>
    </div>
  );
}