1、H5頁面使用微信支付，首先需要注冊微信公眾號，在設置與開發>公眾號設置>功能設置中配置業務域名、JS接口安全域名、網頁授權域名。支付功能頁面需在此域名鏈接下的頁面。
2、加入域名后，就可以在H5頁面調用微信支付功能。首先請求后台獲取微信支付所需的配置信息。會生成一個預支付訂單。
//獲取配置信息 var wechatPayId = ""; $.ajax({ type:"post", url:path+"/wechatPay/pay", data:{ }, dataType:"json", success:function(result){ // 檢測支付環境中的 WeixinJSBridge 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{ if(result.state == "SUCCESS"){ wechatPayId = result.data.wechatPayId;//微信預支付id 用於用戶取消支付時，修改生成的預支付訂單狀態 onBridgeReady(result.data.appId,result.data.timeStamp,result.data.nonceStr,result.data.package,result.data.signType,result.data.paySign); }else{ console.log(result.data); } } }, error:function(){ console.log("支付錯誤"); } }) 3、獲取后調用方法喚起支付窗口。
function onBridgeReady(appId,timestamp,noncestr,package,signType,paySign){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":appId, //公眾號ID，由商戶傳入 "timeStamp":timestamp, //時間戳，自1970年以來的秒數 "nonceStr":noncestr, //隨機串 "package":package, "signType":signType, //微信簽名方式： "paySign":paySign //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判斷前端返回,微信團隊鄭重提示： //res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。 //跳轉支付成功展示頁面 window.location.href = path +"/page/goPaymentSuccess"; }else if(res.err_msg == "get_brand_wcpay_request:fail" ){ console.log("支付失敗") }else{ console.log("取消支付") //修改上面生成的預支付訂單狀態 cancelPayMoney(); } }); } 4、如果用戶在支付窗口上選擇了取消支付，調用接口修改此預支付訂單狀態，和支付成功訂單區別開。這個wechatPayId就是上面預支付訂單的id(根據后台方法，傳入的參數不一定與此處傳的一樣，具體根據后台方法邏輯進行改變)。
function cancelPayMoney(){ $.ajax({ type:"post", url:path+"/wechatPay/cancelPay", data:{ "id":wechatPayId, }, dataType: "json", async:false, success:function(result){ }, error:function(){ console.log("取消訂單失敗"+""); } }) }