JavaScript

一、简述

1.1 页面展示

内嵌收银台，无需页面跳转。下图中的 卡号，MM/YY 和CVV/CVC 采集框为内嵌收银台提供

1.2 需要掌握知识

• 需要会 html 前端知识

• 需要会 服务端 知识

• 无需PCI

二、对接流程

2.1 时序图

内嵌收银台

2.2 简述

1. 商户后端调用 Create Token后获取Token

pageCreate Token

2. 商户前端调用Jssdk中的confirm 方法进行支付

三、前端

3.1. 引入 UseePay CDN

访问 UseePay CDN 将 js 文件内容拷贝到您的项目对应目录即可

<script src="https://cashier.useepay.com/jssdk/1.0.5/useepay.min.js"></script>

3.2. 初始化

var useepay = UseePay({
    env: 'sandbox', 
    layout: 'multiLine',
    locale: window.navigator.language,
    merchantNo: 'YOU_MERCHANT_NO_IN_USEEPAY'
})

3.2.1 可配置参数

参数	说明	可选值
env	环境	sandbox, production
layout	卡输入框布局样式, 单行或多行	singleLine, multiLine
locale	语言	可从 navigator.language 中获取, 或者传递 ISO639 language code
merchantNo	UseePay分配的商户号

3.3. 挂载到元素上

您需要在显示 UseePay 卡信息的页面中有一个可以让 UseePay 卡输入页挂载上去的元素, 比如 div

<div id="cardElement"></div>

挂载到元素上:

useepay.mount(document.getElementById('cardElement'))

3.4. 支付

3.4.1 获取支付 Token （后端）

在确认支付前您需要先从您的 Server API 获取 Token，请参考

pageCreate Token

3.4.2 确认支付

useepay.confirm(TOKEN, function (resp) {...})

4.2.1 参数说明

参数名	描述
success	这次请求是完成，不表示支付是否成功, 比如卡号非法等错误，success 为 false
data	json 字符串
message	提示信息

data参数详细说明

参数	描述	示例	必要
version	max=5 交易异步通知报文版本，固定为：1.0	1.0
merchantNo	max=16 商户编号，由USEEPAY 分配
transactionId	max=64 商户订单号
originalTransactionId	max=64 原始商户订单号
reference	max=32 USEEPAY 订单号
transactionType	max=64 交易类型： pay；authorization; refund; capture;authorizationVoid;
amount	max=12 交易金额，单位为对应币种的最小货币单位(详见 ISO 4217)
currency	max=3 3 位 ISO 大写字母货币代码((详见 ISO 4217)
resultCode	max=32 业务结果（详见 业务结果码）
errorCode	max=4 错误码（详见 错误码 errorCode）
errorMsg	max=256 错误码消息描述
echoParam	max=256 回声参数，响应报文会原样返回
reserved	max=256 预留字段，值同请求报文
signType	MD5/RSA
sign	max=256 商户请求参数的签名串
issuerResponse	发卡行返回的新 Json String的格式	{"issuerResponseMsg":"Not sufficient funds","issuerResponseCode":"51"}

3.4.3 确认支付结果

将上一步获取到的json字符串发送给您的服务器进行验证合法性与支付结果

四 JSSDK APIS

这里描述了JSSDK API 的详细用法

4.1 validate

示例

useepay.validate(function(valid, code, message){...})

建议

在调用confirm方法之前，调用该方法验证参数的合法性

用例

用户点击支付按钮后，先校验用户卡输入信息是否正确

// 我只是个demo,请勿直接使用
$('#payBtn')
    .on('click', function() {
        $('#payBtn').attr('disable', true)
        useepay.validate(function(valid, code, message) {
            if (valid) {
                // 正确
                pay()
            } else {
                $('#errorTip').text(message)
            }
        })
    })

返回值说明

参数	说明	可选值
valid	验证输入的卡号、有效期与CVV的合法性，均合法则 valid 为 true, 否则为 false	true, false
code	错误码	0000: 成功, 0001: 卡号非法 0002: 有效期非法, 0003: CVV非法
message	错误描述	合法为空值，否则如: 请输入正确的卡号

4.2 on

示例

useepay.on(EVENT,function(valid, code, message){...})

建议

使用该方法实时监听消费者卡号等信息输入是否合法

用例

可以在前端页面添加该监听事件，可以实时监听消费者输入卡信息采集框数据的合法性。如果valid=true则允许消费者点击支付按钮，false,则禁用点击支付点击按钮。如下

  // 我只是个demo，不要直接使用
  useepay.on('change', function(valid, code, message) {
        if (valid) {
            $('#payBtn').attr('disabled', false)
            $('#errorTip').text('All input fields valid')
        } else {
            $('#payBtn').attr('disabled', true)
            $('#errorTip').text(message)
        }
    })

参数

参数	说明	可选值
EVENT	需要监听的事件名	目前只支持 change

返回值说明

1. EVENT 为 change, 监听输入

参数	说明	可选值
valid	验证输入的卡号、有效期与CVV的合法性，均合法则 valid 为 true, 否则为 false	true, false
code	错误码	0000: 成功, 0001: 卡号非法 0002: 有效期非法, 0003: CVV非法
message	错误描述	合法为空值，否则如: 请输入正确的卡号

五 、Demo 代码案例

欢迎访问我们的 Javascript SDK Demo

六、Changelog

1.0.5

• 优化3DS 指纹采集成功率

1.0.1

• 新增 validate 方法验证输入是否合法

• 新增 on('change', handler) 监听

• 修复 Firefox 86.0 兼容性问题

1.0.0

• 支持 sandbox 与 production 环境

• 支持交易与3DS交易

• 支持 singleLine 与 multiLine 两种布局

• 支持 locale