商户可以通过加载 AsiaBill sdk 在网站上展示AsiaBill托管的支付页面，可通过参数调整支付页面的布局及样式，以保持与网站的整体风格一致，无需跳转即可完成整个支付流程。
<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)
})
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);
}
});
});
