支付相关代码片段

支付相关代码片段

作者：张泽雨

PC端微信扫码支付

通过第三方支付接口 trade/pay/thirdparty 生成交易流水号 tradenumber ，然后用它去请求生成微信网页预支付交易单接口 wechat/trade_pay ，接口会返回 prepay_id 二维码字符串，再用现成接口生成二维码图片，提供用户扫码支付。

需要注意的是，微信网页扫码支付需要开发者主动监听交易单状态，这里的做法是每隔 3 秒请求一个专门用于微信网页支付交易单状态的查询接口。

<script type="text/html" id="paymentIframeTemp">
    <div id="payment-iframe">
        <div class="mask"></div>
        <div class="dialog">
            <a href="javascript:;" class="close"><i class="fa fa-close fa-3x"></i></a>
            <img src="http://pan.baidu.com/share/qrcode?w=500&h=500&url={{qrcode}}">
        </div>
    </div>
</script>
$.ajax({
    url: API.url() + 'wechat/trade_pay',
    data: {
        trade_no: data.data.tradenumber,
        token: Cookies.get('token')
    }
}).done(function(cb){
    if(API.checkCallback(cb)){
        $('#paymentIframeTemp').after(template('paymentIframeTemp', {
            'qrcode': cb.data.data.prepay_id
        }));
        // 循环检查
        wechatIntervalID = setInterval(function(){
            $.ajax({
                url: API.url() + 'wechat/pay/status',
                data: {
                    paynumber: data.data.tradenumber,
                    nonce_str: cb.data.data.noncestr,
                    sign: cb.data.data.sign,
                    token: Cookies.get('token')
                }
            }).done(function(cb){
                if(API.checkCallback(cb)){
                    if(cb.data.issuccess == 1){
                        clearInterval(wechatIntervalID);
                        location.href = 'payment.success.html?ordernumber=' + cb.data.ordernumber + '&total_amount=' + cb.data.money;
                    }
                }
            });
        }, 3000);
    }
});

PC端支付宝扫码支付

通过第三方支付接口 trade/pay/thirdparty 生成交易流水号 tradenumber ，然后用它去请求支付宝支付接口 trade/pay/alipay ，接口会直接跳转到支付宝的支付页面，支付成功后会根据预设值跳转回指定的回调页面，前端要做的事就是拼接好跳转链接的参数即可。

需要注意的是，即使把支付接口地址包在 iframe 里，支付成功后页面依旧会在父级页面上跳转到回调页。

<script type="text/html" id="paymentIframeTemp">
    <div id="payment-iframe">
        <div class="mask"></div>
        <div class="dialog">
            <a href="javascript:;" class="close"><i class="fa fa-close fa-3x"></i></a>
            <iframe src="{{url}}" frameborder="0"></iframe>
        </div>
    </div>
</script>
var url = API.url() + 'trade/pay/alipay?paynumber=' + data.data.tradenumber + '&qrcodewidth=500&token=' + Cookies.get('token');
$('#paymentIframeTemp').after(template('paymentIframeTemp', {
    'url': url
}));

H5微信支付

通过第三方支付接口 trade/pay/thirdparty 生成交易流水号 tradenumber ，然后直接调用微信的 WeixinJSBridge.invoke() 方法即可，此方法只有在微信里访问时才有效。

$.ajax({
    url: API.url() + 'wechat/trade_pay',
    data: {
        mode: 1,
        trade_no: data.data.tradenumber,
        token: Cookies.get('token')
    }
}).done(function(cb){
    if(API.checkCallback(cb)){
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                'appId': cb.data.data.appid, //公众号名称，由商户传入
                'timeStamp': cb.data.data.timestamp, //时间戳，自1970年以来的秒数
                'nonceStr': cb.data.data.noncestr, //随机串
                'package': 'prepay_id=' + cb.data.data.prepay_id,
                'signType': 'MD5', //微信签名。方式：
                'paySign': cb.data.data.sign //微信签名
            },
            function(res){
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                if(res.err_msg == 'get_brand_wcpay_request:ok'){
                    location.href = 'module/order/info.html?ordernumber=' + param['ordernumber'];
                }else if(res.err_msg == 'get_brand_wcpay_request:cancel' ){
                    swal('交易已取消', '', 'error');
                }else{
                    swal('交易失败', '', 'error');
                }
            }
        );
    }
});