商户可以通过加载 AsiaBill sdk 在网站上展示AsiaBill托管的支付页面，可通过参数调整支付页面的布局及样式，以保持与网站的整体风格一致，无需跳转即可完成整个支付流程。
建议商户通过服务端调用 /sessionToken 接口通过该接口可以获取到 sessionToken，该参数会用于后续支付流程的处理，商户需要从 server 端传递到 web 端供SDK中的API使用，请妥善保存，避免 signkey 等信息暴露在浏览器客户端。
<body>
// ...
</body>
<script src="<AsiaBill SDK>"></script>
<script src="<Your script>"></script>
商户在页面中放置 AsiaBill 支付表单的容器，AsiaBill 会在商户引入支付脚本并初始化后在此区域嵌入对应的支付表单。容器和支付按钮样式由商户自定义。
<div class="form-wrap">
<form id="payment-form">
<div id="ab-card-element" class="ab-element">
<!-- AsiaBill 元素将在这里被创建 -->
</div>
<!-- 错误信息 -->
<div id="card-errors" role="alert"></div>
<div class="card-save">
<input type="checkbox" id="card-save">
Save payment information
</div>
<button id="ab_submit" type="submit">Pay Now</button>
</form>
</div>
// 初始化sdk样式
let st = {
frameMaxHeight: 200, // iframe高度
input: {
FontSize: '16', // 输入框字体大小
FontFamily: 'Arial', // 输入框字体类型
FontWeight: '400', // 输入框字体粗细
BorderRadius: '10px', // 输入框圆角
Color: '#333', // 输入框字体颜色
ContainerBorder: '1px solid #d9d9d9', // 输入框边框
ContainerPadding: '20px 10px', // 输入框内边距
ContainerBg: '#fff', // 输入框背景色
ContainerSh: 'none' // 输入框阴影
},
// 需要展示背景区域时可，自定义的样式
background: {
FontSize: '14', // 背景区域字体大小
FontFamily: 'Arial', // 背景字体类型
FontWeight: '600', // 背景字体粗细
Color: #333, // 背景字体颜色
BgColor: '#fff', // 背景颜色
Width: '100%', // 背景宽度
Height: 'auto', // 背景高度
BgPadding: '20px', // 背景内边距
BorderRadius: '10px', // 背景圆角
TextIndent: '10px', // 背景文本缩进
LineHeight: '24px', // 背景文本行高
BoxShadow: 'none' // 背景阴影
}
}
let p = {
formId: 'payment-form', // 页面表单id
formWrapperId: 'ab-card-element', // 表单内层id
frameId: 'PrivateFrame', // 生成的IframeId
customerId: '<当前支付流程的客户Id>',
lang: 'en', // 表单校验信息国际化参数，目前支持ar(阿拉伯语),ja(日语),ko(韩语),en(英语),zh-CN(简体中文)；不传时如果当前浏器语言为日语、韩语、英语和简体中文中的一种，则会显示该种语言；否则默认展示英语
needCardList: true,
autoValidate: true, // 是否自动展示校验错误信息， 目前支持在表单提交事件或提交按钮点击事件中触发信息校验，false时监听`getErrorMessage`事件获取错误信息
supportedCards: ['visa', 'jcb', 'unionPay', 'ae', 'master', 'discover'], // 传入时，显示商户支持的卡种类型logo
layout: {
pageMode: 'block', // 页面风格模式 inner | block
style: st
}
}
let ab = AsiabillPay("<your sessionToken>");
ab.elementInit("payment_steps", p).then((res) => {
// 初始化成功后，商户可以在此区域执行其他操作。
// 例如，不需要sdk自带的支付方式列表效果时,获取列表内容后可自定义展示效果。
let paymentMethodList = res.data.paymentMethodList;
if (paymentMethodList.length > 0) {
// your code
}
console.log("initRES", res)
}).catch(function(err) {
console.log("initERR", err)
});
// 更新sdk样式(可选)，通过该方法可动态改变sdk样式。例如：通过监听视图宽度时调用
// ab.updateStyle(param)中的param为初始化sdk中定义的st变量
ab.updateStyle(st).then(upRes => {
// {'code': '0000', 'message': 'success'}
console.log("updateStyle------------ ", upRes)
})
调用 payment_steps 方法时，参数 layout.pageMode 代表生成的页面风格模式，该参数提供 inner 和 block 两种值。
· inner 表示 卡号&过期时间&CVV 在一行展示，详见以下付款区域示例图；
· block 表示 卡号 在第一行展示，过期时间&CVV 在第二行展示。详见多行模式demo
如果用户是注册会员，可以展示'Save payment information'选项，商家通过/customers接口创建customerId，并与商家系统中的会员账号关联。
如果是guest用户，不建议展示'Save payment information'选项。
如果需要将当前客户的customerId与卡号进行绑定，请在 confirmPaymentMethod API 中传入 customerId。否则，customerId 可不传。
let paymentMethodObj = {
"billingDetail": {
"address": {
"city": "sz",
"country": "CN",
"line1": "line",
"line2": "",
"postalCode": "518000",
"state": "state"
},
"email": "lcq@gmail.com",
"firstName": "CL",
"lastName": "BRW1",
"phone": "13249432555"
},
"customerId": "<当前支付流程的客户Id>"
}
let form = document.getElementById(formId);
form.addEventListener('submit', (e) => {
e.preventDefault();
ab.confirmPaymentMethod({
apikey: "your sessionToken",
trnxDetail: paymentMethodObj
}).then((result) => {
console.info("PaymentMethodObject_Result", JSON.stringify(result));
let r = result;
if (r.data.code === "success") {
// your code
} else {
console.log(r.data.message);
}
});
});
仅接收浏览器端的支付结果是存在风险的，商户网站可能因用户网络或者用户关闭网页导致不能获取到支付结果。建议商户接收 AsiaBill 的支付结果异步通知，可以通过在 创建订单 步骤中设置 callbackUrl 来指定接收地址。
