微信公众号H5页面支付

首先接入微信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：我们的逻辑是不管最终支付状态是什么，都跳到订单列表页面，你们可以根据自己的需求改