Apple Pay & Google Pay

上一页Mobile sdk 下一页3Ds 验证

最后更新于2年前

Apple Pay & Google Pay

一、Checkout页面集成

Checkout页面集成是Apple Pay 和 Google Pay最简单的集成方式，Asiabill托管支付页面会向用户提供Apple pay/Google pay的支付按钮选项。

如果商家已经对接过跳转支付模式，不需要进行二次开发，申请开通后即可使用；

1.checkout流程图

2.商户开通步骤

联系Asiabill客服进行开通

二、商户自主集成流程

自主集成流程可自定义程度高，需要对接商家具有一定的技术开发能力；对接该流程能使支付按钮更契合商户网站，且无需跳转离开商家网站；

1.自主集成流程图

2.对接步骤

1. 创建sessionToken `server`

商户服务端调用 /sessionToken接口创建本次交易的会话即 sessionToken。

建议商户通过服务端调用 /sessionToken 接口通过该接口可以获取到 sessionToken，该参数会用于后续支付流程的处理，商户需要从 server 端传递到 web 端供SDK中的API使用，请妥善保存，避免 signkey 等信息暴露在浏览器客户端。

2. 加载 js sdk，需要加载 AsiabillPayment.min.js 到商城页面中

https://{paymentApiUrl}/static/v3/js/AsiabillPayment.min.js

{paymentApiUrl} 为对应环境的url，请从链接地址获取url

3. 初始化sdk文件

let ab = AsiabillPay(sessionToken);//sessionToken为第一步后端获取的sessionToken

4. 增加以下的参数 fastPayment 对象

let fastPayment ={
    "billingDetailRequire": false, //账单信息是否从按钮中获取，默认false，false自定义billingDetail内容，true系统自动获取		非必填
    "shippingDetailRequire": false, //收件人信息是否从按钮中获取，默认false，true则返回shippingDetail，false则不返回	          非必填
    "shippingEmail": "123@163.com", //shippingDetailRequire为false，必填
    "shippingPhone": "18888888888", //shippingDetailRequire为false，必填
    "shippingOptionsRequire": true, //是否需要更改运送方式 非必填
    "allowedCountryCodes": [
        "US",
        "HK",
        "AU",
        "CN"
    ], //Google pay 支持的收件地址国家，非必填，为空则默认支持所有国家
    "googleId": "gpay_container", //Google pay区域 id,			必填
    "gatewayNo": document.getElementById("gatewayNo_").value, //网关号,			必填
    "googleStyle": { //Google pay按钮样式，具体设置详见第三小节，样式设置，非必填
        "buttonType": "checkout", //按钮类型
        "buttonColor": "black", //按钮颜色，支持black和white
        "buttonLocale": "fr" //按钮显示语言
    },
    "billingDetail": { //当billingDetailRequire为false或者为空时，必填，字段名不可修改
        "address": { //地址
            "city": "", //所在的城市
            "country": "", //联系人的两个字母 ISO 3166 国家/地区代码
            "line1": "", //详细地址
            "postalCode": "", //邮政编码
            "state": "", //州
        },
        "firstName": "", //名字
        "lastName": "", //姓氏
        "phone": "", //电话号码
        "email": "", //邮箱
    },
    "merchantName": "", //收款人名称，必填
    "appleId": "apple-pay-button", //apple pay 区域 id,			必填
    "shippingOptions": [ //若shippingOptionsRequire为true，则此项必填，且字段名不可更改
        {
            "id": "shipping-001", //运送方式id
            "label": "$1.00: Free shipping", //运送标签
            "description": "Free Shipping delivered in 5 business days.", //运送方式描述
            "amount": "100" //运费
        }
    ]
}

5. 在界面需要展示Google pay 或 Apple Pay按钮的区域新增元素（需给定一个id）

<apple-pay-button buttonstyle="black" id="apple-pay-button" type="plain" locale="en-US"></apple-pay-button>
<div id="gpay_container"></div>

6. 执行以下方法进行按钮初始化，成功后会根据用户环境展示相应的Google pay或Apple pay按钮

ab.elementInit("fastPayment", fastPayment);

7. 执行updateFastPayment（）方法，传入金额，币种及国家，然后点击按钮操作，之后可通过自定义事件getResultData获取Google pay和Apple pay返回的数据以及错误信息

ab.updateFastPayment({
				currencyCode:"USD",
				totalPrice: “100”,
				countryCode:"HK"
		}).then((res)=>{})

8.监听自定义事件getShippingCountry，获取用户修改后的收件人国家，商户可自定义根据收件人国家更新物流运输方式

window.addEventListener("getShippingCountry", e => {
  console.log(`getShippingCountry`, e);
  let res = e.detail;
  if(res.shippingCountryCode!=""){
    let shippingOptionsList=[
      {
        "id": "shipping-004",//运送方式id
        "label": "aaaaa",//运送标签
        "description": "Free Shipping delivered in 5 business days.",//运送方式描述
        "amount":"500"//运费
      },{
        "id": "shipping-005",//运送方式id
        "label": "bbbbb",//运送标签
        "description": "Free Shipping delivered in 5 business days.",//运送方式描述
        "amount":"600"//运费
      },{
        "id": "shipping-006",//运送方式id
        "label": "ccccc",//运送标签
        "description": "Free Shipping delivered in 5 business days.",//运送方式描述
        "amount":"700"//运费
      },
    ]
    //重新定义运送方式后，执行updateShippingOptions方法进行更新运送方式列表
    ab.updateShippingOptions(shippingOptionsList).then((res)=>{
      console.log("updateShippingOptions",res);
    })
  }
});

当商家需要根据收件人国家来变更运输方式时，建议初始化对象里面 shippingOptions 默认一个免费运输方式；当初始化完成时会触发 getShippingCountry 监听事件，再根据获取到的信息来变更运输方式

9. 点击按钮操作完成后，可通过getResultData()方法获取Google pay和Apple pay返回的数据，包括shippingDetail、billingDetail、paymentMethodId、shippingOptionsId、orderAmount

window.addEventListener("getResultData",e => {
				let res3=e.detail
				console.log("resultGoogle",res3);
			})

返回报文结构如下

res={
  "code": "0000", 
  "msg": "Successful", 
  "data": {
    "shippingDetail":{//收件人信息
      "address":{//地址
        "city":shippingAddress.locality,//所在的城市
        "country": shippingAddress.countryCode,//联系人的两个字母 ISO 3166 国家/地区代码
        "line1": shippingAddress.address1 + shippingAddress.address2 + shippingAddress.address3,//详细地址
        "postalCode": shippingAddress.postalCode,//邮政编码
        "state": shippingAddress.administrativeArea,//收件人的州
      },
      "firstName":  shippingAddress.name.substring(0,shippingIndex),//名字
      "lastName":  shippingAddress.name.substring(shippingIndex+1),//姓氏
      "phone": shippingAddress.phoneNumber,//电话号码
      "email":paymentData.email,//邮箱
    },
    "paymentMethodId":scriptParam.paymentMethodId,//支付方式id
    "shippingOptionsId":paymentData.shippingOptionData.id,//运送方式id
    "billingDetail":{//账单信息
      "address":{//地址
        "city":billingAddress.locality,//所在的城市
        "country": billingAddress.countryCode,//联系人的两个字母 ISO 3166 国家/地区代码
        "line1": billingAddress.address1 + billingAddress.address2 + billingAddress.address3,//详细地址
        "postalCode": billingAddress.postalCode,//邮政编码
        "state": billingAddress.administrativeArea,//联系人的州
      },
      "firstName":  billingAddress.name.substring(0,billingIndex),//名字
      "lastName":  billingAddress.name.substring(billingIndex+1),//姓氏
      "phone": billingAddress.phoneNumber,//电话号码
      "email":paymentData.email,//邮箱
    },
    "orderAmount":totalPrice,//付款总金额
  }
}

10. 发起扣款 `server`

商户可通过服务端调用/confirmCharge发起扣款业务。

customerPaymentMethodId 和 shipping 收件人信息使用前面步骤SDK获取到的值

11. 进行扣款操作后，执行以下方法，参数为/confirmCharge接口返回的 orderStatus 参数（建议，如果接口调用失败的情况，建议传入 pending 状态）

ab.getConfirmStatus(code)

3.样式设置

Google Pay

初始化时Google Pay样式参数

参数名称

描述

可传入值

buttonType

按钮类型

book、buy、checkout、donate、order、pay、plain、subscribe

buttonColor

按钮颜色

black、white

buttonLocale

按钮语言

语言简称小写，例如：中文 zh，英文 en

按钮类型展示如下：

按钮大小控制：

#gpay_container{
       width:180px;
       height: 30px;
}

Apple Pay

在Apple Pay标签中的三个参数

参数名称

描述

可传入值

buttonstyle

按钮颜色

black、white-outline、white

type

按钮类型

plain、add-money、book、buy、check-out、continue、contribute、donate、order、pay、reload、rent、set-up、subscribe、support、tip、top-up

locale

按钮语言

按照ISO语言格式标准，例如：en-US，zh-CN

按钮类型展示如下：

按钮样式可由CSS控制：

<style>
apple-pay-button {
  --apple-pay-button-width: 150px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 3px;
  --apple-pay-button-padding: 0px 0px;
  --apple-pay-button-box-sizing: border-box;
}
</style>

4.商户开通步骤

联系客服，提供商户网站交易域名，获取到服务器域名验证文件
把域名验证文件放在服务器 https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association 目录下，DOMAIN_NAME 为提供给客服的交易域名
通知Asiabill发送校验域名请求
告知商家域名验证结果
商家进行技术接口集成

5.测试账号信息

商户号：12230

网关号：12230001

signkey：12345678

Google Pay 需加入测试组群后，才能进行测试支付

Apple Pay 测试设备账号需联系 Asiabill 开发人员获取，测试卡号请参照Apple Pay文档

上一页Mobile sdk 下一页3Ds 验证

最后更新于2年前

一、Checkout页面集成

1.checkout流程图

2.商户开通步骤

二、商户自主集成流程

1.自主集成流程图

2.对接步骤

1. 创建sessionToken server

2. 加载 js sdk，需要加载 AsiabillPayment.min.js 到商城页面中

3. 初始化sdk文件

4. 增加以下的参数 fastPayment 对象

5. 在界面需要展示Google pay 或 Apple Pay按钮的区域新增元素（需给定一个id）

6. 执行以下方法进行按钮初始化，成功后会根据用户环境展示相应的Google pay或Apple pay按钮

7. 执行updateFastPayment（）方法，传入金额，币种及国家，然后点击按钮操作，之后可通过自定义事件getResultData获取Google pay和Apple pay返回的数据以及错误信息

8.监听自定义事件getShippingCountry，获取用户修改后的收件人国家，商户可自定义根据收件人国家更新物流运输方式

9. 点击按钮操作完成后，可通过getResultData()方法获取Google pay和Apple pay返回的数据，包括shippingDetail、billingDetail、paymentMethodId、shippingOptionsId、orderAmount

10. 发起扣款 server

11. 进行扣款操作后，执行以下方法，参数为/confirmCharge接口返回的 orderStatus 参数（建议，如果接口调用失败的情况，建议传入 pending 状态）

3.样式设置

Google Pay

Apple Pay

4.商户开通步骤

5.测试账号信息

一、Checkout页面集成

1.checkout流程图

2.商户开通步骤

二、商户自主集成流程

1.自主集成流程图

2.对接步骤

1. 创建sessionToken server

2. 加载 js sdk，需要加载 AsiabillPayment.min.js 到商城页面中

3. 初始化sdk文件

4. 增加以下的参数 fastPayment 对象

5. 在界面需要展示Google pay 或 Apple Pay按钮的区域新增元素（需给定一个id）

6. 执行以下方法进行按钮初始化，成功后会根据用户环境展示相应的Google pay或Apple pay按钮

7. 执行updateFastPayment（）方法，传入金额，币种及国家，然后点击按钮操作，之后可通过自定义事件getResultData获取Google pay和Apple pay返回的数据以及错误信息

8.监听自定义事件getShippingCountry，获取用户修改后的收件人国家，商户可自定义根据收件人国家更新物流运输方式

9. 点击按钮操作完成后，可通过getResultData()方法获取Google pay和Apple pay返回的数据，包括shippingDetail、billingDetail、paymentMethodId、shippingOptionsId、orderAmount

10. 发起扣款 server

11. 进行扣款操作后，执行以下方法，参数为/confirmCharge接口返回的 orderStatus 参数（建议，如果接口调用失败的情况，建议传入 pending 状态）

3.样式设置

Google Pay

Apple Pay

4.商户开通步骤

5.测试账号信息

1. 创建sessionToken `server`

10. 发起扣款 `server`

1. 创建sessionToken `server`

10. 发起扣款 `server`