一、Checkout页面集成
Checkout页面集成是Apple Pay 和 Google Pay最简单的集成方式，Asiabill托管支付页面会向用户提供Apple pay/Google pay的支付按钮选项。
如果商家已经对接过跳转支付模式，不需要进行二次开发，申请开通后即可使用；
1.checkout流程图
2.商户开通步骤
联系Asiabill客服进行开通
二、商户自主集成流程
自主集成流程可自定义程度高，需要对接商家具有一定的技术开发能力；对接该流程能使支付按钮更契合商户网站，且无需跳转离开商家网站；
1.自主集成流程图
2.对接步骤
1. 创建sessionToken server
2. 加载 js sdk，需要加载 AsiabillPayment.min.js 到商城页面中
https://{paymentApiUrl}/static/v3/js/AsiabillPayment.min.js
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);
})
}
});
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
ab.getConfirmStatus(code)
3.样式设置
Google Pay
初始化时Google Pay样式参数
book、buy、checkout、donate、order、pay、plain、subscribe
按钮类型展示如下：
按钮大小控制：
#gpay_container{
width:180px;
height: 30px;
}
Apple Pay
在Apple Pay标签中的三个参数
black、white-outline、white
plain、add-money、book、buy、check-out、continue、contribute、donate、order、pay、reload、rent、set-up、subscribe、support、tip、top-up
按照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 为提供给客服的交易域名
5.测试账号信息
商户号：12230
网关号：12230001
signkey：12345678
