前端快速接入Airwallex托管支付

前端集成 Airwallex 支付解决方案指南

Airwallex是一个境外支付平台，Airwallex.js 是官方提供的浏览器端 JavaScript SDK，通过预构建的支付组件帮助开发者快速实现跨境支付功能。前端接入方式主要有三种，分别是托管支付页面、插入式元件以及嵌入元素(可按照自身需求使用不同接入方式)。本文主要是通过“托管支付页面”的方式进行接入。以下是完整接入流程：

一、安装 Airwallex.js

# 通过包管理安装 (适合工程化项目)
npm：
npm install @airwallex/components-sdk

# 或：
yarn：
yarn add @airwallex/components-sdk
 
# 或：
pnpm：
pnpm install @airwallex/components-sdk

# CDN 直连 (推荐快速接入)
cdn：
<script src="https://static.airwallex.com/components/sdk/v1/index.js"></script>

二、初始化 Airwallex.js

加载 Airwallex.js 并使用 init() 功能。tips：init()只能在应用程序里面初始化一次。

src/utils/airwallex.js：

//引入空中云汇airwallex的sdk(支付)
import { init } from "@airwallex/components-sdk";

export const initializeAirwallex = async () => {
  const { payments } = await init({
    locale: 'zh',//网站区域设置：默认浏览器语言，如果它不是受支持的语言，则默认为en。这里设置为zh
    env: "prod",//环境： prod-线上 或 demo-测试
    enabledElements: ["payments"],//表示 Elements 的 Element 组数组
  });
  return payments;
};

三、在页面上添加重定向按钮，按钮可以重定向到托管支付页面。

<!-- 添加结帐按钮  -->
<button id="hpp" @click="submitOrder">提交订单</button>

四、添加按钮处理程序。

调用第2步骤中初始化后的redirectToCheckout() 方法，并将接口返回的intent_id、client_secret、country_code、currency、customer_id 等数据传入该方法的options中。

当该方法被触发，Airwallex 空中云汇会将你的购物者重定向到托管支付页面，在支付页面上显示相关的支付方式，收集购物者的支付详情，并最终触发身份验证。完成付款后，将被重定向到提供的successUrl或failUrl上，并且 PaymentIntent ID 将附加到 URL。

根据不同支付需求，可以选择订阅支付或一次性支付方式。不同的支付模式设置不同的mode(订阅：recurring，一次性支付：payment)。订阅模式中，需要创建PaymentConsent，根据不同使用场景保存信息：分为客户发起的付款(next_triggered_by设置为customer)以及商家发起的付款(next_triggered_by设置为merchant)。以下是重定向到托管支付页面的代码，其中订阅支付这里主要是商家发起付款的方式：

//引入airwallex.js文件(初始化)
import { initializeAirwallex } from "@/utils/airwallex.js";

export default {
   methods:{
      //提交订单按钮
      subimitOrder(){
            //从后端接口中获取id、client_secret、currency、customer_id等信息，这里省略从接口获取数据
            let { id, client_secret, currency, customer_id } = res.data;
            let payments = initializeAirwallex();
            //一次性支付模式
            payments.then((res)=>{
               let result = res;
               result.redirectToCheckout({
                    mode:"payment",//recurring-订阅 或 payment-支付
                    intent_id:id,//你的intent_id mode='payment'模式下必填
                    client_secret: client_secret,//你的client_secret 必填
                    currency: currency,//你的货币符号 必填
                    country_code:country_code,//所在国家地区的两个字母的 ISO 国家/地区代码
                    methods: [
                        "googlepay",
                         "applepay",
                        "card",
                        "airwallex_pay",
                        "alipayhk",
                        "alipaycn",
                        "wechatpay",
                        "fps"
                    ],//支付方式
                    successUrl:"your success url",//支付成功后，重定向页面
                    failUrl:"your failed url",//支付失败后，重定向页面
               })
            })

            //订阅模式
            payments.then((res) => {
                let result = res;
                result.redirectToCheckout({
                  mode:"recurring",//recurring-订阅 或 payment-支付
                  intent_id: id,//你的intent_id mode='payment'模式下必填
                  client_secret: client_secret,//你的client_secret 必填
                  currency: currency,//你的货币符号 必填
                  autoSaveCardForFuturePayments:true,//是否应自动保存卡付款方式以供将来交易时使用
                  customer_id: customer_id,//注册用户结账时使用的 Customer 的 ID mode="recurring"情况下必填
                  cvcRequired: true,
                  //recurring选项
                  recurringOptions: {
                    card: {
                      next_triggered_by: 'merchant',//商家-merchant,客户-customer(默认值) 后续付款是商家触发还是客户触发
                      merchant_trigger_reason: 'scheduled',//后续付款是否'scheduled'或'unscheduled',默认'unscheduled'
                      currency,//货币，由三个字母组成的 ISO 货币代码
                    }
                  },
                  requiredBillingContactFields: ['name'],//联系人字段,自选。
                  successUrl:"your success url",//支付成功后，重定向页面
                  failUrl:"your failed url"//支付失败后，重定向页面
                });
            })
      }

   }

}

五、网页链接

空中云汇 Airwallex 支付平台

官方文档链接：https://www.airwallex.com/docs

官方Airwallex.js链接：https://www.airwallex.com/docs/js/