USEEPAY
  1. 0.0.1-只支持信用卡
USEEPAY
  • 全球收单
    • 域名说明
    • 集成流程说明
    • 生产账户启用
    • UseePay出口IP说明
    • 签名指导
      • 签名
      • 验签
      • demo
    • 沙盒测试资源
      • 测试卡号
      • 信用卡测试案例
      • 退款测试案例
      • 本地化测试案例
      • ApplePay&& Google Pay测试用例
    • 跳转式收银台接口
      • 跳转收银台paymentMethod参数说明
      • 支付/预授权
    • 内嵌式收银台接口
      • 0.0.1-只支持信用卡
        • 内嵌收银台快捷支付
        • 内嵌收银台新版本更新说明
        • 内嵌收银台对接说明
      • 新版-支持信用卡+AP+GP
        • 内嵌收银台2.0.0版本说明
      • create token 创建JSSDK所需的token
        POST
    • 订单通用接口
      • 退款Refund
      • 查询Query
      • 预授权撤销(Void)
      • 预授权完成(Capture)
    • 本地化支付
      • 本地化汇总
      • 本地化接口
        • 便利店支付
          • konbini
            • konbini 收银台模式
            • konbini api模式
          • payeasy
            • payeasy api 模式
            • payeasy 收银台模式
        • 分期付款Pay Later
          • Klarna产品介绍
          • Klarna direct
          • Klarna Redirect
        • 电子钱包
          • Alipay
            • Alipay Direct 文档
            • alipay_cn/alipay_hk direct 文档
          • Wechat-HK
            • 扫码支付
              • 扫码支付
              • direct
                • 扫码支付 Server To Server模式
              • redirect
                • 扫码支付收银台模式(wechat_native)
            • Jsapi支付下单接口
              • 小程序支付
              • 微信公众号支付
              • Jsapi支付下单接口
            • H5支付
              • H5支付
          • Google Pay
            • GoogePay Test card
            • Google Pay 对接可能遇到的问题
            • redirect
              • 跳转式GooglePay收银台
            • api
              • Google Pay API对接
              • Googlepay API 支付
          • applepay
            • ApplePay 扩展
            • ApplePay API
              • ApplePay API接入流程
              • ApplePay API接入流程备份
              • ApplePay Merchant Identifier
              • ApplePay支付
              • ApplePay商户Session
            • applepay cashier
              • applepay 跳转收银台
          • applepay&googlepay内嵌
            • 1.0.0 内嵌方式对接 (建议使用“内嵌方式对接2.0.0”版本)
            • 内嵌方式对接2.0.0
        • 银行转账
          • pix
          • Giropay
            • Giropay_Redirect
            • Giropay_Direct
          • sofort
            • sofort_Redirect
            • sofort_Direct
          • bancontact
            • bancontact_Redirect
          • Ideal
            • Ideal_Redirect
            • Ideal_Direct
          • boleto
            • boleto_Direct
        • 本地化Card
        • Cash(Ticket)现金支付
          • oxxo
          • boleto
          • Cash Common
      • 支付方式(国家/地区)
        • 荷兰
        • 巴西
        • 墨西哥
        • 中国香港
        • 日本
        • 德国
        • 奥地利
        • 西班牙
        • 波兰
        • 意大利
        • 哥伦比亚
        • 比利时
        • 瑞士
    • 通用对象参数和规范说明
      • 参数对象说明(过期)
      • 业务结果码(ResultCode)
      • 错误码(ErrorCode)
      • 金额和货币单位
      • 国家信息参考
      • 对象模型
        • userInfo
        • shippingAddress
        • goodsInfo
        • billingAddress
        • deviceInfo
        • transactionInfo
    • 通知接口说明
      • 交易通知
        • 同步通知
        • 异步 webhook版本升级
        • webhook
      • 拒付
        • 拒付webhook
    • 物流接口
      • 物流信息上送
        • 物流信息上传2.1
        • 物流信息上传(已废弃)
      • 物流信息查询
        • 物流信息查询2.1
        • 物流信息查询(已废弃)
    • 拒付接口
      • 拒付流程说明
      • 拒付查询
    • SFTP
      • SFTP
    • 常见问题
      • 支付和预授权的区别
    • demo
    • 插件安装指导
      • magento插件支付安装
        • Wechat/Alipay/UseePay Payments
    • 订阅
      • 订阅文档
  • 产品说明
    • 收银台
    • 内嵌式收银台
    • Server To Server 直连
  • FAQ
    • 集成和认证
    • 常见问题解答
    • ueeshop配置常见错误
    • ApplePay常见问题
  1. 0.0.1-只支持信用卡

内嵌收银台对接说明

一、简述#

1.1 页面展示#

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

1.2 需要掌握知识#

需要会 html 前端知识
需要会 服务端 知识
无需PCI

二、对接流程#

2.1 时序图#

2.2 简述#

1.
商户后端调用 Create Token后获取Token
create 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. 初始化#

3.2.1 可配置参数#

参数说明可选值
env环境sandbox, production
layout卡输入框布局样式, 单行或多行singleLine, multiLine 。LabeledMultiLine(该布局只能1.0.5以后的版本使用)
locale语言可从 navigator.language 中获取, 或者传递 ISO639 language code
merchantNoUseePay分配的商户号

3.3. 挂载到元素上#

您需要在显示 UseePay 卡信息的页面中有一个可以让 UseePay 卡输入页挂载上去的元素, 比如 div
<div id="cardElement"></div>
挂载到元素上:

3.4. 支付#

3.4.1 获取支付 Token (后端)#

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

3.4.2 确认支付#

对象参数说明#

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

data参数说明#

参数描述示例是否必须
versionmax=5 交易异步通知报文版本,固定为:1.01.0Y
merchantNomax=16 商户编号,由USEEPAY 分配Y
transactionIdmax=64 商户订单号Y
referencemax=32 USEEPAY 订单号N
transactionTypemax=64 交易类型: pay;authorization; refund; capture;authorizationVoid;Y
amountmax=12 交易金额,单位为对应币种的最小货币单位(详见 ISO 4217)N
currencymax=3 3 位 ISO 大写字母货币代码((详见 ISO 4217)
resultCodemax=32 业务结果(详见 业务结果码)Y
errorCodemax=4 错误码(详见 错误码 errorCode)
errorMsgmax=256 错误码消息描述
echoParammax=256 回声参数,响应报文会原样返回
signType签名类型MD5/RSAY

3.4.3 确认支付结果#

将上一步获取到的json字符串发送给您的服务器进行验证合法性与支付结果
四 JSSDK APIS
这里描述了JSSDK API 的详细用法

四 JSSDK APIS#

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

4.1 validate#

示例#

建议#

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

用例#

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

返回值说明#

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

4.2 on#

示例#

建议#

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

用例#

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

参数#

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

返回值说明#

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

五 、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
上一页
内嵌收银台新版本更新说明
下一页
内嵌收银台2.0.0版本说明
Built with