公眾號支付 微信支付 小程式支付 h5支付開發連載(二)：h5頁面提交訂單
阿新 • • 發佈：2018-12-30
上一節給大家分享了使用者授權公眾號獲取使用者openid的詳細教程，本節給大家繼續分享使用者進入公眾號的h5網頁提交訂單的實現過程
上節教程獲取到使用者openid後，把這個引數返回到h5頁面，用隱藏域接收後再連同這個openid以及訂單所有資訊提交後臺介面，這裡以最關鍵的訂單資訊：金額為例進行程式碼實現。
首先在商品頁面定義一個表單，裡面有商品資訊和價格資訊，由於這裡只做演示，價格暫時寫死，再定義一個提交訂單的Button
<button id="sub-but"class="weui-btn weui-btn_primary" style="width:100%;margin-top:10px;margin-bottom: 30px" onclick="pay()">立即支付 </button>
事件處理函式，拉起微信的h5支付
<script> function pay(){ var payParams = {"totalFee":$("#totalFee").text(),"applyId":$("#applyId").val()}; $.ajax({ url: "/submitOrder?time=" + new Date().getTime(),//訪問後臺地址生成訂單 dataType: "json",//返回json格式的資料 type: "post", data: payParams,//要傳送的資料 success: function (data) { //支付回撥驗證引數 WeixinJSBridge.invoke('getBrandWCPayRequest', { appId: data.appId, timeStamp: data.timeStamp, nonceStr: data.nonceStr, package: data.package, signType: data.signType, paySign: data.paySign, }, //調起微信支付成功 function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { alert("支付成功!"); }else { alert(JSON.stringify(res)); alert("支付失敗!"); } }); }, error: function () { alert("介面訪問出現異常"); } }); } </script>
/** * 跳轉至微信支付 **/ @RequestMapping(value = "/submitOrder", method= RequestMethod.POST) public void submitOrder(HttpServletRequest request,HttpServletResponse response) throws Exception{ String openid = request.getParameter("openid") float fee = Float.parseFloat(request.getParameter("totalFee")); String totalFee = (new Float(fee * 100)).intValue() + "";//分為單位 String outTradeNo = Constants.APPID + WxPayUtil.getNonceStr() + Constants.WXPAY;//自定義規則隨機生成一個訂單號 String timeStamp = System.currentTimeMillis()+""; String spbillCreateIp = WxPayUtil.getIpAdrress(request); SortedMap<String, String> packageParams = new TreeMap<String, String>(); packageParams.put("appid", Constants.APPID); packageParams.put("mch_id", Constants.MCHID); String nonceStr = WxPayUtil.getNonceStr(); packageParams.put("nonce_str",nonceStr); packageParams.put("body", Constants.body); packageParams.put("out_trade_no", outTradeNo); packageParams.put("total_fee", totalFee); packageParams.put("spbill_create_ip", spbillCreateIp); packageParams.put("notify_url", Constants.WXPAY_NOYIFY_URL);//公眾號支付結果通知 packageParams.put("trade_type", Constants.tradeType); packageParams.put("openid", openid); Date payTime = new Date(); String mapStr = WxPayUtil.createLinkString(packageParams); //MD5運算生成簽名 String sign = WxPayUtil.sign(mapStr, WXConfig.key, "utf-8").toUpperCase(); /** * 組裝成xml引數,此處偷懶使用手動組裝，嚴格程式碼可封裝一個方法，XML標排序需要注意，ASCII碼升序排列 */ String xmlTemplate = "<xml> \n" + "<appid><![CDATA[%s]]></appid> \n" + "<body><![CDATA[%s]]></body> \n" + "<mch_id><![CDATA[%s]]></mch_id> \n" + "<nonce_str><![CDATA[%s]]></nonce_str> \n" + "<notify_url><![CDATA[%s]]></notify_url> \n" + "<openid><![CDATA[%s]]></openid> \n" + "<out_trade_no><![CDATA[%s]]></out_trade_no> \n" + "<spbill_create_ip><![CDATA[%s]]></spbill_create_ip> \n" + "<total_fee><![CDATA[%s]]></total_fee> \n" + "<trade_type><![CDATA[%s]]></trade_type> \n" + "<sign><![CDATA[%s]]></sign> \n" + "</xml> \n"; //方式一： String xml = String.format(xmlTemplate,Constants.HQAPPID,Constants.body,Constants.MCHID,nonceStr,Constants.WXPAY_NOYIFY_URL,openid,outTradeNo,spbillCreateIp,totalFee,WXConfig.tradeType,sign,payTime); //微信統一下單介面 String result = WxPayUtil.httpRequest(Constants.ORDER_API, "POST", xml); //生成預支付id String prepay_id = WxPayUtil.getPayNo(result); //...獲取到微信返回的預支付id後，此處在資料庫裡儲存訂單資訊，返回操作記錄數num if (num != 1) { response.getWriter().write(Constants.ORDER_FAIL); return; } //開始第二次簽名 java.lang.String packages = "prepay_id=" + prepay_id; java.lang.String nonceStr1 = WxPayUtil.getNonceStr(); java.lang.String mapStr1 = "appId=" + Constants.APPID + "&nonceStr=" + nonceStr1 + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + timeStamp; java.lang.String paySign = WxPayUtil.sign(mapStr1, Constants.key, "utf-8").toUpperCase(); //拼接支付回撥引數 java.lang.String finalPackage = "{\"appId\":\"" + Constants.HQAPPID + "\",\"timeStamp\":\"" + timeStamp + "\",\"nonceStr\":\"" + nonceStr1 + "\",\"package\":\"" + packages + "\",\"signType\":\"MD5" + "\",\"paySign\":\"" + paySign + "\"}"; response.getWriter().write(finalPackage); }
到此，在公眾號網頁的h5支付過程完成了，一般為了讓使用者有更好的支付體驗，使用者得知道自己的哪個訂單有付款記錄，那麼會在我們本節教程中配置的支付回撥通知配置回撥介面，用於接收微信伺服器推送的支付訊息通知，在下一節教程中為大家分享。