微信公众号支付设计代码之下单支付

17-11-24 来源：[db:作者]

收藏我要投稿

本页面是微信授权后微信回访的页面，微信回访时，会带一个名为code的参数，页面需要将code通过ajax请求到后台，然后后台通过公众号的appid和code去微信后台换取用户的openid，然后在使用服务商的appid和换取到的openid后台调用微信统一下单的接口，接口会返回prepay_id等信息，平台再将这些信息返回到页面，调用微信的WeixinJSBridge.invoke方法，这时候微信的收银台就被唤起，用户输入微信支付密码就能完成支付了。

注意:

1.在开发过程中，曾经遇到过ios可以成功唤起收银台，但是安卓唤起失败率高的情况(只有服务器启动后才能唤起一次)，后来经过检查，原因可能是因为微信在回访页面后，到调用WeixinJSBridge.invoke方法过程中，微信的浏览器页面没有完全加载完成，所有再调用WeixinJSBridge.invoke后会出现无效的情况，这种时候只需要判断下页面是否准备好就行了，如下wxIsAlready()方法就行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    id="viewport" name="viewport">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<title>支付页面</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.md5.js"></script>
</head>
<body>
    <div id="page2">
    <div id="back_up"></div>
    <div id="content">
    </div>
    </div>
    <script>
    var getTxnStatusUrl = "http://testwx.fcclock.com/cashier/pay/GetTxnStatus";//查询订单状态
    var qrCodePayUrl = "http://testwx.fcclock.com/cashier/pay/QrcodePay"//支付下单 域名访问
    String.prototype.getQueryString = function(name) {
        var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)"), r;
        if (r = this.match(reg))
            return r[2];
        return null;
    };
        $(document).on('touchmove', function(event) {
            event.preventDefault();
        });
        var ua = window.navigator.userAgent.toLowerCase();
        var client = "none";
        var txn_no;
        var time;
        var acount = 0;
            
        $(function() {
            IsWeixinOrAlipay();
            wxIsAlready();
        });
        function IsWeixinOrAlipay() {
             $("#page2").css('display', 'none');
            //判断是不是微信
             if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                 client = "micromessenger";
                 return;
             }
             //判断是不是支付宝
             if (ua.match(/AlipayClient/i) == 'alipayclient') {
                 client = "alipayclient";
                 return;
             }
        }
        function wxIsAlready(){
            if (typeof WeixinJSBridge == "undefined"){
               if( document.addEventListener ){
                     document.addEventListener('WeixinJSBridgeReady', startPay, false);
                }else if (document.attachEvent){
                     document.attachEvent('WeixinJSBridgeReady', startPay); 
                     document.attachEvent('onWeixinJSBridgeReady', startPay);
                }
            }else{
                  startPay();
            } 
        }

        function startPay(){
            txn_no = location.search.getQueryString("txn_no");
            if(client=="micromessenger"){
                var code = location.search.getQueryString("code");
                $.ajax({
                    type: "POST",
                    dataType: "text",
                    url : qrCodePayUrl,
                    data : "{\"version\":\"1.0\",\"txn_no\":\""+txn_no+"\",\"code\":\""+code+"\",\"pmc_code\":\"WXPAY\",\"trade_type\":\"JSAPI\"}",
                    success : function(data) {                                    
                        var obj = JSON.parse(data);        
                        var back_url = obj.back_url;
                        var tran_no = obj.tran_no;
                        var txn_no = obj.txn_no;
                        var wx_params = JSON.parse(data);    
                         WeixinJSBridge.invoke(
                                       'getBrandWCPayRequest', {
                                       'appId':wx_params.appId2,     //公众号名称，由商户传入     
                                       'timeStamp':wx_params.timeStamp,         //时间戳，自1970年以来的秒数     
                                       'nonceStr':wx_params.nonceStr2, //随机串     
                                       'package':wx_params.wxpackage,   //prepay_id = ?  
                                       'signType':'MD5',        //微信签名方式：     
                                       'paySign':wx_params.paySign //微信签名 
                                   },
                                   function(res){   
                                       alert("即将打开:"+back_url);
                                       if(res.err_msg == "get_brand_wcpay_request:ok" ) { // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
                                               var back = back_url+"?txn_no="+txn_no+"&return_code=0000&return_message=SUCCESS&tran_no="+tran_no;
                                               window.location.href=back;
                                       }    
                                       else{
                        window.location.href="error.html";
                       var back = back_url+"?txn_no="+txn_no+"&return_code=0001&return_message=FAILtran_no="+tran_no;
                                              window.location.href=back;
                                    //       QueryTxnStatus(obj.txn_no,mchtInfo.mcht_no,"1");
                                       }
                                   }
                               ); 
                    },
                    error : function(data,textstatus) {
                        alert("error");
                        window.location.href="error.html";
                    }
                });
            }
              else if(client=="alipayclient"){
                var code = location.search.getQueryString("auth_code");
                   $.ajax({
                    type: "POST",
                    dataType: "text",
                    async: false,
                    data : "{\"code\":\""+ code + "\",\"device_ip\":\"172.19.248.145\",\"txn_no\":\"" + txn_no + "\",\"pmc_code\":\"ALIPAY\",\"version\":\"1.0\"}",
                    url : qrCodePayUrl,
                    success : function(data) {
                        var obj = JSON.parse(data);
                        AlipayJSBridge.call("tradePay", {
                              tradeNO: obj.trade_no
                         }, function (data) {
                             if ("9000" == data.resultCode) {
                                 window.location.href="success.html";
                                 QueryTxnStatus(obj.txn_no,mchtInfo.mcht_no,"0");                            
                             }
                             else{
                                 QueryTxnStatus(obj.txn_no,mchtInfo.mcht_no,"1");
                                 window.location.href="error.html";
                             }
                         }); 
                    },
                    error : function(e) {
                    }
                });    
            } 
            else{
                alert("请用微信或支付宝打开");
            }       
        }
    </script>
</body>
</html>

点击复制链接与好友分享!回本站首页