嵌入式模式

实现无感支付

演示链接

实现内嵌到自己的网页中,不脱离当前页面支付

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



// 1. 后端调用接口生成token (推荐)
// 获取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'
};


// 高度自适应的嵌入式收银台
const checkoutInstance = await embedCheckout("#checkout-container",checkoutOptions);
// 手动销毁
//checkoutInstance.close();
// 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,
  }
}

单一按钮

(谷歌pay和苹果pay使用嵌入式单一按钮需要域名备案)

单一 卡支付