一. 介紹------------------------------------------------------------------
微信支付官方開發文檔: https://pay.weixin.qq.com/wiki/doc/api/index.html
二.配置
下面俺 就來講講 常用的三種微信支付,
當然!! 首先你要去微信平台 配置在微信商戶平台（pay.weixin.qq.com）設置您的JSAPI支付支付目錄 h5支付 等等!!
(例子jsapi 官方地址 開發步驟:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3) 下圖👇
三.常用的三種支付 詳解 ( jsapi支付(微信內部瀏覽器) / 小程序支付 / h5支付 (微信外部瀏覽器) !!)
1.小程序支付 (很簡單, 環境====> 微信 環境)
首先 調用 后台下單接口, 下單成功之后 會返回 支付的參數
// res:{
// appid: "wxXXXXX"
// error: "00"
// msg: "下單成功"
// nonceStr: "xxxxx"
// orderNum: "20191102150216"
// package: "prepay_id=wx33333333"
// paySign: "14CF8AE4666666E8D1CAF"
// timeStamp: "1666187704"
// }
小程序 文檔 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html
wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success (res) {成功跳轉什么界面 ,自己定},
fail (res) {失敗跳轉什么界面, 自己定 }
})
2. jsapi支付 (環境 微信 內部 瀏覽器)
引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
注意: web-view 內嵌 h5 目前不支持支付!!! web-view 功能有限, 可以參考官方文檔 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
jsapi支付 :用戶通過微信掃碼、關注公眾號等方式進入商家H5頁面，並在微信內調用JSSDK完成支付
//WeixinJSBridge 是微信內置對象，支付功能只能在微信端才能使用 調用這個方法 wxpay 購買就行
wxPay(appId,timeStamp,nonceStr,package,paySign){
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 {
//執行下面方法
//傳入下面參數,這些參數需要從后台獲取 (下單接口獲取, 問后台要)
this.onBridgeReady(appId,timeStamp,nonceStr,package,paySign)
}
},
//jsapi方法
onBridgeReady(appId,timeStamp,nonceStr,package,paySign) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": appId, //需要在微信綁定商戶號，成功之后會生成有appid
"timeStamp": timeStamp, //時間戳，自1970年以來的秒數，前端需要從后台獲取該數據
"nonceStr": nonceStr, //隨機串，前端需要從后台獲取該數據
"package": package,//前端需要從后台獲取該數據
"signType": "MD5", //微信簽名方式,默認為"MD5",也可以從后台獲取
"paySign": paySign //微信簽名，前端需要從后台獲取該數據
},
function(res) {
//這個步驟非常重要，調試期間會報上相應的錯誤信息，因為微信調試工具是無法實際支付的，並且微信上是無法調試的，只能在這里alert
console.log(res.err_msg);
if(res.err_msg == "get_brand_wcpay_request:ok") {
console.log("購買成功")
} // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。
else{
console.log("購買失敗")
}
}
);
}
3. H5支付 (環境===> 微信 外部 瀏覽器) 更簡單了, 基本都交給后台, 下單之后 后台會返給你鏈接, 你點擊鏈接 就跳轉支付了
解釋: 用戶在微信以外的手機瀏覽器請求微信支付的場景喚起微信支付
微信官方體驗鏈接：https://wxpay.wxutil.com/mch/pay/h5.v2.php，請在微信外瀏覽器打開。
H5支付參考鏈接:https://www.jianshu.com/p/6b9acdd10de6
====>
res:{ code: "200", msg: "下單成功", mweb_url: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096" }
點擊鏈接就會喚起微信支付;
大致的流程就和微信的文檔一致。如果看不懂的話，那就通俗的來講就是：你在下單時，要給后台發請求，后台通過拿到的參數請求微信后台去生成訂單並同時返給你一個路徑mweb_url，這個路徑就是用來調起微信應用發起支付操作的。（這里要說明的就是由於h5支付不能主動回調，所以需要個主動查詢的操作，這時會需要你又一個確認界面來進行主動查詢訂單狀態。這里是個坑一會兒再說），調起支付界面之后進行支付操作，期間你什么都不用管，因為這都是微信的事。你需要的就是在你付完錢之后查看你的錢買你要的東西到底有沒有成功（你要是不加的話，誰知道成功沒，估計顧客會打死你，付完錢就茫然了，不知道到底錢到哪去了→_→）
常見錯誤
一、回調頁面
正常流程用戶支付完成后會返回至發起支付的頁面，如需返回至指定頁面，則可以在MWEB_URL后拼接上redirect_url參數，來指定回調頁面。
如，您希望用戶支付完成后跳轉至https://www.wechatpay.com.cn，則可以做如下處理：
假設您通過統一下單接口獲到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
***則拼接后的地址為MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn***
(有顏色的部分就是你要添加最后想要跳轉進行別的操作的頁面，一般就是確認訂單狀態的頁面)
注意：
1.需對redirect_url進行urlencode處理
2.由於設置redirect_url后,回跳指定頁面的操作可能發生在：
1,微信支付中間頁調起微信收銀台后超過5秒
2,用戶點擊“取消支付“或支付完成后點“完成”按鈕。因此無法保證頁面回跳時，支付流程已結束，所以商戶設置的redirect_url地址不能自動執行查單操作，應讓用戶去點擊按鈕觸發查單操作。回跳頁面展示效果可參考下圖
----------------------------------------------------------------------------------------------------------------------------------------------------
有問題和建議都可以留言哦,俺經常會看的
感謝 各位老板 小額打賞: (有問題call俺)
"購買成功"