odeJs 微信公眾號(hào)功能開(kāi)發(fā),移動(dòng)端 H5頁(yè)面調(diào)用微信的支付功能。這幾天根據(jù)公司的需要使用 node 和 h5頁(yè)面調(diào)用微信的支付功能完成支付需求。現(xiàn)在把開(kāi)發(fā)過(guò)程重新捋一遍，以幫助更多的開(kāi)發(fā)者順利的完成微信支付功能的開(kāi)發(fā)。（微信暫時(shí)還沒(méi)有提供 node 的支付功能）

一.請(qǐng)求CODE

請(qǐng)求 code 的目的就是獲取用戶的 openid（用戶相對(duì)于當(dāng)前公眾號(hào)的唯一標(biāo)識(shí)） 和access_token，請(qǐng)求的API：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
此 api 需要注意幾個(gè)參數(shù)：

1.? appid公眾號(hào)的 appid，可以在公眾號(hào)中看到
2.? redirect_uri 自定義的微信回調(diào)地址， 微信會(huì)在你請(qǐng)求完上面的地址后跳轉(zhuǎn)到你定義的redirect_uri的地址， 帶著 code，此處的 redirect_url 需要 **url_encode** *php*， 如果你的程序是 node 則需要使用 **encodeURLComponent(url)**編碼
3.? response_type=code，這個(gè)沒(méi)什么好說(shuō)的就是固定的 response_type=code，詳細(xì)說(shuō)明可以查看微信官網(wǎng)的說(shuō)明
4.? scope=snsapi_userinfo，固定這樣寫(xiě)就好，詳細(xì)說(shuō)明可以查看微信官網(wǎng)的說(shuō)明
5.? state=STATE 固定這樣寫(xiě)就好，詳細(xì)說(shuō)明可以查看微信官網(wǎng)的說(shuō)明
6.? wechat_redirect 固定這樣寫(xiě)就好，詳細(xì)說(shuō)明可以查看微信官網(wǎng)的說(shuō)明
ps：官網(wǎng)鏈接：

二.通過(guò)code獲取access_token,openid

第一步已經(jīng)獲取到了 code 的值了， 那么接下來(lái)就需要通過(guò) code 來(lái)獲取 access_token,openid的值了，請(qǐng)求的 api?
API?https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code?
此處api 的參數(shù)說(shuō)明：

1.? appid 微信公眾號(hào) id，微信公眾號(hào)后臺(tái)獲取
2.? secret 微信公眾號(hào)的密鑰， 微信公眾號(hào)后臺(tái)獲取
3.? code， 第一步獲取用到的 code
4.? grant_type=authorization_code 固定就好

三.通過(guò)access_token調(diào)用接口

access_token 可以做后續(xù)的功能， 可以參考官方的例子：?
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&lang=zh_CN

四.網(wǎng)頁(yè)端調(diào)起支付API

看見(jiàn)這個(gè)是不是感覺(jué)快完事兒了， 只要網(wǎng)頁(yè)端調(diào)用微信支付功能就完事兒了？no，還差點(diǎn)?
在微信瀏覽器里面打開(kāi)H5網(wǎng)頁(yè)中執(zhí)行JS調(diào)起支付。接口輸入輸出數(shù)據(jù)格式為JSON。?
注意：WeixinJSBridge內(nèi)置對(duì)象在其他瀏覽器中無(wú)效。?
示例代碼如下：

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

看到上面的代碼， 那么想調(diào)用微信的支付功能需要傳遞參數(shù)，

{
 "appId" ： "wx2421b1c4370ec43b", //公眾號(hào)名稱，由商戶傳入 
 "timeStamp"：" 1395712654",  //時(shí)間戳，自1970年以來(lái)的秒數(shù) 
 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 
 "package" ： "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" ： "MD5",  //微信簽名方式： 
 "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
}

參數(shù)說(shuō)明：

1. appId //公眾號(hào)名稱，由商戶傳入
2. timeStamp //時(shí)間戳，自1970年以來(lái)的秒數(shù) 此處需要特別的注意一下，需要是字符串的時(shí)間戳格式， 意思就是必須就“” 引號(hào)
3. nonceStr //隨機(jī)串 32位的， 隨后會(huì)提供方法
4. signType // 微信簽名方式： MD5
5. paySign //微信簽名， 隨后說(shuō)
6. **package** //這個(gè)最重要， 充哪里獲取到的呢？ 接下來(lái)說(shuō)。
ps: 官網(wǎng)接口說(shuō)明
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

五.獲取package， 從微信的 統(tǒng)一下單 接口獲取prepay_id

官方 api：
https://api.mch.weixin.qq.com/pay/unifiedorder

請(qǐng)求參數(shù)一堆， 但是有一些不是必須的，下面是必須參數(shù)

{
 appid : APPID,
 attach : ATTACH,
 body : BODY,
 mch_id : MCH_ID,
 nonce_str: NONCE_STR,
 notify_url : NOTIFY_URL,// 微信付款后的回調(diào)地址
 openid : OPENID,
 out_trade_no : OUT_TRADE_NO ,//new Date().getTime(), //訂單號(hào)
 spbill_create_ip : SPBILL_CREATE_IP , //客戶端的 ip
 total_fee : TOTAL_FEE, //商品的價(jià)格， 此處需要注意的是這個(gè)價(jià)格是以分算的， 那么一般是元， 你需要轉(zhuǎn)換為 RMB 的元
 trade_type : 'JSAPI',
}

微信的統(tǒng)一下單接口要求傳遞的是 xml 的數(shù)據(jù)， 而且數(shù)據(jù)還需要簽名， 那么首先吧數(shù)據(jù)簽名。
簽名規(guī)則可以參考微信給出的簽名規(guī)則（簽名方法一會(huì)給出）
微信官方簽名規(guī)則：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

生成簽名后需要吧數(shù)據(jù)組裝為xml 的格式：

var body = &#39;<xml> &#39; +
 &#39;<appid>&#39;+config.wxappid+&#39;</appid> &#39; +
 &#39;<attach>&#39;+obj.attach+&#39;</attach> &#39; +
 &#39;<body>&#39;+obj.body+&#39;</body> &#39; +
 &#39;<mch_id>&#39;+config.mch_id+&#39;</mch_id> &#39; +
 &#39;<nonce_str>&#39;+obj.nonce_str+&#39;</nonce_str> &#39; +
 &#39;<notify_url>&#39;+obj.notify_url+&#39;</notify_url>&#39; +
 &#39;<openid>&#39;+obj.openid+&#39;</openid> &#39; +
 &#39;<out_trade_no>&#39;+obj.out_trade_no+&#39;</out_trade_no>&#39;+
 &#39;<spbill_create_ip>&#39;+obj.spbill_create_ip+&#39;</spbill_create_ip> &#39; +
 &#39;<total_fee>&#39;+obj.total_fee+&#39;</total_fee> &#39; +
 &#39;<trade_type>&#39;+obj.trade_type+&#39;</trade_type> &#39; +
 &#39;<sign>&#39;+obj.sign+&#39;</sign> &#39; + // 此處必帶簽名， 否者微信在驗(yàn)證數(shù)據(jù)的時(shí)候是不通過(guò)的
 &#39;</xml>&#39;;

接下來(lái)就是請(qǐng)求 api 獲取prepay_id的值了， 將上面得到的 xml 數(shù)據(jù)請(qǐng)求下面的 api 發(fā)送給微信， 微信驗(yàn)證數(shù)據(jù)沒(méi)問(wèn)題后會(huì)放回你想要的值。
api ： https://api.mch.weixin.qq.com/pay/unifiedorder

六. 獲取到了prepay_id是不是就可以在 h5 段直接調(diào)用微信的支付了么？ 答案是還不可以。

獲取到了prepay_id那么現(xiàn)在h5 呼起微信的支付功能的參數(shù)是這樣的：

{
 "appId" ： "wx2421b1c4370ec43b", //公眾號(hào)名稱，由商戶傳入 
 "timeStamp"：" 1395712654",  //時(shí)間戳，自1970年以來(lái)的秒數(shù) 
 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 
 "package" ： "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" ： "MD5",  //微信簽名方式：
}

有了這樣的參數(shù)， 那么你還需要吧所有參與的參數(shù)做簽名。簽名規(guī)跟上面的一樣，生成了簽名后需要吧簽名的參數(shù) paySign 賦給h5 呼起微信的支付功能的參數(shù)（也就是微信的簽名不參與簽名的生成）
最后的參數(shù)是這樣子的：

{
 "appId" ： "wx2421b1c4370ec43b", //公眾號(hào)名稱，由商戶傳入 
 "timeStamp"：" 1395712654",  //時(shí)間戳，自1970年以來(lái)的秒數(shù) 
 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 
 "package" ： "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" ： "MD5",  //微信簽名方式：
 "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名
}

如果你的各個(gè)環(huán)節(jié)都沒(méi)有問(wèn)題， 那么得到了這樣參數(shù)后你就可以正常的調(diào)用起微信的支付功能， 跟原生的功能是沒(méi)有任何的差別的，（估計(jì)你現(xiàn)在的心里也特高興吧， 沒(méi)有 app 竟然可以使用 app 的功能，就是這么的神奇）。

七.支付完成的回調(diào)

微信支付完了后會(huì)在 h5 頁(yè)面的微信支付的回調(diào)函數(shù)里面放回值，
res.err_msg == "get_brand_wcpay_request：ok" ，這樣就是成功了， 但是不是就完事兒了呢 ？ 也不是，為什么呢？ 微信真的收到錢了么？ 收到的錢是不是你傳遞給微信的值呢 ？你還需要將支付的結(jié)果寫(xiě)數(shù)據(jù)庫(kù)什么的，這些都是未知。還記的在統(tǒng)一下單接口中有個(gè)必須參數(shù)就是 notify_url : NOTIFY_URL,// 微信付款后的回調(diào)地址 這個(gè)地址是用戶傳遞給微信的， 微信在收到用戶的付款后會(huì)以 post 的方式請(qǐng)求這個(gè)接口，微信會(huì)傳遞用戶付款的信息過(guò)來(lái)， 不過(guò)是 xml 格式的。
類系這樣的 xml 格式：

<xml>
 <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
 <attach><![CDATA[支付測(cè)試]]></attach>
 <bank_type><![CDATA[CFT]]></bank_type>
 <fee_type><![CDATA[CNY]]></fee_type>
 <is_subscribe><![CDATA[Y]]></is_subscribe>
 <mch_id><![CDATA[10000100]]></mch_id>
 <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str>
 <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid>
 <out_trade_no><![CDATA[1409811653]]></out_trade_no>
 <result_code><![CDATA[SUCCESS]]></result_code>
 <return_code><![CDATA[SUCCESS]]></return_code>
 <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign>
 <sub_mch_id><![CDATA[10000100]]></sub_mch_id>
 <time_end><![CDATA[20140903131540]]></time_end>
 <total_fee>1</total_fee>
 <trade_type><![CDATA[JSAPI]]></trade_type>
 <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id>
</xml>

根據(jù)自己的業(yè)務(wù)邏輯解析這個(gè) xml 格式的數(shù)據(jù)就好了。
注意：這里你在獲取到數(shù)據(jù)后微信需要得到你的回應(yīng)， 如果你一直不回應(yīng)微信， 微信會(huì)請(qǐng)求你好幾次， 這樣估計(jì)你的邏輯會(huì)有問(wèn)題吧，所以你需要給微信返回 xml 的格式的 回應(yīng)。

<xml>
 <return_code><![CDATA[SUCCESS]]></return_code>
 <return_msg><![CDATA[OK]]></return_msg>
</xml>

小坑：node ，express 框架開(kāi)發(fā)， 如果你在微信的支付成功后的回調(diào)中沒(méi)有獲取到任何 xml 的值， 那么你需要安裝一組件：body-parser-xml， 你可以使用 npm install body-parser-xml --save 安裝， 在 app.js 里面require('body-parser-xml')(bodyParser);,使用中間件的方式

// 解決微信支付通知回調(diào)數(shù)據(jù)
app.use(bodyParser.xml({
 limit: '2MB', // Reject payload bigger than 1 MB
 xmlParseOptions: {
 normalize: true, // Trim whitespace inside text nodes
 normalizeTags: true, // Transform tags to lowercase
 explicitArray: false // Only put nodes in array if >1
 }
}));

這樣你就可以正常的獲取到微信的 xml 數(shù)據(jù)了。

使用方法：

pay.getAccessToken({
 notify_url : 'http://demo.com/', //微信支付完成后的回調(diào)
 out_trade_no : new Date().getTime(), //訂單號(hào)
 attach : '名稱',
 body : '購(gòu)買信息',
 total_fee : '1', // 此處的額度為分
 spbill_create_ip : req.connection.remoteAddress,
 }, function (error, responseData) {
 res.render('payment', {
  title : '微信支付',
  wxPayParams : JSON.stringify(responseData),
  //userInfo : userInfo
 });
 });

就到這里吧， 感覺(jué)也差不多了。如有不對(duì)的地方還請(qǐng)指正。

更多nodejs微信公眾號(hào)支付開(kāi)發(fā)相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！