web端的微信支付可分为JSAPI与H5
JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器。
1.JSAPI
在微信内部可以直接唤起微信浏览器的内置对象WeixinJSBridge
废话不多说直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| api.apply.jsApiPay(obj).then(res => { if (res.data.code === '0000') { vm.params = res.data.bean } else { alert('微信支付调起失败!') } }).catch(err => { alert(err) })
if (typeof WeixinJSBridge === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(this.params), false) } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(this.params)) document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(this.params)) } } else { this.onBridgeReady(this.params) }
onBridgeReady (params) { const that = this WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId: params.appId, timeStamp: params.timeStamp, nonceStr: params.nonceStr, package: params.prepay_id, signType: params.signType, paySign: params.paySign }, function (res) { if (res.err_msg === 'get_brand_wcpay_request:ok') { that.queryOrder() } else if (res.err_msg === 'get_brand_wcpay_request:fail') { alert('支付失败!') } } ) },
|
在微信支付的回调函数中,当res.err_msg 为
get_brand_wcpay_request:ok 时,支付状态不一定准确,因此需要调用后端的查询订单接口,查询是否支付完成,然后再执行相应的逻辑。
2、H5支付
h5相对简单,前端只需要跳转到后端返回的链接即可
1 2 3 4 5 6 7 8 9 10 11
| api.apply.h5Pay({ title: '' orderNum: '', expireMinute: 10, redirectUrl: `${window.location.origin}/pay/card?orderId=${vm.orderId}` }).then(res => { vm.h5PayUrl = res.data.bean }).catch(err => { alert(err) })
|
第一步,请求后端接口,需要传支付的标题,订单号,支付时间,重定向链接。
第二部,们只需要点击支付按钮时候跳转至后端返回链接即可。
window.location.href = this.h5PayUrl
需要注意的是H5支付查询订单需要用户去手动触发,因此需要增加一个确定订单的弹层。如图:
查询订单是否支付成功与JSAPI一致~