表单模式

通过表单模式嵌入, 可以更好的控制样式

演示链接


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



// 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/").then((res) => res.json());
const checkoutOptions = {
  sessionToken: session,
  env: "test", // 'test' | 'prod'
};


const currentCheckoutInstance = await createElementsCheckout("#checkout-container",checkoutOptions);


async function submit() {
      const data = await currentCheckoutInstance.elementsSubmit({
        paymentMethod: {
          shopperEmail: document.getElementById("email").value,
        },
      });
      const { success, message } = data;
      if (!success) {
        console.error(message)
        return;
      }
      //成功后会直接出现的到returnUrl
    }

// 手动销毁
//checkoutInstance.close();