首先接入微信jssdk
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
然后设置你的wx.config()
直接上支付代码:
function checkOrder(orderNo) {
layer.open({
type: 2
,content: '支付结果查询中'
,shadeClose: false
});
var timer = setInterval( function () {
$.getJSON("带着订单号轮询后端是否支付成功?order_no=" + orderNo, function (res) {
if(res.code === 200){
layer.closeAll()
layer.open({
content: '支付成功,即将跳转'
,skin: 'msg'
,time: 2 //2秒后自动关闭
,end: function () {
location.href = '一般跳到订单列表页或支付成功页面'
}
});
}
})
}, 1000)
}
function pay(orderNo) {
$.post("带着订单号请求后端的支付接口", {
order_no: orderNo
}, function (res) {
var paydata = res.data.pay_config
//后端返回的timestamp全小写,前端调用支付的时候s需大写
paydata.timeStamp = paydata.timestamp
delete paydata.timestamp
WeixinJSBridge.invoke('getBrandWCPayRequest', paydata, function (res) {
layer.closeAll()
if (res.err_msg == "get_brand_wcpay_request:ok") {
checkOrder(no);
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
layer.open({
content: '您已取消支付'
,skin: 'msg'
,time: 2 //2秒后自动关闭
,end: function () {
location.href = '取消支付跳转'
}
});
} else {
layer.open({
content: '支付失败'
,skin: 'msg'
,time: 2 //2秒后自动关闭
,end: function () {
location.href = '支付失败跳转'
}
});
}
return false;
});
}, 'json')
}
需要注意的有两点:
1、后端返回的timestamp是全小写,前端请求支付的时候需要改成timeStamp
2、微信不保证前端的支付状态get_brand_wcpay_request:ok百分百正确,所以还是轮询后端,直到有结果为止
PS:我们的逻辑是不管最终支付状态是什么,都跳到订单列表页面,你们可以根据自己的需求改