快应用微信H5支付
- 首先是服务端完成支付服务端的接入，接入完成以后，服务器要完成的工作是接收来自客户端的支付请求，然后生成一个订单，之后把订单传给微信的服务器，微信会返回一个mweb_url，服务器需要把这个mweb_url返回给客户端；
data:{
orderID:56955,
url:'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602'
}
- 完成一个中间跳转页面，中间页需要在加载完成的时候从页面的get参数中解析出 mweb_url , 然后自动向这个url跳转；生成一个https://my.demain.com/html/bookSoter/index.html 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;
}
- 关于这个中间页:
- 为什么需要这个中间页？
- 因为微信h5支付拉起支付界面的方式就是向mweb_url跳转，不过因为微信会通过ref做防盗链检查，因为跳转动作需要在开发者的页面中完成
- 这个中间页什么时候会被加载运行？
调用微信支付的pay接口之后，平台会自动加载运行这个页面
- 加载运行这个中间页的时候，会拿到哪些参数？
调用微信支付的pay接口时传入的参数，会全部作为get参数传给这个页面
- 在快应用中进行配置中间页地址,manifest.json中声明wxpay这个feature时填上
{
"name": "service.wxpay",
"params": {
"package": "you.package.name",
"sign": "abcdefg",
"url": "https://my.demain.com/html/bookSoter/index.html"
}
}
- 调用官方文档提供的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)
}
})
}
}
- 如果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"
}
- 如果走了success回调函数以后，微信唤起不成功存在可能有
- 生成的H5中间页面的域名没有在微信开发平台上面配置白名单；
- 服务端代码发布环境和你测试环境在同一个局域网里面
- 如果走了fail回调函数，看返回的code值
- 900 在manifest.json中配置的应用签名有误，无法解析
- 901 在manifest.json中配置的应用包名有误
- 1000 微信未安装
- 1001 用于微信网页支付的url配置找不到
- 2001 订单已经提交给微信，但是微信返回错误, 可能的原因：签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等。
网友评论