FuturePay Checkout SDK

npm install @futurepay/checkout-sdk
# 或
yarn add @futurepay/checkout-sdk
# 或
pnpm add @futurepay/checkout-sdk

<!-- 通过 jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/@futurepay/[email protected]/dist/index.umd.min.js"></script>
<script>
  // SDK 会挂载到 window.FuturePayCheckoutSDK
  const { openCheckoutModal, embedCheckout,createElementsCheckout, PaymentCheckout } =
    window.FuturePayCheckoutSDK;
  // openCheckoutModal(checkoutOptions);
</script>

import { openCheckoutModal, embedCheckout, createElementsCheckout } from "@futurepay/checkout-sdk";

// 获取session 需要商户自己的后端调用All-In-One Checkout (V2)生成sessionToken
// 获取session文档地址:https://doc.futurepay.global/docs/all-in-one-checkout-v2
const session = await fetch("your/api/session").then((res) => res.json());
const checkoutOptions  = {
  sessionToken: session,
  env: "test", // 'test' | 'prod'
};
// 打开弹窗
await openCheckoutModal(checkoutOptions)

// 嵌入
await embedCheckout("#container",checkoutOptions);

// 表单嵌入
const submit =  await createElementsCheckout("#container",checkoutOptions);

// your/api/session的api node示例代码

import { format } from 'date-fns'

//正式环境使用 https://api.futurepay.global 开发环境使用 https://api.futurepay-develop.com
const baseUrl = 'https://api.futurepay-develop.com'

//在商户后台获取
const paymentConfig = {
  appKey: 'your appKey',
  appID: 'your appID',
  merchantID: 'your merchantID',
}

//获取收银台会话
export async function getSession() {
  const body = {
    amount: {
      value: 10000, //金额
      currency: 'USD', //币种
    },
    countryCode: 'US', //货币
    reference: '123456789', // 使用您的transactionId 作为唯一 reference
    returnUrl: 'https://futurepay.global', //用户交易重定向页面
    origin: 'https://futurepay.global', //您的网站地址
    productDetail: 'productDetail',
    productName: 'productName',
    shopImgLink: '', //产品图片 最好传入 在收银台会展示
    directReturn: true, //交易成功后是否直接跳转到returnUrl
    webhookUrl: `/api/checkout/payment`, //您的webhookUrl地址 交易变动通知
  }

  const { appKey, appID, merchantID } = paymentConfig

  const data = await fetch(baseUrl + '/checkout/newSession', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      appId: appID,
      merchantId: merchantID,
      curTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'), //yyyy-MM-dd HH:mm:ss的格式即可  可以使用您自己的时间库
      Authorization: SingUtils.getSign(body, appKey), //SingUtils类 请查看文档 https://doc.futurepay.global/reference/api%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81 获取签名类
    } as HeadersInit,
    body: JSON.stringify(body),
  }).then((res) => res.json())
  //如果使用收银台 请使用sessionToken
  return {
    sessionToken: data.data.sessionToken,
    url: data.data.checkOutUrl,
  }
}

import { PaymentCheckout } from "@futurepay/checkout-sdk";

const checkout = new PaymentCheckout({
  env: "test",
  sessionToken: "your-session",
	//收银台内部配置
  checkoutConfig: {
    theme: "dark",
  },
  // iframe样式配置(可选)
  style: {
  },
// iframe样式配置(可选)
	className:'',
  // 弹窗配置 (可选)
  modal: {
    closableByOverlay: true,
    overlayColor: "rgba(0, 0, 0, 0.6)",
    loading: {
      show: true,
      color: "#007bff",
    },
  },
 //(可选)
  callbacks: {
    onSuccess: () => {
      console.log("支付成功");
      // 默认成功后会直接重定向到returnUrl 
    },
    onError: () => {
      console.error("支付失败");
      // 处理支付失败逻辑
    },
    onClose: () => {
      console.log("收银台关闭");
    },
  },
});

// 打开弹窗
await checkout.openModal();

// 嵌入
await checkout.embed("#container");

// 表单嵌入
const submit =  await checkout.createElements("#container");
const result = await elementsSubmit()