集成步骤

1. 实现流程

(a) 按照下面流程完成测试环境的测试；

(b) 测试是可以在 127.0.0.1和 localhost 下进行；

(c) 测试完成可以切换到产线请求的 url 即可上线。

1.1 获取 clientKey 和 sessionKey

接口详细说明请参阅：接口参数。

(a) 请求API；环境及地址如下：

请求环境	请求地址
Test	https://pay-gate-uat.payermax.com/aggregate-pay/api/gateway/applyDropinSession
Live	https://pay-gate.payermax.com/aggregate-pay/api/gateway/applyDropinSession

(b) 从返回值获取 clientKey 和 sessionKey。

注意：

服务端获取到的clientKey、sessionKey返回给前端用于组件初始化。

请求Header示例：

{
    'Content-Type': 'application/json;charset=utf-8',
    'Accept': 'application/json',
    'sign': <参考：https://docs-v2.payermax.com/doc-center/developer/config-settings.html>
};

请求Body示例：

request.body = {
    "version": "1.1",
    "keyVersion": "1",
    "requestTime": <替换>, 
    "merchantNo": <替换>,
    "appId": <替换>, 
    "data": {
        "country": "MY", 
        "currency": "MYR", 
        "totalAmount":"50",
        "userId": "20220622_00086",
        "componentList":['CARD', 'APPLEPAY', "GOOGLEPAY"]
    }
    }
    
response={
    "msg": "",
    "code": "APPLY_SUCCESS", 
    "data": {
    "sessionKey": "bf2c47b085e24c299e45dd56fd751a70",
    "clientKey": "bbd8d2639a7c4dfd8df7d005294390df" 
    }
 }

1.2 渲染组件

• 前端示例

下载Demo示例，替换 clientKey 和 sessionKey 后，本地打开即可看到效果。

• 前端集成步骤

(a) 在相关 HTML 页面上引入 CDN 包；

<script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"></script>

(b) 通过 div 标签嵌入一个 iframes；

<div class="frame-GooglePay">
  <!-- form will be added here -->
 </div>

(c) 初始化 PayerMax Frames；

// 初始化卡组件
const googlePay = PMdropin.create('googlepay', {
    clientKey: "客户端公钥", // 在 Step1 中获取到的 data.clientKey
    sessionKey: "会话令牌", // 在 Step1 中获取到的 data.sessionKey
    sandbox: true, // 默认是 false，即生产环境
    payButtonConfig: {   
        // 以下为默认参数设置，不传就等于下面的配置项目
        buttonRadius: "12",
        buttonColor: "default",
        buttonType: "plain",
        buttonLocale: "en",
        width: "240px",
        height: "40px"
    }
 });
 
 // 挂载实例
 googlePay.mount('.frame-googlepay'); // 将挂载至匹配到的第一个 dom 元素上
 
 // 组件加载完成时机
 googlePay.on('ready', () => {
    // 移除自定义loading               
 })

// 监听错误场景
googlePay.on('load', (res = {}) => {
      const { code, msg } = res || {};
      if(code === "SUCCESS"){
        console.log('[merchant][load]success:', res)
      }else{
        console.log('[merchant][load]fail:', res)
      }
    })

(d) 监听 GooglePay 按钮点击，获取 paymentToken；

注意：

获取到 paymentToken, 用于发起支付接口。

googlePay.on('payButtonClick', (res) => {
                googlePay.emit('setDisabled', true);
                googlePay.emit('canMakePayment')
                    .then(paymentRes => {
                        if (paymentRes.code === 'APPLY_SUCCESS') {
                            const paymentToken = paymentRes?.data?.paymentToken;
                            console.log('paymentToken:', paymentToken)
                            // ⚠️ 发起支付接口
                            // 商户自己请求后端接口进行下单, 
                            // 商户自己用params构造请求参数，需要带上paymentToken
                            const params = {  // 添加params定义
                                token: paymentToken,
                                
                            };
                            _postapi('orderAndPay', params)
                                .then(apiRes => {
                                    const code = (apiRes || {}).code;
                                    if (code === 'APPLY_SUCCESS') {     
                                        googlePay.emit('paySuccess');//支付成功，googlePay控件消失
                                    } else {
                                        googlePay.emit('payFail');//支付失败，googlePay控件消失
                                    }
                                    googlePay.emit('setDisabled', false);// ⚠️ 支付接口完成后解冻表单
                                })
                                .catch(err => {
                                    console.error('API请求失败:', err);
                                    googlePay.emit('setDisabled', false);// 发生异常后解冻表单
                                });
                        }
                    })
                    .catch(err => {
                        console.error('支付能力检测失败:', err);
                        googlePay.emit('setDisabled', false);
                    });
            });

(e) 发起支付，具体可查看下一步「商户后台下单」。

1.3 商户后台下单

• 下单时机

请在前端回调 googlePay.emit('canMakePayment') 后，当 response.code 为 'APPLY_SUCCESS' 时发起下单请求，此时可从 canMakePayment 方法获取到 paymentToken，用在后续下单接口入参。

• 下单步骤

(a) 商户前端向商户后端发起下单，传入 canMakePayment 方法获取到的 paymentToken；

(b) 商户服务端生成订单号（outTradeNo）后向 PayerMax 服务端发起支付请求；

(c) 处理 PayerMax 响应结果。

• 响应处理

服务端下单会返回支付结果，处理完支付结果需要响应到前端，前端根据响应结果调用googlePay.emit('paySuccess')或者googlePay.emit('payFail')。

• API 环境及地址

请求环境	请求地址
Test	https://pay-gate-uat.payermax.com/aggregate-pay/api/gateway/orderAndPay
Prod	https://pay-gate.payermax.com/aggregate-pay/api/gateway/orderAndPay

请求Header示例：

sign 字段的取值请参阅【配置与签名】。

{
    'Content-Type': 'application/json;charset=utf-8',
    'Accept': 'application/json',
    'sign': <XXX>
};

请求Body示例：

下单详细字段请参阅接口参数。

{
    "appId": "<替换>",
    "version": "1.4",
    "merchantNo": "<替换>",
    "requestTime": "2024-06-05T10:46:01.694+08:00",
    "keyVersion": "1",
    "data": {
        "totalAmount": 77.44,
        "country": "HK",
        "expireTime": "7200",
        "paymentDetail": {
            "paymentToken": "332e4cc1af1740aeafe9e7df82aeb5a1",
            "buyerInfo": {
                "clientIp": "59.82.59.92",
                "userAgent": "Safari"
            },
            "sessionKey": "86409e2c04b44536a484caa5ce3ce0e9"
        },
        "frontCallbackUrl": "<替换>",
        "subject": "<替换>",
        "outTradeNo": "1003052024060510454400707",
        "notifyUrl": "<替换>",
        "currency": "HKD",
        "userId": "3ff0495692d152be96d84dbc9352dc57",
        "integrate": "Direct_Payment", //固定
        "terminalType": "WEB"
    }
}

2. 其他定制

前端接口详情请参阅【GooglePay前端接口】文档。