payingpay-payment-kit

对 Coinflow 支付组件的二次封装，开箱即用。提供：

| 组件 | 说明 | |---|---| | <ApplePayButton /> | 封装 CoinflowApplePayButton，自动处理全屏蒙层 | | <GooglePayButton /> | 封装 CoinflowGooglePayButton | | <CardForm ref={...} /> | 封装 CoinflowCardForm，通过 ref 暴露 tokenize() | | <ChallengeIframe /> | 封装 3ds|

安装

npm install payingpay-payment-kit

快速开始

import { useRef, useState } from "react";
import {
  ApplePayButton,
  GooglePayButton,
  CardForm,
  ChallengeIframe
} from "payingpay-payment-kit";
import type { CardFormHandle } from "payingpay-payment-kit";

export default function CheckoutPage() {
  const cardRef = useRef<CardFormHandle>(null);
  const [loading, setLoading] = useState(false);

  const handlePay = async () => {
    setLoading(true);
    // 1. 获取卡 token
    const result = await cardRef.current?.tokenize();
    if (!result) return setLoading(false);

    const { token, expMonth, expYear } = result;

    setLoading(false);
  };

  return (
    <div>
      {/* Apple Pay */}
      <ApplePayButton
        env={"prod"|| "dev"}
        queryString="YOUR_QUERY_STRING"
        onSuccess={() => alert("paid!")}
        onError={console.error}
      />

      {/* Google Pay */}
      <GooglePayButton
        env={"prod"|| "dev"}
        queryString="YOUR_QUERY_STRING"
        onSuccess={() => alert("paid!")}
        onError={console.error}
      />

      {/* Card Form */}
      <CardForm
        ref={cardRef}
        env={"prod"|| "dev"}
        queryString="YOUR_QUERY_STRING"
        theme={{ textColor: "#fff", background: "#090a0c" }}
        onLoad={() => console.log("ready")}
      />

      {/* ChallengeIframe */}
      <ChallengeIframe
          url={url}
          creq={creq}
          onSuccess={() =>  console.log("3DS passed");}
          onFailure={(event) =>  console.error("3DS failed:", event.data);}
        />

    </div>
  );
}

API

<ApplePayButton />

| Prop | 类型 | 必填 | 说明 | |---|---|---|---| | env | "prod" \| "dev" | ✅ | 环境 | | queryString | string | ✅ | 查询字符串 | | onSuccess | () => void | — | 支付成功回调 | | onError | (error) => void | — | 支付失败回调 | | style | CSSProperties | — | 外层容器样式 |

<GooglePayButton />

同 ApplePayButton，无 onHeightChange。

<CardForm ref={...} />

| Prop | 类型 | 必填 | 说明 | |---|---|---|---| | env | "prod" \| "dev" | ✅ | 环境 | | queryString | string | ✅ | 查询字符串 | | theme | object | — | 表单主题（颜色/字体等） | | onLoad | () => void | — | 表单加载完成回调 |

<ChallengeIframe/>

| Prop | 类型 | 必填 | 说明 | |---|---|---|---| | url | string | ✅ | 地址 | | creq | string | — | creq | | onSuccess | () => void | — | 成功回调 | | onFailure | () => void | — | 失败回调 | | style | CSSProperties | — | 可选，覆盖默认全屏样式 |