微信支付(詳解)

一. 介紹------------------------------------------------------------------

 

 

 

 

微信支付官方開發文檔:  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支付不能主動回調，因此須要個主動查詢的操做，這時會須要你又一個確認界面來進行主動查詢訂單狀態。這裏是個坑一下子再說），調起支付界面以後進行支付操做，期間你什麼都不用管，由於這都是微信的事。你須要的就是在你付完錢以後查看你的錢買你要的東西到底有沒有成功（你要是不加的話，誰知道成功沒，估計顧客會打死你，付完錢就茫然了，不知道到底錢到哪去了→_→）

常見錯誤

1、回調頁面

正常流程用戶支付完成後會返回至發起支付的頁面，如需返回至指定頁面，則能夠在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俺)

 

              

"購買成功"