2. 程式人生 > >一次痛苦又甜蜜的微信支付踩坑之旅

一次痛苦又甜蜜的微信支付踩坑之旅

阿新 • • 發佈：2018-03-20
call utf-8 客戶 打開 區分 AD times jpg 運算

凡是和錢打交道的事，沒有一樣是容易的。這是我第一次接觸微信支付，發現網上還是有很多同學在求助，XXX了怎麽辦？XXX是什麽情況？為了幫助更多的小夥伴脫離“苦海”，我決定寫下這次的踩坑之旅，給更多的人幫助。

介紹

微信支付方式分為刷卡支付、公眾號支付、掃碼支付、APP支付、H5支付、小程序支付。

先從應用場景來各自說一說，這樣，能夠最快的判斷出應該選擇哪一種支付。

刷卡支付：使用掃描設備（掃描槍）多見於超市、便利店使用 公眾號支付：嵌入公眾號的H5頁面 掃碼支付：用戶打開“微信掃一掃”，掃描商戶的二維碼並支付 APP支付：外部APP應用，用戶觸發支付時，轉到微信內完成支付 H5支付：非微信內置瀏覽器請求微信支付 小程序支付：用戶在微信小程序中使用微信支付背景

我們公司申請的是微信服務號，需要微信支付的是嵌入服務號內部的網頁，所以根據介紹，應該選擇“公眾號支付”。

開發步驟

首先不要被微信支付的開發嚇著，其實它很簡單。先仔細看公眾號支付的文檔，看不懂的多看幾遍，還看不懂的，動手操作一下，試一試。

文檔在此：
pay.weixin.qq.com/wiki/doc/ap…

步驟一：統一下單

跟著文檔，咱一點點來，搞明白每一步是為什麽，就不會迷迷糊糊搞不清楚了。

首先說一下，這個接口是後臺需要完成的，這個接口的目的就是獲取prepay_id,它是預支付交易回話標識。將prepay_id傳給前臺，前臺調用js-sdk，這屬於步驟二的範圍了，一會講。

接口鏈接

URL地址：api.mch.weixin.qq.com/pay/unified…

在文檔中說明了，必須使用post 方法請求微信給的接口鏈接，傳入的數據也必須是xml格式，返回的也是xml的。醉了？不要醉，微信是這樣的，支付寶也是這樣的。手動微笑，接受吧。

接著來。

簡單粗暴貼代碼：

  1. // ‘/addOrder‘是留給前臺的調用接口
  2. router.post(‘/addOrder‘,(req,res)=>{
  3. const addOrderUrl = ‘https://api.mch.weixin.qq.com/pay/unifiedorder‘;
  4. var client_ip = "";
  5. client_ip = req.body.ipaddr;
  6. var appid = "1234567890"; // 服務號|公眾號的appid
  7. var body = "商品簡單描述-測試"; // 商品簡單描述
  8. var mch_id= "1234567890"; // 商戶號，申請微信支付，騰訊給的商戶號
  9. // var device_info = "WEB";
  10. var nonce_str = getRanId(32); // 隨機字符串
  11. var out_trade_no = "" +new Date().getTime() + Math.floor( Math.random() * 10 ); //商戶訂單號
  12. var total_fee = req.body.total_fee; //支付金額，單位：分
  13. var sign = "";
  14. var notify_url = "http://123.456.789"; //異步接收微信支付結果通知的回調地址
  15. var trade_type = "JSAPI"; // 交易類型
  16. var openid = req.session.openId;
  17. console.log(openid);
  18. var stringA = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce_str}&notify_url=${notify_url}&openid=${openid}&out_trade_no=${out_trade_no}&spbill_create_ip=${client_ip}&total_fee=${total_fee}&trade_type=${trade_type}`;
  19. var stringSighTemp = stringA+"&key=****#####jiaoyuguihuayuan----***"; //32位的商戶key,自定義的，這裏為了隱私，我用的特殊符號給你們展示
  20. sign = md5(stringSighTemp).toUpperCase();
  21. var xml = `<xml>
  22. <appid>${appid}</appid>
  23. <body>${body}</body>
  24. <mch_id>${mch_id}</mch_id>
  25. <nonce_str>${nonce_str}</nonce_str>
  26. <notify_url>${notify_url}</notify_url>
  27. <openid>${openid}</openid>
  28. <out_trade_no>${out_trade_no}</out_trade_no>
  29. <spbill_create_ip>${client_ip}</spbill_create_ip>
  30. <total_fee>${total_fee}</total_fee>
  31. <trade_type>${trade_type}</trade_type>
  32. <sign>${sign}</sign>
  33. </xml>`;
  34. var Res = res;axios({
  35. method: ‘post‘,
  36. url: addOrderUrl,
  37. data: xml,
  38. responseType: ‘text/xml‘,
  39. headers: {
  40. ‘Content-Type‘: ‘text/xml‘
  41. }
  42. }).then( res=>{
  43. console.log(res)
  44. Res.send(res.data)
  45. }).catch( err=>{
  46. console.log( err)})
  47. })
復制代碼

說明

client_ip 參數 是客戶端的ip地址，本來我是在後臺獲取客戶端ip地址的，因為我們使用了nginx代理，req.ip 返回的都是 ::ffff:127.0.0.1 這是IPV6格式的字符串。網上有一個答案對此做出了解釋： stackoverflow.com/questions/2…

在這裏，我用的一個網上的腳本在前臺獲取的， http://pv.sohu.com/cityjson?ie=utf-8
使用方法： window.ipaddr = returnCitySN[‘cip’];
其他的參數，都是參考微信支付的要求去寫的。

出現的錯誤

XML格式錯誤

技術分享圖片

而查看文檔，原因是這樣的

技術分享圖片

我：#&(%#@+%)，也不給個詳細點的說明…

這種錯誤需要“頓悟”，我突然發現了我的錯誤。是我理解錯了！我給body標簽加了一個 導致我的xml格式錯誤，其實是有detail字段才需要添加 <[CDATA[]]>， 其他的不需要。

我：咳咳，低級錯誤。註意看文檔，按照要求來，既不多添什麽，也不要少什麽。

我把<[CDATA[]]>去掉之後，發現果真是這個原因，不再出現XML格式錯誤了，然而，還是高興的太早，因為它報了簽名錯誤。呵呵呵~

簽名錯誤

技術分享圖片

文檔中說的簽名計算很嚴格：

第一步，設所有發送或者接收到的數據為集合M，將集合M內非空參數值的參數按照參數名ASCII碼從小到大排序（字典序），使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串stringA。

特別註意以下重要規則：
第一步，設所有發送或者接收到的數據為集合M，將集合M內非空參數值的參數按照參數名ASCII碼從小到大排序（字典序），使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串stringA。

參數名ASCII碼從小到大排序（字典序）；

如果參數的值為空不參與簽名；

參數名區分大小寫； （公眾號支付全是小寫）

驗證調用返回或微信主動通知簽名時，傳送的sign參數不參與簽名，將生成的簽名與該sign值作校驗。

微信接口可能增加字段，驗證簽名時必須支持增加的擴展字段

第二步，在stringA最後拼接上key得到stringSignTemp字符串，並對stringSignTemp進行MD5運算，再將得到的字符串所有字符轉換為大寫，得到sign值signValue。

key設置路徑：微信商戶平臺(pay.weixin.qq.com)–>賬戶設置–>API安全–>密鑰設置

這裏我查閱了一些資料，看到過有這樣幾種錯誤情況：
key 看錯了，這裏應該寫商戶的key,而這個key 是用戶手動設置的，長32位。註意：自己保存一份，因為設置好了之後是沒法打開查看的。

技術分享圖片

還有一種錯誤，我覺得很離譜啊，body裏面不能有中文，然而，我把body中的文字改為英文，發現並不能改變現狀，其實用中文是可以的。

…

總之，找到的這些錯誤，通通對我的情況沒用！

然後這又需要“頓悟”，原來stringA字符串我用了換行符把很長的字符隔開，這導致換行符被轉換為Ascall碼中的 \n 寫進了簽名裏面，所以，sign錯誤，所以要麽，把換行符通通去掉，要麽用“”連接，舍棄。我把換行都去掉之後，就沒有簽名錯誤了。

當當當當 ~

技術分享圖片

終於完成了第一步，後臺成功的返回了我們需要的prepay_id

這裏為了安全，對於返回sign，和發送的sign進行對比，完全相等之後，才能把結果返回給前臺。

步驟二：調用微信js-sdk接口

微信支付

發起一個微信支付請求

前臺收到的是xml數據，要先解析一下，得到prepay_id

然後調用微信支付js-sdk，為了大家少走一些彎路，我先來正確的寫法，關鍵步驟如下：

  1. var {prepay_id,appid} = getInfo(res.data); //從後臺數據中獲取appid 和 prepay_id
  2. nonceStr = getRanId(32);
  3. timeStamp = new Date().getTime();
  4. var stringA = "appId="+appid+"&nonceStr="+nonceStr+"&package=prepay_id="+prepay_id+"&signType=MD5&timeStamp="+timeStamp;
  5. var stringSignTemp = stringA+"&key=****#####jiaoyuguihuayuan----***";
  6. paySign = md5(stringSignTemp).toUpperCase();
  7. window.wx.chooseWXPay({
  8. timestamp: timeStamp, // 支付簽名時間戳，註意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
  9. nonceStr: nonceStr, // 支付簽名隨機串，不長於 32 位
  10. package: "prepay_id=" + prepay_id, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
  11. signType: ‘MD5‘, // 簽名方式，默認為‘SHA1‘，使用新版支付需傳入‘MD5‘
  12. paySign: paySign, // 支付簽名
  13. success: function (res) {
  14. // 支付成功後的回調函數
  15. console.log(res)
  16. },
  17. fail: function(err){
  18. console.log(err)
  19. }});
復制代碼

備註：prepay_id 通過微信支付統一下單接口拿到，paySign 采用統一的微信支付 Sign 簽名生成方法，註意這裏 appId 也要參與簽名，appId 與 config 中傳入的 appId 一致，即最後參與簽名的參數有appId, timeStamp, nonceStr, package, signType。

註意，我要講個坑點~

調用js-sdk時，簽名中的字段都是小駝峰的寫法，timeStamp是這樣寫的，但是wx.config中，timestamp 是全小寫的，所以，親們，千萬不要搞錯了，我在這裏就被坑了好一會呢。

寫完簽名之後，當你用微信web開發者工具去測試的話，就會看到，“不支持模擬”這樣的提示。這個時候，不要猶豫，直接上真機去測試，這並不是我們的程序出現了問題。

小tips: 在真機上，我們是沒有辦法看到console出的一些調試信息，所以，要想個辦法，可以用alert，也可以把調試信息打印在屏幕上面，我選擇打印在屏幕上。這裏要說一些，微信給的文檔沒有那麽齊全，有一些是要試試才指導的，比如wx.config中的success和fail函數，參數信息怎麽打印，其實是res.errMsg和err.errMsg.

上面我說的這些你都註意到了，但是微信支付的控件你依然調動不起來的話，可能是微信商戶平臺的開發配置出現了問題，在 產品中心-開發配置-支付配置-公眾號支付 中進行配置，配置的時候，註意一定要到最後一級目錄，比如我要在cms.123.456/book/list/index.html頁面中去進行微信支付，那麽你的配置應該是 cms.123.456/book/list/

好了，開發中基本上所有的坑都提到了，這是建立在你配置沒有出錯的情況下。接下來，看看到底能不能真的支付。

完成

技術分享圖片

大功告成，讓我想起了，最近流行的一句話，你這磨人的小妖精，微信支付！

希望能給你們帶來幫助~

一次痛苦又甜蜜的微信支付踩坑之旅

相關推薦

一次痛苦又甜蜜的微信支付踩坑之旅

call utf-8 客戶 打開 區分 AD times jpg 運算 凡是和錢打交道的事，沒有一樣是容易的。這是我第一次接觸微信支付，發現網上還是有很多同學在求助，XXX了怎麽辦？XXX是什麽情況？為了幫助更多的小夥伴脫離“苦海”，我決定寫下這次的踩坑之旅，給更多的人幫助

微信支付趟坑之旅之單頁面應用

        年初產品引入了微信支付到現在不到半年的時間，一直沒有過太大的坑爹經歷，自認為微信支付也能hold住了，沒想到上週還是被微信支付團隊的同學狠狠的擺了一道。在這裡留個記錄，希望同入此坑的同學能儘快爬上來。 背景：        上半年上線了商城的微信支付，此專案

記一次修改php.ini不生效的踩坑之旅

前言 想給公司的測試環境裝一個xdebug，按照以往的方式（之前已經裝過很多次了），編譯安裝了xdebug，然後修改php.ini，將xdebug擴充套件加進去，可是，不論怎麼改，都不生效，xdebug就是沒有。 首先，我想到的是xdebug版本不對，由於之前有過這種經驗，xdebug安裝了

微信支付踩坑

公司專案需要，需要接入第三方支付，前前後後也搞了很久。雖然微信公眾平臺文件已經寫得很清楚了，但是還是記錄一下整個接入的流程。 openid openid是微信使用者在公眾號appid下的唯一使用者標識（appid不同，則獲取到的openid就不同,所以不同的公眾號下有不同的openi

安卓微信支付踩坑，對剛接觸安卓開發的小白絕對有幫助

剛接觸安卓開發，就遇到了專案需要接入微信支付以及退款功能，根據自己iOS開發的經驗，確定如下幾個步驟，一步一步的來，有不對的地方多擔待。 1.配置微信支付的環境，下載微信官方提供demo，把裡面需要配置的包拖進你的當前工程，這裡說一下，微信官方的demo就是屎

微信分享踩坑之道

1.引入JS檔案 在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js 備註：支援使用 AMD/CMD 標準模組載入方法載入 2.通過config介面注入許可權驗證配置

記一次微信支付爬坑

微信支付-那些年填過的坑 由於最近專案需要用到微信支付，所以需要研究微信支付相關內容，微信支付本身不是什麼問題，只是過程比較繁瑣，前提工作需要準備充足方可開工，不然你會一個坑接著一坑的掉。 由於業務需要，需要pc端掃碼支付（掃碼支付）、微信公眾號端支付（公眾號支付）、ap

一文帶你瞭解微信/支付寶支付的相關概念

今天寫了一篇非技術文，需求來源於老大的老大，老老大。 這偏文章用以說明微信/支付寶相關引數之間錯綜複雜的關係，所有資料來自微信/支付寶官網，以及相關銀聯給的微信/支付寶對接文件。 嘿嘿，如果同行的小夥伴，也有這個疑惑，希望本篇文章幫你解惑。 ## 微信 名詞解釋： - **appid**：公眾號、小

談談那些年微信支付踩過的坑

很早的時候就想寫這篇文章了，作為BAT中的一員，還真不想吐槽它，免得被人身攻擊。有人說，微信支付很簡單嘛，官網有例子，網上也有現成的例子，不過誰用誰知道，本人也是在深入瞭解之後，真心覺得微信支付裡的坑太多，BAT的開發們太敷衍了事，結果給不少的其他開發者帶來諸多麻煩。我在這裡做個稍全一點的介紹，儘

微信支付踩過的坑

在微信體系中，支付也算是比較重要的一環，這裡記錄一下工作中微信支付--公眾號支付踩過的一些坑。 問題： errorMsg ： "chooseWXPay:fail, the permission value is offline verifying" 安卓沒有提示，ios會

微信支付趟坑記

    最近因為專案需求做了支付，暫時集成了支付寶支付和微信的支付，涉及到PC端Web網頁支付，和手機APP支付。支付寶的整合相對容易一些，文件齊全，描述規範，也便於理解，在此就不再累述；但是微信支付真的就是呵呵噠了，文件及其簡單，有等於沒有，沙箱測試環境問題

微信支付H5介面之獲取客戶端正確的IP

微信支付H5介面，就是在移動端非微信公眾號、微信瀏覽器，移動端的其他瀏覽器喚起微信支付。 症狀：“網路環境未能通過安全驗證，請稍後再試” 商戶側統一下單傳的終端IP(spbill_create_ip)與使用者實際調起支付時微信側檢測到的終端IP不一致導致的，這個問題一般是商戶在統一下單時沒有

對接微信支付退款證書之坑

背景 專案需要直接對接微信支付，實現小程式支付和退款功能，支付不需要證書，但是退款的話需要證書支援 語言:php 開發環境win 測試環境centos 坑點1：路徑問題 網上查到比較多的答案是在Linux系統下采用虛擬路徑，Windows系統下采用絕對路

H5微信支付的坑

純H5呼叫微信支付有很多需要注意的地方，1.繫結微信支付安全域名： 綁定了安全域名並不是在這個域名下的所有連線都可以喚起微信支付，這裡有一個嚴格的限制，就是繫結的這個域名下的不超過1級子目錄的頁面才有許可權喚起微信支付  舉個栗子： 安全域名：www.aaa.com/ www

C# MVC 微信支付教程系列之公眾號支付程式碼

今天，我們接著講微信支付的系列教程，前面，我們講了這個微信紅包和掃碼支付。現在，我們講講這個公眾號支付。公眾號支付的應用環境常見的使用者通過公眾號，然後再通過公眾號裡面的菜單鏈接，進入公眾號的商城，然後在裡面完成購買和支付功能，我們可以看看官方對這個公眾號支付的場景的解釋，連

微信支付各種坑--終章（-1&-2）

         001.微信支付一路坑，走過一坑又一坑，總之，微信支付太過於坑爹，詳細大家也或多或少遇到過，一路艱辛終於完美繼承微信支付，下面進入填坑之路！！！         002.一些微信平臺的

iOS整合微信支付的坑，讓人摸不透的sign

整合iOS微信支付時遇到一個坑，記錄一下。 由於公司業務需求，需要在現有App中新增微信支付功能。於是就開始整合微信的支付功能，先看了一遍官方的文件。然後當然是看官方提供的Demo工程了，於是就下了官方提供的示例工程：（https://pay.weixin.qq.com/

PHP微信APP支付，下單，處理非同步回撥——————微信支付這個坑

1.下單 其中陣列轉換xml格式，curl傳送請求，xml格式轉換成陣列可單獨封裝成函式。     public function index() {         $order = [             'appid'=>'123456',     

小程式wepy踩坑之旅（三）----- 微信小程式wepy左滑刪除特效原始碼

我寫在了shop_cart.wepy裡，原始碼就在下面註釋很詳細，直接拷貝到新建的.wpy就可以使用 <template> <view class="item-box"> <view class="items">

騰訊雲佈道師：一次效能峰值提升10W的DB調優之旅

作者：張青林，騰訊雲佈道師、MySQL架構師，隸屬騰訊TEG-基礎架構部-CDB核心開發團隊，專注於MySQL核心研發&相關架構工作，有著服務多個10W級QPS客戶的資料庫優化及穩定性維護經驗。 騰訊雲資料庫團隊：繼承騰訊資料庫團隊十多年海量儲存的內部資料庫運營和運維經驗，推出一系列高效能關