微信公衆號支付接口網頁開發示例

微信公衆號支付開發步驟以下：

（1）首先開通支付。

（2）將用戶openid傳遞到支付連接的參數中，例如：buy.jsp?id=productid&openid=user_openid

（3）先寫好支付通知結果接口（notify_url），嘗試8次直到咱們迴應，示例代碼以下：

    public String weixinNotify(HttpServletRequest request,
            HttpServletResponse response) {
        try {
            response.setCharacterEncoding("UTF-8");
            InputStream inStream = request.getInputStream();
            ByteArrayOutputStream outSteam = new ByteArrayOutputStream();
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = inStream.read(buffer)) != -1) {
                outSteam.write(buffer, 0, len);
            }
            outSteam.close();
            inStream.close();
            String resultStr = new String(outSteam.toByteArray(), "utf-8");
             Map<String, String> resultMap =MessageUtil.parseXml(resultStr);
             String out_trade_no = resultMap.get("out_trade_no");//訂單號
             String return_code = resultMap.get("return_code");
             String mch_id=resultMap.get("mch_id");        
            if (return_code.contains("SUCCESS")) {
                // 此處就是你的邏輯代碼
                if (mch_id.equals(WeixinUtil.MCH_ID)){
                    OrderLogic.finishOrder(out_trade_no);//處理該訂單的狀態
                }
            }
            //返回消息給微信服務器
            String retXml = "<xml>  <return_code><![CDATA[SUCCESS]]></return_code>  <return_msg><![CDATA[OK]]></return_msg></xml>";
            PrintWriter out = response.getWriter();
            out.print(retXml);
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "success";//這句話能夠不用吧？
    }

（4）Js端代碼：

商品頁面增長如下代碼就會調用支付流程：

 

 function onBridgeReady() {        
        var appId = $('#appId').val();// getUrlParam('appId');        
        var timeStamp = $('#timeStamp').val();//  getUrlParam('timeStamp');
        var nonceStr = $('#nonceStr').val();//  getUrlParam('nonceStr');
        var Package = $('#packageid').val();//  getUrlParam('package');
        var signType =  $('#signType').val();// getUrlParam('signType');
        var paySign =  $('#paySign').val();// getUrlParam('paySign');
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId" : appId, //公衆號名稱，由商戶傳入
            "timeStamp" : timeStamp,// "1395712654", //時間戳，自1970年以來的秒數
            "nonceStr" : nonceStr,// "e61463f8efa94090b1f366cccfbbb444", //隨機串
            "package" : Package,// "prepay_id=u802345jgfjsdfgsdg888",
            "signType" : signType,// "MD5", //微信簽名方式:
            "paySign" : paySign,// "70EA570631E4BB79628FBCA90534C63FF7FADD89"
                                // //微信簽名
        }, function(res) { // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回
                            // ok，但並不保證它絕對可靠。
            // alert(res.err_msg);
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                alert("success");
            }
            if (res.err_msg == "get_brand_wcpay_request:cancel") {
                alert("cancel");
            }
            if (res.err_msg == "get_brand_wcpay_request:fail") {
                alert("fail");
            }
        });
    }

    function callPay() {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady,
                        false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    }

       

（5）還須要預先調用預下單接口才行，這部分代碼暫時找不到了，後面補充。

寫的不是很流暢，第一次寫，感受微信支付接口挺繞的。

微信用戶在不一樣的公衆號裏時候openid值是不同的，所以在支付的時候要先將用戶的openid獲取到傳遞給支付頁面。獲取openid一個方式是經過Oauth連接，就是說先進入Oauth地址，將H5頁面url做爲參數傳遞給Oauth連接，微信會回調這個url並將隨機的code傳給這個H5，經過code來查詢微信api獲取openid值。