摘要：這是我第一次接觸微信支付，發(fā)現(xiàn)網(wǎng)上還是有很多同學(xué)在求助，了怎么辦是什么情況為了幫助更多的小伙伴脫離苦海，我決定寫下這次的踩坑之旅，給更多的人幫助。

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

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

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

刷卡支付：使用掃描設(shè)備（掃描槍）多見于超市、便利店使用

公眾號(hào)支付：嵌入公眾號(hào)的H5頁(yè)面

掃碼支付：用戶打開“微信掃一掃”，掃描商戶的二維碼并支付

APP支付：外部APP應(yīng)用，用戶觸發(fā)支付時(shí)，轉(zhuǎn)到微信內(nèi)完成支付

H5支付：非微信內(nèi)置瀏覽器請(qǐng)求微信支付

小程序支付：用戶在微信小程序中使用微信支付

我們公司申請(qǐng)的是微信服務(wù)號(hào)，需要微信支付的是嵌入服務(wù)號(hào)內(nèi)部的網(wǎng)頁(yè)，所以根據(jù)介紹，應(yīng)該選擇“公眾號(hào)支付”。

首先不要被微信支付的開發(fā)嚇著，其實(shí)它很簡(jiǎn)單。先仔細(xì)看公眾號(hào)支付的文檔，看不懂的多看幾遍，還看不懂的，動(dòng)手操作一下，試一試。

文檔在此：
https://pay.weixin.qq.com/wik...

步驟一：統(tǒng)一下單

跟著文檔，咱一點(diǎn)點(diǎn)來，搞明白每一步是為什么，就不會(huì)迷迷糊糊搞不清楚了。

首先說一下，這個(gè)接口是后臺(tái)需要完成的，這個(gè)接口的目的就是獲取prepay_id,它是預(yù)支付交易回話標(biāo)識(shí)。將prepay_id傳給前臺(tái)，前臺(tái)調(diào)用js-sdk，這屬于步驟二的范圍了，一會(huì)講。

接口鏈接
URL地址：https://api.mch.weixin.qq.com...

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

接著來。

簡(jiǎn)單粗暴貼代碼：

// "/addOrder"是留給前臺(tái)的調(diào)用接口
router.post("/addOrder",(req,res)=>{    
const addOrderUrl = "https://api.mch.weixin.qq.com/pay/unifiedorder";    
var client_ip = "";    
client_ip = req.body.ipaddr;    
var appid = "1234567890"; // 服務(wù)號(hào)|公眾號(hào)的appid    
var body = "商品簡(jiǎn)單描述-測(cè)試"; // 商品簡(jiǎn)單描述    
var mch_id= "1234567890"; // 商戶號(hào)，申請(qǐng)微信支付，騰訊給的商戶號(hào)    
// var device_info = "WEB";  
var nonce_str = getRanId(32); // 隨機(jī)字符串 
var out_trade_no = "" +new Date().getTime() + Math.floor( Math.random() * 10 ); //商戶訂單號(hào)
var total_fee = req.body.total_fee; //支付金額，單位：分    
var sign = "";    
var notify_url = "http://123.456.789"; //異步接收微信支付結(jié)果通知的回調(diào)地址    
var trade_type = "JSAPI"; // 交易類型    
var openid = req.session.openId;    
console.log(openid);    
var stringA = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce_str}¬ify_url=${notify_url}&openid=${openid}&out_trade_no=${out_trade_no}&spbill_create_ip=${client_ip}&total_fee=${total_fee}&trade_type=${trade_type}`;    
var stringSighTemp = stringA+"&key=****#####jiaoyuguihuayuan----***"; //32位的商戶key,自定義的，這里為了隱私，我用的特殊符號(hào)給你們展示   
sign = md5(stringSighTemp).toUpperCase();    
var xml = `      
${appid}      
${body}      
${mch_id}      
${nonce_str}      
${notify_url}     
${openid}     
${out_trade_no}    
${client_ip}     
${total_fee}  
${trade_type}    
${sign}    
`;
var Res = res;axios({  
    method: "post",   
    url: addOrderUrl,   
    data: xml,   
    responseType: "text/xml",   
    headers: {     
       "Content-Type": "text/xml" 
    }
 }).then( res=>{   
    console.log(res)  
    Res.send(res.data)
 }).catch( err=>{   
    console.log( err)})
})

說明

client_ip 參數(shù) 是客戶端的ip地址，本來我是在后臺(tái)獲取客戶端ip地址的，因?yàn)槲覀兪褂昧薾ginx代理，req.ip 返回的都是 ::ffff:127.0.0.1 這是IPV6格式的字符串。網(wǎng)上有一個(gè)答案對(duì)此做出了解釋： stackoverflow.com/questions/2…

在這里，我用的一個(gè)網(wǎng)上的腳本在前臺(tái)獲取的， http://pv.sohu.com/cityjson?i...
使用方法： window.ipaddr = returnCitySN[‘cip’];
其他的參數(shù)，都是參考微信支付的要求去寫的。

出現(xiàn)的錯(cuò)誤

XML格式錯(cuò)誤

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

我：#&(%#@+%)，也不給個(gè)詳細(xì)點(diǎn)的說明…

這種錯(cuò)誤需要“頓悟”，我突然發(fā)現(xiàn)了我的錯(cuò)誤。是我理解錯(cuò)了！我給body標(biāo)簽加了一個(gè) 導(dǎo)致我的xml格式錯(cuò)誤，其實(shí)是有detail字段才需要添加 <[CDATA[]]>， 其他的不需要。

我：咳咳，低級(jí)錯(cuò)誤。注意看文檔，按照要求來，既不多添什么，也不要少什么。

我把<[CDATA[]]>去掉之后，發(fā)現(xiàn)果真是這個(gè)原因，不再出現(xiàn)XML格式錯(cuò)誤了，然而，還是高興的太早，因?yàn)樗鼒?bào)了簽名錯(cuò)誤。呵呵呵~

簽名錯(cuò)誤

文檔中說的簽名計(jì)算很嚴(yán)格：
第一步，設(shè)所有發(fā)送或者接收到的數(shù)據(jù)為集合M，將集合M內(nèi)非空參數(shù)值的參數(shù)按照參數(shù)名ASCII碼從小到大排序（字典序），使用URL鍵值對(duì)的格式（即key1=value1&key2=value2…）拼接成字符串stringA。

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

◆ 參數(shù)名ASCII碼從小到大排序（字典序）；
◆ 如果參數(shù)的值為空不參與簽名；
◆ 參數(shù)名區(qū)分大小寫； （公眾號(hào)支付全是小寫）
◆ 驗(yàn)證調(diào)用返回或微信主動(dòng)通知簽名時(shí)，傳送的sign參數(shù)不參與簽名，將生成的簽名與該sign值作校驗(yàn)。
◆ 微信接口可能增加字段，驗(yàn)證簽名時(shí)必須支持增加的擴(kuò)展字段

第二步，在stringA最后拼接上key得到stringSignTemp字符串，并對(duì)stringSignTemp進(jìn)行MD5運(yùn)算，再將得到的字符串所有字符轉(zhuǎn)換為大寫，得到sign值signValue。

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

這里我查閱了一些資料，看到過有這樣幾種錯(cuò)誤情況：
key 看錯(cuò)了，這里應(yīng)該寫商戶的key,而這個(gè)key 是用戶手動(dòng)設(shè)置的，長(zhǎng)32位。注意：自己保存一份，因?yàn)樵O(shè)置好了之后是沒法打開查看的。

還有一種錯(cuò)誤，我覺得很離譜啊，body里面不能有中文，然而，我把body中的文字改為英文，發(fā)現(xiàn)并不能改變現(xiàn)狀，其實(shí)用中文是可以的。

…

總之，找到的這些錯(cuò)誤，通通對(duì)我的情況沒用！

然后這又需要“頓悟”，原來stringA字符串我用了換行符把很長(zhǎng)的字符隔開，這導(dǎo)致?lián)Q行符被轉(zhuǎn)換為Ascall碼中的 n 寫進(jìn)了簽名里面，所以，sign錯(cuò)誤，所以要么，把換行符通通去掉，要么用“”連接，舍棄。我把換行都去掉之后，就沒有簽名錯(cuò)誤了。

當(dāng)當(dāng)當(dāng)當(dāng) ~

終于完成了第一步，后臺(tái)成功的返回了我們需要的prepay_id

這里為了安全，對(duì)于返回sign，和發(fā)送的sign進(jìn)行對(duì)比，完全相等之后，才能把結(jié)果返回給前臺(tái)。

步驟二：調(diào)用微信js-sdk接口

微信支付

發(fā)起一個(gè)微信支付請(qǐng)求

前臺(tái)收到的是xml數(shù)據(jù)，要先解析一下，得到prepay_id

然后調(diào)用微信支付js-sdk，為了大家少走一些彎路，我先來正確的寫法，關(guān)鍵步驟如下：

var {prepay_id,appid} = getInfo(res.data); //從后臺(tái)數(shù)據(jù)中獲取appid 和 prepay_id
nonceStr = getRanId(32);
timeStamp = new Date().getTime();
var stringA = "appId="+appid+"&nonceStr="+nonceStr+"&package=prepay_id="+prepay_id+"&signType=MD5&timeStamp="+timeStamp;
var stringSignTemp = stringA+"&key=****#####jiaoyuguihuayuan----***";
paySign = md5(stringSignTemp).toUpperCase();
window.wx.chooseWXPay({    
timestamp: timeStamp, // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符    
nonceStr: nonceStr, // 支付簽名隨機(jī)串，不長(zhǎng)于 32 位    
package: "prepay_id=" + prepay_id, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）    
signType: "MD5", // 簽名方式，默認(rèn)為"SHA1"，使用新版支付需傳入"MD5"    
paySign: paySign, // 支付簽名 
success: function (res) {        
// 支付成功后的回調(diào)函數(shù)        
    console.log(res)   
 },   
fail: function(err){     
    console.log(err)  
}});

備注：prepay_id 通過微信支付統(tǒng)一下單接口拿到，paySign 采用統(tǒng)一的微信支付 Sign 簽名生成方法，注意這里 appId 也要參與簽名，appId 與 config 中傳入的
appId 一致，即最后參與簽名的參數(shù)有appId, timeStamp, nonceStr,
package, signType。

注意，我要講個(gè)坑點(diǎn)~

調(diào)用js-sdk時(shí)，簽名中的字段都是小駝峰的寫法，timeStamp是這樣寫的，但是wx.config中，timestamp 是全小寫的，所以，親們，千萬不要搞錯(cuò)了，我在這里就被坑了好一會(huì)呢。

寫完簽名之后，當(dāng)你用微信web開發(fā)者工具去測(cè)試的話，就會(huì)看到，“不支持模擬”這樣的提示。這個(gè)時(shí)候，不要猶豫，直接上真機(jī)去測(cè)試，這并不是我們的程序出現(xiàn)了問題。

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

上面我說的這些你都注意到了，但是微信支付的控件你依然調(diào)動(dòng)不起來的話，可能是微信商戶平臺(tái)的開發(fā)配置出現(xiàn)了問題，在產(chǎn)品中心-開發(fā)配置-支付配置-公眾號(hào)支付
中進(jìn)行配置，配置的時(shí)候，注意一定要到最后一級(jí)目錄，比如我要在cms.123.456/book/list/index.html頁(yè)面中去進(jìn)行微信支付，那么你的配置應(yīng)該是 cms.123.456/book/list/

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

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

希望能給你們帶來幫助~