odeJs 微信公眾號功能開發(fā),行動端 H5頁呼叫微信的支付功能。這幾天根據(jù)公司的需要使用 node 和 h5頁面呼叫微信的支付功能完成支付需求。現(xiàn)在把開發(fā)過程重新捋一遍,以幫助更多的開發(fā)者順利的完成微信支付功能的開發(fā)。 (微信暫時還沒有提供node 的支付功能)
一.請求CODE
請求code 的目的就是獲取用戶的openid(用戶相對於當(dāng)前公眾號的唯一標(biāo)識) 和access_token,請求的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 需要注意幾個參數(shù):中看到
3.? response_type=code,這個沒什麼好說的就是固定的response_type=code,詳細(xì)說明可以查看微信官網(wǎng)的說明
4.? scope =snsapi_userinfo,固定這樣寫就好,詳細(xì)說明可以查看微信官網(wǎng)的說明
5.? state=STATE 固定這樣寫就好,詳細(xì)說明可以查看微信官網(wǎng)的說明
6.? wechat_redirect 固定這樣寫就好,詳細(xì)說明可以查看微信官網(wǎng)的說明
ps:官網(wǎng)連結(jié):
二.透過code取得access_token,openid
第一步已經(jīng)取得了code 的值了, 那麼接下來就需要透過code 來取得access_token,openid的值了,請求的api?
API?https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code?api 的參數(shù)說明:此處
,微信公眾號後臺取得
2.? secret 微信公眾號的密鑰, 微信公眾號後臺取得
4.? grant_type=authorization_code 固定就好
4.? grant_type=authorization_code 固定就好
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&idopenopenument?action=dir_list&t=resource/res_list&verify=1&idopen
四.網(wǎng)頁端調(diào)起支付API
看見這個是不是感覺快完事兒了, 只要網(wǎng)頁端調(diào)用微信支付功能就完事兒了? no,差點?
在微信瀏覽器裡面開啟H5網(wǎng)頁中執(zhí)行JS調(diào)起付款。介面輸入輸出資料格式為JSON。?注意:WeixinJSBridge內(nèi)建物件在其他瀏覽器中無效。
範(fàn)例程式碼如下:
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 "timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù) "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信簽名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判斷前端返回,微信團隊鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對可靠。 } ); } 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(); }
看到上面的程式碼, 那麼想呼叫微信的支付功能需要傳遞參數(shù),
{ "appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 "timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù) "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信簽名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }
參數(shù)說明:
1. appId //公眾號碼名稱,由商家傳入?
2. timeStamp //時間戳,自1970年以來的秒數(shù)? 此處需要特別的注意一下,需要是字符串的時間戳格式, 意思就是必須就“” 引號3. nonceStr //隨機串??? 32位的, 隨後會提供方法
4. signType // 微信簽名方式: MD5
5. paySign //微信簽名, 隨後說
6. **package**?? //這最重要, 充哪裡獲取到的呢? 接下來說。
ps: 官網(wǎng)介面說明?
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
請求參數(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(), //訂單號 spbill_create_ip : SPBILL_CREATE_IP , //客戶端的 ip total_fee : TOTAL_FEE, //商品的價格, 此處需要注意的是這個價格是以分算的, 那么一般是元, 你需要轉(zhuǎn)換為 RMB 的元 trade_type : 'JSAPI', }
微信的統(tǒng)一下單介面要求傳遞的是xml 的數(shù)據(jù), 而且資料還要簽名, 那麼首先吧資料簽名。
微信官方簽章規(guī)則可以參考微信給的簽章規(guī)則(簽章方法一會給出)?微信官方簽章規(guī)則:?
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter= 4_3
生成簽章後需要吧資料組裝為xml 的格式:
var body = '<xml> ' + '<appid>'+config.wxappid+'</appid> ' + '<attach>'+obj.attach+'</attach> ' + '<body>'+obj.body+'</body> ' + '<mch_id>'+config.mch_id+'</mch_id> ' + '<nonce_str>'+obj.nonce_str+'</nonce_str> ' + '<notify_url>'+obj.notify_url+'</notify_url>' + '<openid>'+obj.openid+'</openid> ' + '<out_trade_no>'+obj.out_trade_no+'</out_trade_no>'+ '<spbill_create_ip>'+obj.spbill_create_ip+'</spbill_create_ip> ' + '<total_fee>'+obj.total_fee+'</total_fee> ' + '<trade_type>'+obj.trade_type+'</trade_type> ' + '<sign>'+obj.sign+'</sign> ' + // 此處必帶簽名, 否者微信在驗證數(shù)據(jù)的時候是不通過的 '</xml>';
接下來就是請求api 取得prepay_id的值了, 將上面得到的xml 資料請求下面的api 傳送給微信, 微信驗證資料沒問題後會放回你想要的數(shù)值。?
api :?https://api.mch.weixin.qq.com/pay/unifiedorder
六. 取得到了prepay_id是不是就可以在 h5 段直接調(diào)用微信的支付了麼??答案是還不可以。
獲取到了prepay_id那麼現(xiàn)在h5 呼起微信的支付功能的參數(shù)是這樣的:
{ "appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 "timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù) "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信簽名方式: }
有了這樣的參數(shù), 那么你還需要吧所有參與的參數(shù)做簽名。簽名規(guī)跟上面的一樣,生成了簽名后需要吧簽名的參數(shù) paySign 賦給h5 呼起微信的支付功能的參數(shù)(也就是微信的簽名不參與簽名的生成)
最后的參數(shù)是這樣子的:
{ "appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 "timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù) "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信簽名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }
如果你的各個環(huán)節(jié)都沒有問題, 那么得到了這樣參數(shù)后你就可以正常的調(diào)用起微信的支付功能, 跟原生的功能是沒有任何的差別的,(估計你現(xiàn)在的心里也特高興吧, 沒有 app 竟然可以使用 app 的功能,就是這么的神奇)。
七.支付完成的回調(diào)
微信支付完了后會在 h5 頁面的微信支付的回調(diào)函數(shù)里面放回值,
res.err_msg == "get_brand_wcpay_request:ok" ,這樣就是成功了, 但是不是就完事兒了呢 ? 也不是,為什么呢? 微信真的收到錢了么? 收到的錢是不是你傳遞給微信的值呢 ?你還需要將支付的結(jié)果寫數(shù)據(jù)庫什么的,這些都是未知。還記的在統(tǒng)一下單接口中有個必須參數(shù)就是 notify_url : NOTIFY_URL,// 微信付款后的回調(diào)地址 這個地址是用戶傳遞給微信的, 微信在收到用戶的付款后會以 post 的方式請求這個接口,微信會傳遞用戶付款的信息過來, 不過是 xml 格式的。
類系這樣的 xml 格式:
<xml> <appid><![CDATA[wx2421b1c4370ec43b]]></appid> <attach><![CDATA[支付測試]]></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ù)邏輯解析這個 xml 格式的數(shù)據(jù)就好了。
注意:這里你在獲取到數(shù)據(jù)后微信需要得到你的回應(yīng), 如果你一直不回應(yīng)微信, 微信會請求你好幾次, 這樣估計你的邏輯會有問題吧,所以你需要給微信返回 xml 的格式的 回應(yīng)。
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>
小坑:node ,express 框架開發(fā), 如果你在微信的支付成功后的回調(diào)中沒有獲取到任何 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(), //訂單號 attach : '名稱', body : '購買信息', total_fee : '1', // 此處的額度為分 spbill_create_ip : req.connection.remoteAddress, }, function (error, responseData) { res.render('payment', { title : '微信支付', wxPayParams : JSON.stringify(responseData), //userInfo : userInfo }); });
就到這里吧, 感覺也差不多了。如有不對的地方還請指正。
更多nodejs微信公眾號支付開發(fā)相關(guān)文章請關(guān)注PHP中文網(wǎng)!

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
