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/checkout-sdk@latest/dist/index.umd.min.js"></script>
<script>
  // SDK 会挂载到 window.FuturePayCheckoutSDK
  const { openCheckoutModal, embedCheckout, PaymentCheckout } =
    window.FuturePayCheckoutSDK;
  // openCheckoutModal(checkoutOptions);
</script>

<script type="module">
  import {
    openCheckoutModal,
    embedCheckout,
    PaymentCheckout,
  } from "https://cdn.jsdelivr.net/npm/@futurepay/checkout-sdk@latest/dist/index.esm.js";

  // openCheckoutModal(checkoutOptions);
</script>

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

//请注意 sessionToken 和 orderInfo 互斥 会优先使用sessionToken

// 1. 后端调用接口生成token (推荐)
// 获取session 需要商户自己的后端调用All-In-One Checkout (V2)生成sessionToken
// 获取session文档地址:https://doc.futurepay.global/update/docs/all-in-one-checkout-copy#/
const session = await fetch("your/api/session").then((res) => res.json());
const  = {
  sessionToken: session,
  env: "test", // 'test' | 'prod'
};
//2. 前端直接生成订单
// 如果不想通过后端生成session，则需要提供appId, merchantId, merchantRsaPublicKey, orderInfo
const checkoutOptions = {
  appId: "your-app-id",
  merchantId: "your-merchant-id",
  merchantRsaPublicKey: "your-merchant-rsa-public-key",
  env: "test", // 'test' | 'prod'
  orderInfo: {
    amount: {
      currency: "USD",
      value: 100,
    },
    countryCode: "US",
    productDetail: "Sample Product",
    origin: "https://your-website.com",
    reference: "ORDER_123",
    returnUrl: "https://your-website.com/return",
    webhookUrl: "https://your-website.com/webhook",
    productName: "Sample Product",
    paymentMethod: {
      type: "card",
      firstName: "John",
      lastName: "Doe",
      shopperEmail: "[email protected]",
      telephoneNumber: "1234567890",
    },
    browserInfo: {
      terminalType: "web",
      osType: "desktop",
    },
  },
};

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("支付成功");
      // 处理支付成功逻辑
    },
    onError: () => {
      console.error("支付失败");
      // 处理支付失败逻辑
    },
    onClose: () => {
      console.log("收银台关闭");
    },
  },
});

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

// 或嵌入到容器
await checkout.embed("#container");