接入H5文档-vue框架

安装

  • 复制lib到工程 public下和index.html保持同级别，重命名文件夹xpaySdkLib
  • 在接入工程的public/index.html中加入 
<html>
<head>
    ...
    <script src="xpaySdkLib/xPaySdk.umd.min.js"></script>
    <link rel="stylesheet" href="xpaySdkLib/xPaySdk.css">
</head>
<body>
...
</body>
</html>

设置生产\测试环境

xPaySdk.default.xPaySdk.xPayUtil.setXPayDebug(true/false)  测试/生产

唤起收银台

路由配置
在main.js中加入router
const routes = [
    //支付页面,UI定制版需要
    {name: 'xpay-page', path: '/xpay-page', component: xPaySdk.default.xPaySdk.xPayPage},
    //1. 如果没有配置 callbackUrl（createPayOrder接口中的request参数），则可以配置下面这个路径
    //2. callbackUrl优先级更高
    {name: 'xpay-return-page', path: '/', component: HelloWorld},
]
UI定制版
xPaySdk.default.xPaySdk.xPayUtil.pay(payParam)
payParam 具体内容，见下面定义
支付接口状态回调
//UI定制版需要添加，无UI版本有callback
xPaySdk.default.xPaySdk.xPayUtil.setXPayH5CallBack(function(payStatus, msg){

})
无UI接口版本
//step1:获取支付页面元素信息
xPaySdk.default.xPaySdk.xPayUtil.silentPay(JSON.stringify(payParam), function (status, data) {
    if (status === 0) {
        //data 为下一个接口需要用到的参数
    } else {
        //错误信息
    }
})

//step2:选择渠道进行支付

//微信支付：{'wechat_pay': 'wechat_pay_h5'}, 'wechat'
//支付宝支付： {'ali_pay': 'ali_pay_h5'}, 'alipay'
//payModel 为step1的response.data

xPaySdk.default.xPaySdk.xPayUtil.silentPayWay(payRouter, way, payModel, function (status, msg) {
    //status: 
    //0 开始获取数据
    //1 开始跳转支付
    //-1 异常
})

支付回调

1. 支付结果页，点击确认按钮后，会往 callbackUrl（createPayOrder接口中的request参数）跳转,并在url地址中拼接这些参数
    outTradeId
    payStatus
    msg

    //payStatus:
    //const PAY_SUCCESS = 1;
    //const PAY_CANCEL = 0;
    //const PAY_ERROR = -2;
    //const PAY_INVALID = -1;
2. 如果callbackUrl为空，则往vue-router的xpay-return-page跳转

tips

  • 微信浏览器外支付
    • 微信h5支付，是在拉起native微信的时候，浏览器并行访问了结果页，所以没办法判断是否已经完成了支付
    • 微信h5支付开通流程
      • 申请微信支付，并开通h5支付
        • 授权域名填写
          • 接入方h5网站的域名
          • xiaoyiads.com
          • wfipay.com
  • 微信浏览器内支付
    • 公众号配置安全域名
      • 开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项
      • 在支付平台，添加授权域名
        • 授权域名填写
          • 接入方h5网站的域名
          • xiaoyiads.com
          • wfipay.com
  • 申请服务号，完成认证
  • 微信支付后台，绑定服务号appid
  • 提供 服务号appid，微信商户merchantid，微信商户 api_key

    错误信息

Code 描述
PAI_INVALIDATE_PARAM 缺少必填参数
PAI_REPEAT_REQUEST 重复的订单请求（或订单已支付）
PAI_RECORD_NOT_EXIST 付款信息不存在
VERIFY_AMOUNT_ERROR 付款金额与原订单金额不一致
VERIFY_PRODUCT_NUM_ERROR 产品数量与原数量不一致
VERIFY_PRODUCT_CODE_ERROR 产品code与原code不一致
VERIFY_PRODUCT_NAME_ERROR 产品名称与原名称不一致

payParam

payBizData
名字 类型 描述 是否可选
security_type String(6) Sign字段签名方式 ，目前为RSA NO
sign String(128) 商户签名，签名生规则见 签名、加密机制 章节 NO
pay_token String(128) 支付平台支付凭证PayToken，由生成支付交易服务生成，用来验证支付请求的有效性 NO
out_trade_id String(64) 外部订单号，第三方商户自己生成的订单标识，必须要唯一不能重复 NO
transaction_id String(64) 业务流水号，商户应保证唯一;业务流水号，和订单号不一样；只是个唯一的流水号 NO
payBaseData
名字 类型 描述 是否可选
appid String(32) 游戏传 appid NO
out_user_id string(64) 连尚账户相关：union_id...uhid... 二选一可为空
guest_id string(64) 1.CP方给出的：openid ；用openid + unionid 在支付端进行 查询连尚统一账户信息：uhid；2.游客：传给定值：GUESTER 二选一可为空
client_user_id string(64) 1.游客时：游戏cp方必传该字段；2.cp方定义的用户id；其他接入渠道不是必传项 NO
version String(6) 服务版本号，传 2 NO
request_id String(64) 请求信息标识，商户应保持唯一 NO
service_name String(32) 服务名称，跳转支付服务为"paymentAccessRequest" NO
platform String(10) 最终支付来源,即商户使用何种方式调用支付平台支付 H5/Quick App/Online/Native SDK/Offline/Android/iOS NO
time_stamp String(14) 时间戳(请求时的时间) NO
compress_type String(2) 压缩类型：0（不压缩），1（gzip） NO
language Int 语言 填0=中文 NO
merchant_id String(32) 支付平台商户ID，第三方接入支付平台支付前向支付平台支付申请获得 NO
Example
{
    "payBizData": {
        "pay_token": "",
        "sign": "...",
        "out_trade_id": "",
        "transaction_id": "",
        "security_type": "RSA"
    },
    "payBaseData": {
        "appid": "",
        "out_user_id": "",
        "request_id": "",
        "version": "2",
        "service_name": "paymentAccessRequest",
        "client_user_id": "",
        "platform": "Quick App",
        "time_stamp": "",
        "language": 0,
        "compress_type": "0",
        "merchant_id": "",
        "guest_id": ""
    }
}