Apple Pay & Google Pay
Checkout页面集成是Apple Pay 和 Google Pay最简单的集成方式，Asiabill托管支付页面会向用户提供Apple pay/Google pay的支付按钮选项。
如果商家已经对接过跳转支付模式，不需要进行二次开发，申请开通后即可使用；
联系Asiabill客服进行开通
自主集成流程可自定义程度高，需要对接商家具有一定的技术开发能力；对接该流程能使支付按钮更契合商户网站，且无需跳转离开商家网站；
建议商户通过服务端调用 /sessionToken 接口通过该接口可以获取到 sessionToken，该参数会用于后续支付流程的处理，商户需要从 server 端传递到 web 端供SDK中的API使用，请妥善保存，避免 signkey 等信 息暴露在浏览器客户端。
https://{paymentApiUrl}/static/v3/js/AsiabillPayment.min.js
let ab = AsiabillPay(sessionToken);//sessionToken为第一步后端获取的sessionToken
let fastPayment ={
"billingDetailRequire": false, //账单信息是否从按钮中获取，默认false，false自定义billingDetail内容，true系统自动获取 非必填
"shippingDetailRequire": false, //收件人信息是否从按钮中获取，默认false，true则返回shippingDetail，false则不返回 非必填
"shippingEmail": "[email protected]", //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" //运费
}
]
}
<apple-pay-button buttonstyle="black" id="apple-pay-button" type="plain" locale="en-US"></apple-pay-button>
<div id="gpay_container"></div>
ab.elementInit("fastPayment", fastPayment);
ab.updateFastPayment({
currencyCode:"USD",
totalPrice: “100”,
countryCode:"HK"
}).then((res)=>{})
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 监听事件，再根据获取到的信息来变更运输方式
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,//付款总金额
}
}
customerPaymentMethodId 和 shipping 收件人信息使用前面步骤SDK获取到的值
ab.getConfirmStatus(code)
初始化时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标签中的三个参数
参数名称 | 描述 | 可传入值 |
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>
- 1.联系客服，提供商户网站交易域名，获取到服务器域名验证文件
- 2.把域名验证文件放在服务器 https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association 目录下，DOMAIN_NAME 为提供给客服的交易域名
- 3.通知Asiabill发送校验域名请求
- 4.告知商家域名验证结果
- 5.商家进行技术接口集成
商户号：12230
网关号：12230001
signkey：12345678
最近更新 4mo ago