博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
快应用微信H5支付
阅读量:5999 次
发布时间:2019-06-20

本文共 2495 字,大约阅读时间需要 8 分钟。

快应用微信H5支付

1.首先是服务端完成支付服务端的接入,接入完成以后,服务器要完成的工作是接收来自客户端的支付请求,然后生成一个订单,之后把订单传给微信的服务器,微信会返回一个mweb_url,服务器需要把这个mweb_url返回给客户端;

data:{    orderId :56955,    url:'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602'}

2.完成一个中间跳转页面,中间页需要在加载完成的时候从页面的get参数中解析出 mweb_url , 然后自动向这个url跳转;生成一个 H5链接

//中间页面H5的逻辑  var payUrl = decodeURIComponent(getQueryString('mweb_url'))  if (payUrl !== 'null') {    window.location.replace(payUrl)  }  function getQueryString(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    var l = decodeURI(window.location.search);    var r = l.substr(1).match(reg);    if (r != null) return unescape(r[2]);    return null;  }

3.关于这个中间页:

  • 为什么需要这个中间页?
  • 因为微信h5支付拉起支付界面的方式就是向mweb_url跳转,不过因为微信会通过ref做防盗链检查,因为跳转动作需要在开发者的页面中完成
  • 这个中间页什么时候会被加载运行?调用微信支付的pay接口之后,平台会自动加载运行这个页面
  • 加载运行这个中间页的时候,会拿到哪些参数?调用微信支付的pay接口时传入的参数,会全部作为get参数传给这个页面

4.在快应用中进行配置中间页地址,manifest.json中声明wxpay这个feature时填上

{     "name": "service.wxpay",     "params": {     "package": "you.package.name",     "sign": "abcdefg",     "url": "https://my.demain.com/html/bookSoter/index.html"  }}

5.调用官方文档提供的wxpay.getType()方法

wechatPayHandle(){    var payType = wxpay.getType();    if (payType === 'MWEB') {    wxpay.pay({      //微信网页支付的prepayId      prepayid: 'wx13101012415473b5899768303880086259',      extra: {        //传递给支付页面的自定义参数, 根据需要进行设置, 会被urlEncode之后拼接在配置的url尾部        mweb_url: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602'      },      fail: function (data, code) {        console.log(`WX H5 PAY handling fail, code = ${code}`)      },      cancel: function () {        console.log('WX H5 PAY handling cancel')      },      success: function (data) {        //H5方式下,支付成功的回调仅仅只是指将订单递交给微信,并不意味着支付已经成功完成        console.log(data)      }    })  }}

6.如果pay()方法走成功以后会返回一个data,不需要做任何操作和跳转,就可以唤起微信支付,返回的格式如下:

{finl_url:"https://my.demain.com/html/bookSoter/index.html?repayid=wx13101012415473b5899768303880086259&trade_type=MWEB&mweb_url=https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx13101012415473b5899768303880086259%26package%1999421602"    }

7.如果走了success回调函数以后,微信唤起不成功存在可能有

  • 生成的H5中间页面的域名没有在微信开发平台上面配置白名单;
  • 服务端代码发布环境和你测试环境在同一个局域网里面

8.如果走了fail回调函数,看返回的code值

  • 900 在manifest.json中配置的应用签名有误,无法解析
  • 901 在manifest.json中配置的应用包名有误
  • 1000 微信未安装
  • 1001 用于微信网页支付的url配置找不到
  • 2001 订单已经提交给微信,但是微信返回错误, 可能的原因:签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等。

转载地址:http://bqzmx.baihongyu.com/

你可能感兴趣的文章
笑对人生,坐看云起云落
查看>>
面向对象
查看>>
连接池并发的实现原理
查看>>
HDU - 3966-Aragorn' Story(树链剖分+线段树)
查看>>
【BZOJ1101】Zap [莫比乌斯反演]
查看>>
online_judge_1473
查看>>
1970.1.1这个特殊时间
查看>>
将定时任务cron 解析成中文
查看>>
docker之docker-machine用法
查看>>
Alpha Scrum 3–Sep29,2011
查看>>
帧动画(wifi信号动态动画)
查看>>
IIS 7启用static JSON文件能POST方法
查看>>
P5205 【模板】多项式开根
查看>>
matlab练习3
查看>>
微博mini for Windows Phone 8 开发那些事
查看>>
redis文章索引
查看>>
OpenSSH利用处理畸形长度密码造成的时间差,枚举系统用户(CVE-2016-6210)
查看>>
Javascript回调函数
查看>>
Java 之封装
查看>>
可能是最简单的面向对象入门教程(二)为什么要有类型
查看>>