JS通過調用微信API實現微信支付功能的方法示例

本文實例講述了JS通過調用微信API實現微信支付功能的方法。分享給大家供大家參考，具體如下：

最近在做微信公眾號開發，在微信支付上遇到一些問題，困惑了3天，今天終于搞定。期間要感謝一些大神的幫助，趁熱下面分享一下我的經驗。

在實現微信支付之前，需要到微信開發平臺認證，這些認證和配置信息我就不多說了，這里主要從代碼層面實現支付。

function onBridgeReady(){
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId" ： "wx2421b1c4370ec43b",   //公眾號名稱，由商戶傳入
      "timeStamp"：" 1395712654",     //時間戳，自1970年以來的秒數
      "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串
      "package" ： "prepay_id=u802345jgfjsdfgsdg888",   //統一訂單號
      "signType" ： "MD5",     //微信簽名方式：
      "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付簽名
    },
    function(res){
      alert(res.err_msg);
      if(res.err_msg == "get_brand_wcpay_request：ok" ) {}   // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回  ok，但并不保證它絕對可靠。
    }
  );
}
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();
}

上面的JS代碼是官方文檔上貼出來的，官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。

下面對JS中的幾個參數做主要的講解:

在開發過程中，有4個非常重要的參數:一個是appid,AppSecret,apikey和商戶號。上面js中的appID就是其中之一。timeStamp是一個時間戳，10位數，nonceStr是隨機數，32位以內，這里最重要的兩個參數，也是最容易出錯的就是package和paySign了。我一一說來。先說package，這里需要用到prepay_id，這個參數是微信生成的訂單號，需要我們調用統一訂單接口來獲取。官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1。可以從文檔看到，要獲取prepay_id，需要很多參數，這里面有一個非常重要的參數就是簽名。注意:這里的簽名和JS中的支付簽名和不同的。 簽名的算法文檔里有，我只是強調兩點。一個是參數的順序，一定一定要按照ASCII從小到大拼接，二是apikey一定不能錯，這個apikey在哪里呢?登入商戶平臺就可以設置了。

拼接好簽名需要的字符串后，進行MD5加密就可以得到簽名了。然后把簽名和前面所有的參數組合成xml格式的字符串，調用給的接口URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一個xml結果，解析出其中的prepay_id，這樣這個參數就成功獲取到了。

下面再說JS中的最后一個參數PaySign:支付簽名。支付簽名的算法也是一樣，把JS中的其他5個參數按照順序拼接，加上apikey，MD5加密，ok。

簽名的算法都是一樣的，只是參數值不同而已。這里需要注意一點。在支付簽名的時候，用到隨機數nonceStr，時間戳timeStamp，而簽名時使用的這兩個參數和JS中的這兩個參數的值要是一樣的，是同一個隨機數，同一個時間戳。為什么呢?雖然文檔沒說，但是我的理解是:支付簽名是通過隨機數和時間戳來生成的，然后在支付的時候，把隨機數，時間戳，支付簽名一起發送過去，那么在微信進行驗證的時候，也會根基js中的隨機數和時間戳生成簽名和你發送的支付簽名進行比較，如果你在js中重新獲取新的隨機數、時間戳，那么算出來的簽名和你發送的簽名就會不一樣，就會報錯:簽名失敗。

到此，代碼層面的注意點就這些，當然，還有其他的一些注意點。比如其中有用的openid，這個參數也是需要調用接口獲取到的，還有支付授權的目錄是否配置正確。

最后一句總結:仔細看文檔，最后問別人，可以找微信支付相關的群，里面很多大神的，我之前就是遇到一個問題糾結了2天沒解決，(有時候光看文檔也不行)，

然后怒加了8個微信開發的群，最終在高人的指點下終于搞出來了。再次表示感謝。程序員是一個熱愛分享的群體，他們非常樂意把自己知道的東西分享出去。所以不懂的時候，多問問。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。