React Native微信支付開發爬坑之旅

cwzqf發表於2017-12-21
React Native

       早聞微信支付一直為移動開發者所詬病，這次公司專案新增微信支付需求，一試果然是一把辛酸淚，從配置到與後臺除錯真是一波三折，整整花了一天的時間才從坑裡爬出來，效率也是低。所以有必要做下總結，日後再有微信支付，三兩下便可完事。 　　因為公司專案是RN寫的，我這邊選用了目前在RN上使用較廣泛的微信支付元件，基本上都封裝好了，github直通車：react-native-wechat        我們只需要實現兩步就可以調起微信支付：

  • 在應用啟動的時候註冊APPID
 WeChat.registerApp('appid');
複製程式碼
  • 在跳轉到微信支付的點選事件中配置引數：
 wechat.isWXAppInstalled().then( ( isInstalled ) => {
       if ( isInstalled ) {       //判斷手機是否有安裝微信
           wechat.pay({
                 partnerId: wxinfo.mch_id,  // 商家向財付通申請的商家id
                 prepayId: wxinfo.prepay_id,   // 預支付訂單
                 nonceStr: wxinfo.nonce_str,   // 隨機串，防重發
                 timeStamp: result.data.time.toString()    ,  // 時間戳，防重發.
                 package: 'Sign=WXPay',    // 商家根據財付通文件填寫的資料和簽名
                 sign: result.data.sign        // 商家根據微信開放平臺文件對資料做的簽名
                 }).then((requestJson)=>{
                           //支付成功回撥
                           console.log("----微信支付成功----",requestJson);
                           if (requestJson.errCode=="0"){
                            //回撥成功處理
                           }
                       }).catch((err)=>{
                           toastShort('支付失敗')
                       })
                   } else {
                       toastShort( '沒有安裝微信軟體，請您安裝微信之後再試' );
                   }
               } );
複製程式碼

       以上就是react native呼叫微信支付的過程，使用的開源庫已經幫我們封裝好了其他的一些配置，用起來也是非常的方便。        接下來就是在手機上跑一遍，魯迅說過：“新鮮事物第一次嘗試就想要成功，機率還是很小的”。當我點選微信支付，期待著跳出熟悉的微信支付介面時，出現了令我失望的結果：螢幕閃了一下，然後，然後就沒有然後了，what the f...,好，穩定下情緒，開始我的爬坑之旅。 　　首先，我先來到這個開源庫的文件中尋找下是否有我遺漏的地方，在最後看到了一句話，彷彿看到了曙光:

在安卓機上測試的同學經常會遇到比如呼叫微信支付時閃一下就沒了的問題，這個問題100%跟簽名有關，請檢查你的簽名。 debug版本和release版本的簽名是不同的，請注意

       從這段話中，從100%這個字眼我讀出了作者堅定的語氣，自信的情感。於是我立馬讓運營小哥檢視當時他申請微信支付用的簽名，結果一對證，我c...，好，穩定下情緒，果然真是簽名不對，當時給了一個dubug的簽名，後面我讓他換成release的簽名，沒換過來。好在微信開放平臺是支援修改的，而且即時生效。這下應該沒問題了吧。。。 　　不可能的，不存在的，前方路漫漫。。這時候我的心態還是很好的。 　　依然還是螢幕閃了一下，一隻烏鴉帶著省略號飛過。。所以說凡事不要說什麼100%，接下來，繼續我們的爬坑之旅。 　　排除了許可權問題，包括appid，應用簽名這些都確定無誤，那麼問題應該就出在呼叫微信支付的那些引數上，首先引起我的注意的是sign這個欄位，於是來到了微信支付文件（使用第三方，最主要的還是要回歸到文件中來），微信支付文件直通車：微信支付開發文件        簡單描述下呼叫流程：

  • app端先呼叫自家後臺的支付介面，把金額，支付型別等一些引數傳過去
  • 後臺收到這些引數，去呼叫微信服務端統一下單介面，將金額，商戶訂單號等等這些傳給微信服務端，這時候微信服務端返回成功或失敗，成功會附帶sign，prepay_id等引數給我們後臺。
  • 後臺再將微信返回的這些引數返給app端，也就是上文配置中傳的那些引數。app端再把這些引數傳給微信。整個過程是不是一（fei）氣（chang）呵（dan）成（teng）

       那麼我們推測問題就出現在這些引數裡，讓我們一個一個來分析：

  • partnerId 商家ID，這個是申請微信支付的時候，微信分配的ID，直接獲取後臺返回即可，可以與運營小哥那邊再核對下。
  • prepayId 預支付訂單，微信服務端返給我們後臺的訂單，app端直接獲取後臺返回即可。
  • nonceStr 隨機數，沒什麼好說的，直接獲取後臺返回即可。
  • timeStamp 時間戳，這是個要小心的地方，之前我們後臺沒給我返回這個欄位，我自以為app端自己獲取即時時間戳即可，直接 結果錯了，必須使用後臺給的時間戳。你說這個鍋誰背，55開吧
  • package 文件上說直接寫死即可，package: 'Sign=WXPay'
  • sign 這是個大咖，當然計算工作交給後臺來做就行，網上看了幾篇文章說螢幕一閃，有可能就是sign計算錯誤，後臺小哥跟我講這個sign是微信返給他的，然後又直接返給我，emmmm，應該有點問題，再去文件看看：微信支付APP端開發步驟，裡邊第三部有四個字

商戶伺服器生成支付訂單，先呼叫【統一下單API】生成預付單，獲取到prepay_id後將引數再次簽名傳輸給APP發起支付。以下是調起微信支付的

是的，就是這四個字“再次簽名”，需要再次簽名！！所以我又讓後臺小哥處理完sign在發給我。 　　到此，我們把這些引數都給分析了一遍過去，這次要再閃一下我就...我就再找找其他原因，但是事實上，我的app已經成功調起了微信支付，並且成功回撥。 　　好了，這波總結進入尾聲了，是不是覺得我寫技術文章很囉嗦，就是囉嗦咋滴。不過說回來，還是總結下主題要義：

  • 檢查你的APPID，應用簽名是否正確
  • 檢查你的引數傳遞是否正確(包括欄位大小寫)，更多地與後臺進行除錯
  • 以上都確認OK了，重灌你的微信再試一遍

相關文章