一、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.address 1 + shippingAddress.address 2 + shippingAddress.address 3 , //详细地址
"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.address 1 + billingAddress.address 2 + billingAddress.address 3 , //详细地址
"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样式参数
book、buy、checkout、donate、order、pay、plain、subscribe
按钮类型展示如下:
按钮大小控制:
复制 #gpay_container {
width : 180 px ;
height : 30 px ;
}
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 : 150 px ;
--apple-pay-button-height : 30 px ;
--apple-pay-button-border-radius : 3 px ;
--apple-pay-button-padding : 0 px 0 px ;
--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
Google Pay 需加入测试组群 后,才能进行测试支付
Apple Pay 测试设备账号需联系 Asiabill 开发人员获取,测试卡号请参照Apple Pay 文档