在线咨询
电话 联系电话
400-9999-359
QQ QQ客服
微信 官方微信

站内支付

致力于帮助商家在桌面和移动端构建美观、智能的结账流程,为您的客户提供最佳支付体验。

概述:

使用站内支付产品,商家网站通过加载 Asiabill sdk 在网站上展示支付页面,通过参数可以调整支付页面的展示区域以及样式,保持与商家网站风格一致,并且完成支付流程无需跳转出网站,达到在网站内完成支付的效果。您可以在获取测试卡号后访问演示地址查看效果。

shopify独立站收款跨境收款服务商

对接流程:

产品交互流程:

shopify独立站收款跨境收款服务商


对接流程:

1. 创建 Asiabill 账号

如果您还没有创建 Asiabill 账号,请联系销售经理或 在线申请

创建后,请妥善保管 GatewayNo、Signkey 信息。

2. 创建订单

建议商家通过服务端调用 /InitPayment 接口,在安全环境内完成参数加密,币种、金额等重要信息的传递。避免 Signkey 等信息暴露在浏览器客户端,或者币种、金额在客户端被修改。

通过该接口可以获取到 sessionToken,该参数会用于后续支付流程的处理,请妥善保存。

该参数在浏览器端调用接口时需要使用,商家需要从 server 端传递到浏览器表单中。

测试: https://sandbox-pay.asiabill.com/services/v3/initPayment

正式: https://safepay.asiabill.com/services/v3/initPayment

3. 展示付款区域

在浏览器端可获取 Asiabill UI 组件收集用户卡信息,UI 组件都被包含在 Iframe 中,用户填写数据后通过 HTTPS 协议传输用户数据。

加载 js sdk

首先,需要加载 Asiabill js sdk 到商城 checkout 页面。SDK URL如下:

测试: https://sandbox-pay.asiabill.com/static/v3/js/AsiabillPayment.min.js

正式: https://safepay.asiabill.com/static/v3/js/AsiabillPayment.min.js

shopify独立站收款跨境收款服务商


添加表单容器

商户在页面中放置 Asiabill 支付表单的容器,Asiabill 会在商户引入支付脚本并初始化后在此区域嵌入对应的支付表单。容器和支付按钮样式由商户自定义。

代码示例:

<form id="payment-form">
	<div class="ab-element" id="card-element">
	<!-- Asiabill 元素将在这里被创建 --></div>
	<!-- 错误信息 -->
	<div id="card-errors" role="alert"> </div>
	<button id="ab_submit" type="submit">Pay Now</button>
</form>

商户传入参数进行脚本初始化操作。初始化操作用于校验商户信息,以及加载付款页面。sessionToken 为商户使用脚本的唯一标识。

var ab = AsiabillPay("your_sessionToken");
ab.elementInit("card", {
    formId: '',  // Merchant payment page form id
    frameId: '',  // Iframe Id
    mode: '',  // script mode  test | pro
    createParams: {
       merNo: '',
       gatewayNo: '',
       orderNo: ''
    },
    layout: {
      pageMode:  '', // page style mode inner | block
      style: {
        frameMaxHeight: '44', // set frame height
        input: {
          Color: "#32325d",// set font color
          ContainerBg: "#ffffff",// set frame background
          ContainerBorder: "0",// set border style
          ContainerSh: "none",// set frame shadow
          FontFamily: "Arial", // set font family
          FontSize: "16", // set page font size
          FontWeight: "400"  // set font weight
        }
    }
  }
}).then(function(res) {
  console.log("initRES", res)
}).catch(function(err) {
  console.log("initERR", err)
});

付款页面可由商家通过设定参数指定样式,默认展示单行收款栏位,也可以展示为多行样式。包含卡号,有效期,CVV 等信息。

Layout Parameters

pageMode

String

【页面布局模式】
单行模式: inner | 多行模式: block

style

Object

包含frame容器高度与卡信息收集页面的样式定制化

style.frameMaxHeight

String

【frame容器高度】
例:'44'

style.input

Object

包含卡信息收集页面的样式定制化

style.input.Color

String

【卡信息收集页面的字体颜色】
例:'#32325d'

style.input.ContainerBg

String

【卡信息收集页面的容器背景色】
例:'#fff'

style.input.ContainerBorder

String

【卡信息收集页面的控件边框】
例: '0'或'1px solid #e5e5e5'

style.input.ContainerSh

String

【卡信息收集页面的阴影】
例:'none'

style.input.FontFamily

String

【卡信息收集页面的字体类型】
例:'Arial'

style.input.FontSize

String

【卡信息收集页面的字体大小】
例:'16', 单位px

style.input.FontWeight

String

【卡信息收集页面的字体粗细】
例:'400'

4. 提交支付请求到 Asiabill

在这个步骤中将会使用到step2 获取到的 sessionToken,该参数会用于下一步付款请求,所以需要妥善安全传输及保管。

商家需要监听表单的提交事件,这样当用户完成输入资料并点击支付按钮时,sdk 会自动将卡信息连同 sessionToken 等信息提交 /confirmPayment 请求到 Asiabill。

所有请求数据通过 https 协议传输,建议商家网站也使用 https 协议。

	var form = document.getElementById(formId);
        form.addEventListener('submit', (e) => {
          e.preventDefault();
          ab.confirmPayment({
             apikey: "your_sessionToken",
             billingDetail: {
               city: '',
               address: '',
               callbackUrl: '',
               country: '',
               email:'',
               firstName: '',
               lastName: '',
               orderAmount: '',
               orderCurrency: '',
               phone: '',
               remark: '',
               shipAddress: '',
               shipCity: '',
               shipCountry: '',
               shipFirstName: '',
               shipLastName: '',
               shipPhone: '',
               shipState: '',
               shipZip: '',
               signInfo: '',
               state: '',
               zip: '',
               goodsDetail: '',
               resoultion: window.screen.width + "x" + window.screen.height,
			   colorDepth: screen.colorDepth,
			   timezone: new Date().getTimezoneOffset() / 60 * - 1
             }
          }).then((result) => {
          // Get transaction results here
          // orderStatus   “1”: Success  “0”:Failed “-1”:Pending  
               console.info("result-----", JSON.stringify(result));
               console.info(result.data.orderStatus)        
          });
        });
	// 另一种方式
	var BtnEle = document.getElementById('btn');
	BtnEle.onclick = function(e){
			e.preventDefault();
			ab.confirmPayment({
			// 代码同上
			}).then((result){
			// 代码同上
			});
	  };

5. 处理支付结果

在用户完成支付操作后,可以通过上述代码获取到支付结果,商家根据支付结果向用户展示支付成功页面。

仅接收浏览器端的结果是存在风险的,可能因用户网络或者用户关闭网页导致网站不能获取到支付结果。建议商家接收 Asiabill 的支付结果异步通知,可以通过在 step2 中设置 callbackUrl 来指定接收地址。

6. 3D 验证

在 step4 完成之后,银行可能会要求用户做 3D 验证。

在返回的 result 中,threeDType 用于标识该笔交易是否需要做 3D 验证。

threeDsType

String

【3D类型】0:无需3D校验 ; 1: 3D1.0 ; 2: 3D2.0

threeDsUrl

String

【3D验证URL】

如果需要做 3D 验证,js sdk 会在网站调起对话框用于展示 3D 验证页面。用户完成 3D 验证后,处理支付结果步骤同 step 5.

错误信息处理

1.InitPayment

在前端调用 InitPayment 接口且接口请求成功并且返回值中带有 sessionToken 字段时,商家可以对 SDK 进行初始化及后续操作。否则,商家可以将错误信息告知用户以便进行下一步操作。 示例如下:

if(res.sessionToken) {
  /* 使用 sessionToken 初始化 SDK */
  // your code
} else {
  /* 判断错误码和展示错误信息,返回值包含如下字段
      code: "I0058",
      gatewayNo: "12184001",
      merNo: "12184",
      message: "Please input between 2-100 characters only",
      orderAmount: "83.95",
      orderCurrency: "USD",
      orderNo: "54422001",
      riskInfos: null,
      signInfo: "506b1691b3a66ffecbbe4bb11aa1e55f0d4f3d215148c6b1d6",
      tradeNo: "2021052418182032660638" */
  // your code
}

返回代码示例


shopify独立站收款跨境收款服务商

错误信息展示示例


2.ConfirmPayment

通过前端 SDK 获取最终支付结果后,商家可以判断订单状态,通过跳转和展示错误信息的方式方便用户进行下一步操作。 示例如下:

ab.confirmPayment({
	apikey: "your_sessionToken",
	billingDetail: {...}
}).then(function(result) {
	console.info("result-----", JSON.stringify(result));
    // 跳转至商城结果页面
    window.location.href = "./result.html?orderStatus=" +     (result.data.orderStatus ? result.data.orderStatus : "ERROR") + "&msg=" + result.data.message;
});

返回代码示例


shopify独立站收款跨境收款服务商

result.html

错误信息展示示例


API:

InitPayment

此接口用于商家在服务端发起订单预支付请求,并获取 sessionToken。

Request parameter

参数名

类型

最大长度

是否必填

描述

merNo

String

5

Yes

【商户号】

gatewayNo

String

8

Yes

【网关接入号】

orderNo

String

50

Yes

【商户订单号】

在该订单号是成功/待处理/待确认的状态下,不允许再次抛送此订单号。

orderCurrency

String

3

Yes

【交易币种】

orderAmount

String

10

Yes

【交易金额】

只限小数点后2位小数。

returnUrl

String

500

No

【交易返回地址】

Asiabill处理完请求后,当前页面自动跳转到商户网站里指定页面的https路径,用于推送和抛送返回。

callbackUrl

String

500

No

【后台通知地址】

当传了此值则异步通知使用该URL通知。

tradeType

String

10

Yes

Mobile/web/H5

expireTime

String

100

No

【会话令牌有效期,单位:分钟】

默认30分钟,最大120分钟。

platform

String

100

No

【平台标识名称】

productDesc

String

100

No

【商品描述】

signInfo

String

64

Yes

【签名数据】

签名计算规则如下:

参数名区分大小写

参数名 按ASCII 码从小到大排序(字典序)

参数名不参与加密

参数 signInfo 不参与签名

加密值全为小写

将每个参数值中的前后空格删除

如果参数的值为空,则不参与签名

参与签名的 signkey 参数和值不要放在原始报文信息里

参与加密的signkey拼接在明文结构的最后面

进行sha256加密

remark

String

1000

No

【备注】

扩展信息

firstName

String

2-100

Yes

【客人的名】

lastName

String

2-50

Yes

【客人的姓】

email

String

2-200

Yes

【客人的邮件】

phone

String

2-50

No

【客人的联系电话】

country

String

100

Yes

【客人的账单国家】

请使用ISO代码

如美国:US

state

String

2-100

Yes

【客人的所在州】

city

String

2-100

Yes

【客人的账单城市】

address

String

500

Yes

【客人的账单地址】

zip

String

100

Yes

【客人的邮编】

shipFirstName

String

100

No

【收件人的名】

shipLastName

String

50

No

【收件人的姓】

shipPhone

String

50

No

【收件人的联系电话】

shipCountry

String

100

No

【收件人的国家】

shipState

String

100

No

【收件人的州】

shipCity

String

100

No

【收件人的城市】

shipAddress

String

500

No

【收件人的地址】

shipZip

String

100

No

【收件人的邮编】

goodsDetail

goodsTitle

String

500

No

【商品名称】

最多只能输入10个商户信息

goodsPrice

String

500

No

【商品价格】

goodsCount

String

500

No

【商品数量】

Response parameter

参数名

类型

描述

merNo

String

【商户号】

gatewayNo

String

【网关接入号】

orderNo

String

【商户订单号】

tradeNo

String

【预下单请求交易流水订单号,由Asiabill返回】

若请求失败,不返回值

code

String

【请求返回码】

message

String

【请求返回信息】

0000 -- 请求成功

I0001 -- Merchant No. can not be empty

...

I0010 -- Gateway No.is disabled

sessionToken

String

【会话令牌】

请求失败,不返回值

此ID在有效期内可用,将用于后续的支付处理流程

orderCurrency

String

【交易币种】

请求失败,不返回值

orderAmount

String

【交易金额】

请求失败,不返回值

orderStatus

String

【交易状态】

请求失败,不返回值

-1: 待处理 1:成功 0:失败

orderInfo

String

【交易结果信息】

请求失败,不返回值

交易状态描述信息

signInfo

String

【签名数据】

remark

String

【备注】

返回商家提交的备注信息


支付结果通知

详见 支付结果通知


Error Code

详见 Error Code


附录:

接口会进行如下特殊字符转换后保存(签名拼接的时候不需要转换):

原始字符

转换字符

&

&

<

<

>

>

"

"

eval(

空格(

sysopen(

空格(

open(

空格(

alert(

空格(

system(

空格(

javascript

空格(

vbscript

空格

script

空格

src=

空格

expression

空格

onload

空格

示例卡

卡号

有效期

CVV

是否需要3D校验

4938730000000001(V)

12 / 30

123

5333300989521936(M)

12 / 30

123