重要聲明：本文章僅僅代表了作者個人對此觀點的理解和表述。讀者請查閱時持自己的意見進行討論。
目錄
本系列博文還包含了下面的博客：
- 【微信公衆號開發】一、運作及配置流程簡介
- 【微信公衆號開發】二、解析微信請求及響應消息
- 【微信公衆號開發】三、解析微信事件XML數據消息及響應
- 【微信公衆號開發】四、公衆號按鈕設置及自己的微信按鈕編輯器
- 【微信公衆號開發】五、微信網頁授權獲取用戶openId
- 【微信公衆號開發】六、微信JS的使用
- 【微信公衆號開發】七、微信JS需要注意的坑
- 【微信公衆號開發】八、微信JS發起支付（本文）
對於微信JS支付，如果你之前沒有對接過相關開發，你可能理解起來有一點困難。爲了明白這些開發起了什麼作用，必須要先弄清楚微信支付的業務流程，才能理解開發的目的。
一、支付業務流程
就和我們在商店裏面購物一樣，我們先要有一個商品，然後拿着這個商品去支付。而在互聯網上，我們先要有訂單，然後支付是爲這個訂單進行支付。常常自己的業務系統裏面有一個自己的訂單系統，當我們要爲自己的訂單系統中某訂單進行支付時，微信可不知道我們自己的訂單系統是如何運轉的，所以要在微信中使用微信進行支付，必須要先創建一個微信系統裏面的訂單，創建微信系統裏面的訂單時，是支持指定一部分自定義數據的，如果把這個自定義數據填寫爲自己的訂單系統裏面的標識符，這樣就可根據這個自定義數據確定我們自己的訂單是否支付了。
通常來說，創建一個微信系統中的訂單，這個操作稱之爲：“統一下單”。然後我們支付時其實就是在爲這個下好的單進行支付。下面來開一張業務流程圖：
現在你大體上知道了業務流程，所以開發起來疑問就會少很多。雖然流程看起來的卻簡單了，但實際上總是會遇到各種問題。這張圖忽略了一個很重要的元素，那就是“商戶”這個概念，下面我們來說說商戶。
1、商戶
微信公衆號實際上是不具備收款功能的，支持收款的是微信商戶，而微信商戶上可以綁定多個微信公衆號，在這些公衆號裏面進行的所有支付，錢其實最終都跑到商戶上去了。所以，如果你要做支付功能，先要必須由一個商戶，才能繼續下去，單純一個公衆號想用微信支付是不行的。創建和管理商戶你都可以到微信官方商戶地址去了解詳細信息。
二、開始開發
通過上述流程圖，你可知道，要支付前，先要進行統一下單，而統一下單這個操作是需要比較高的權限的，通常都是在後臺調用微信的下單接口，而不會直接在前端進行統一下單。意味着我們需要將這個統一下單接口在我們自己的後臺系統裏封裝一遍，暴露給自己的業務前端調用。
1、統一下單
由於支付最終是把錢支付到商戶裏面的，因此統一下單接口的參數和格式都和微信其他的接口(比如設置微信菜單接口)不太一樣。
接口地址：
統一下單接口地址："https://api.mch.weixin.qq.com/pay/unifiedorder"
請求方式
POST
請求參數
統一下單接口的參數是一個xml數據，不是json數據了，所以不能用平時常用的請求了。這是一個示列請求參數：
<xml>
<appid>wx242*****c43b</appid>
<attach>支付測試</attach>
<body>JSAPI支付測試</body>
<mch_id>10000100</mch_id>
<detail><![CDATA[{ "goods_detail":[ { "goods_id":"iphone6s_16G", "wxpay_goods_id":"1001", "goods_name":"iPhone6s 16G", "quantity":1, "price":528800, "goods_category":"123456", "body":"蘋果手機" }, { "goods_id":"iphone6s_32G", "wxpay_goods_id":"1002", "goods_name":"iPhone6s 32G", "quantity":1, "price":608800, "goods_category":"123789", "body":"蘋果手機" } ] }]]></detail>
<nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str>
<notify_url>http://xxxxx/pub_v2/pay/notify.v2.php</notify_url>
<openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>
<out_trade_no>1415659990</out_trade_no>
<spbill_create_ip>14.23.150.211</spbill_create_ip>
<total_fee>1</total_fee>
<trade_type>JSAPI</trade_type>
<sign>0CB01533B8C1EF103065174F50BCA001</sign>
</xml>
此接口的參數較多，建議到這裏查看詳細的參數說明。
2、封裝支付參數
當你下單完成後，你就可以在前端調起支付方法引導用戶進行支付了。不過爲了安全着想，可不是簡單的隨便一調用，支付界面就彈出來了。
要成功調起支付彈窗，需要一些加密參數，這些參數來自於上一步下單成功的微信訂單。當你下單成功後，你需要把這些字段封裝好並返還給前端：
timestamp： 後端生成一個當前時間戳(單位[秒])。
nonceStr: 隨機字符串，32位及以內的長度。
package：一段描述信息，格式：prepay_id=****。其中****表示統一下單成功得到的 prepay_id 值
signType: 加簽格式
paySign： 加簽結果
前端通過 wx.chooseWXPay 方法，傳入以上參數纔可以正常進行支付。而對於以上參數，需要通過後端把值全部計算出來。後端的大致實現流程就像這樣(下面是僞代碼)：
// 第一步、統一下單：
orderResult = post("https://api.mch.weixin.qq.com/pay/unifiedorder", "<xml>....</xml>");
// 第二步、根據下單結果封裝前端需要的參數
timestamp = System.now();
nonceStr = String.randomStr();
package = "prepay_id=" + orderResult.prepay_id;
signType = "MD5";
// 生成簽名，這個簽名使用MD5進行，待簽名的各個參數必須按參數名的 ASCII 嚴格排序。
// 這裏涉及了一些更多的參數：
// appId: 公衆號的appId
// timeStamp: 就是 上面的時間戳，不過要特別小心，這裏的S是大寫的，不能是小寫的。
// key：是公衆號綁定的商戶裏面的key值。
paySign = MD5("appId=" + appId + "&nonceStr=" + noncestr + "&package=" + packagestr + "&signType=" + singType + "&timeStamp=" + timestamp + "&key=" + key).toUpperCase();
// 第三步、將封裝好的數據返回給前端
response.write({
timestamp: timestamp,
nonceStr: nonceStr,
"package": package,
signType: signType,
paySign: paySign
});
3、js發起支付及注意
當前端順利的拿到統一下單返回並封裝好的支付參數時，就可以發起支付了。
wx.chooseWXPay({
timestamp: timestamp,
nonceStr: nonceStr,
"package": package,
signType: signType,
paySign: paySign
});
要特別注意，由於支付對安全級別要求比較高，如果這裏沒有彈出支付窗口，還有必要檢查一下商戶後臺，支付網頁所在的目錄必須配置到商戶後端的支付目錄裏面，否則也是無法支付的。而對於配置方法，傳統html頁面十分簡單，你的網頁在哪個目錄，你就配置你對應的目錄就好了，而如果你是單頁面應用，就應該根據不同路由模式填寫了，如果是history模式，則和傳統配置相同，如果是hash模式：
- 對於頁面
https://www.microanswer.cn/#/product如果要進行支付，則你應該配置：https://www.microanswer.cn/#/。 - 對於頁面
https://www.microanswer.cn/index.html#/product如果要進行支付，則你應該配置：
https://www.microanswer.cn/index.html#/。 - 如果你的頁面裏有些url即有index.html，有些又只有一個單獨的#，那你就乾脆把：
https://www.microanswer.cn/、https://www.microanswer.cn/#/、https://www.microanswer.cn/index.html#/全部配上去。
注意以上域名僅做示列，自己配置時要根據自己的域名來。
三、總結
微信支付其實理解了流程後不難開發，只要保證：統一下單正確、支付參數封裝正確、公賬號綁定的商戶正確、商戶後臺支付目錄配置正確基本上就不會出現問題了。