站内支付
本模式适用于:
* 有Web或mobile端商城系统,且对支付体验有极致追求的商户
概述:
站内支付产品致力于帮助商户在桌面和移动端构建美观、智能的结账流程,为商户的客户提供最佳支付体验。
商户可以通过加载 AsiaBill sdk 在网站上展示AsiaBill托管的支付页面,可通过参数调整支付页面的布局及样式,以保持与网站的整体风格一致,无需跳转即可完成整个支付流程。
站内支付产品主要适用于 先存后付、付后存卡、循环扣款 等场景。
对接流程:
1.创建sessionToken server
server
建议商户通过服务端调用 /sessionToken
接口通过该接口可以获取到 sessionToken
,该参数会用于后续支付流程的处理,商户需要从 server 端传递到 web 端供SDK中的API使用,请妥善保存,避免 signkey 等信息暴露在浏览器客户端。
2.展示付款区域 web
web
在浏览器端可获取 AsiaBill UI 组件收集用户卡信息,UI 组件都被包含在 Iframe
中,SDK收集卡号信息后可通过 HTTPS
协议安全地传输用户数据。
加载 js sdk
首先,需要加载 AsiabillPayment.min.js
到商城的 Checkout
页面。
商户在页面中放置 AsiaBill 支付表单的容器,AsiaBill 会在商户引入支付脚本并初始化后在此区域嵌入对应的支付表单。容器和支付按钮样式由商户自定义。
代码示例:
商户向 elementInit API 传入参数进行脚本初始化操作。初始化操作用于校验商户信息,以及加载付款页面。sessionToken
为商户使用脚本的唯一标识。
调用 payment_steps 方法时,参数 layout.pageMode 代表生成的页面风格模式,该参数提供 inner 和 block 两种值。
· inner 表示 卡号&过期时间&CVV 在一行展示,详见以下付款区域示例图;
· block 表示 卡号 在第一行展示,过期时间&CVV 在第二行展示。详见多行模式demo
初始化成功后,商户将看到以下付款区域:
如果商户在初始化时传入needCardList: true
和needCardLogo: true
,用户将看到带支付方式列表的托管区域:
如果用户是注册会员,可以展示'Save payment information'选项,商家通过/customers
接口创建customerId
,并与商家系统中的会员账号关联。
如果是guest用户,不建议展示'Save payment information'选项。
3.创建支付方式 web
web
商户通过监听表单提交或者按钮点击事件,调用 confirmPaymentMethod API 来完成对卡号的保存,如果执行成功,SDK将会给商户返回 customerPaymentMethodId
,作为该支付方式的标识。
如果需要将当前客户的customerId
与卡号进行绑定,请在 confirmPaymentMethod API 中传入 customerId
。否则,customerId
可不传。
代码示例:
4.发起扣款 server
server
5. 验证签名
6.处理支付结果
返回结果中redirectUrl为空,则不需要进行3DS验证,将解析后的交易结果返回给前端,前端跳转用户到交易结果展示页面
返回结果中redirectUrl不为空,则需要进行3DS验证,将解析后的redirectUrl返回给前端,前端跳转用户到3DS页面进行验证
7.webhook 通知处理
仅接收浏览器端的支付结果是存在风险的,商户网站可能因用户网络或者用户关闭网页导致不能获取到支付结果。建议商户接收 AsiaBill 的支付结果异步通知,可以通过在 创建订单 步骤中设置 callbackUrl 来指定接收地址。
最后更新于