nodejs微信公眾號支付開發
- 高洛峰原創
- 2017-01-04 16:52:002029瀏覽
odeJs 微信公眾號功能開發,行動端 H5頁呼叫微信的支付功能。這幾天根據公司的需要使用 node 和 h5頁面呼叫微信的支付功能完成支付需求。現在把開發過程重新捋一遍，以幫助更多的開發者順利的完成微信支付功能的開發。 （微信暫時還沒有提供node 的支付功能）
一.請求CODE
請求code 的目的就是獲取用戶的openid（用戶相對於當前公眾號的唯一標識） 和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 需要注意幾個參數：中看到
3. response_type=code，這個沒什麼好說的就是固定的response_type=code，詳細說明可以查看微信官網的說明
4. scope =snsapi_userinfo，固定這樣寫就好，詳細說明可以查看微信官網的說明
5. state=STATE 固定這樣寫就好，詳細說明可以查看微信官網的說明
6. wechat_redirect 固定這樣寫就好，詳細說明可以查看微信官網的說明
ps：官網連結：
二.透過code取得access_token,openid
第一步已經取得了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_codeapi 的參數說明：此處
，微信公眾號後台取得
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
四.網頁端調起支付API
看見這個是不是感覺快完事兒了， 只要網頁端調用微信支付功能就完事兒了？ no，差點
在微信瀏覽器裡面開啟H5網頁中執行JS調起付款。介面輸入輸出資料格式為JSON。注意：WeixinJSBridge內建物件在其他瀏覽器中無效。
範例程式碼如下：
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" ： "wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp"：" 1395712654", //时间戳，自1970年以来的秒数
"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();
}看到上面的程式碼， 那麼想呼叫微信的支付功能需要傳遞參數，
{
"appId" ： "wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp"：" 1395712654", //时间戳，自1970年以来的秒数
"nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //随机串
"package" ： "prepay_id=u802345jgfjsdfgsdg888",
"signType" ： "MD5", //微信签名方式：
"paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
}參數說明：
1. appId //公眾號碼名稱，由商家傳入
2. timeStamp //時間戳，自1970年以來的秒數 此處需要特別的注意一下，需要是字符串的時間戳格式， 意思就是必須就“” 引號3. nonceStr //隨機串 32位的， 隨後會提供方法
4. signType // 微信簽名方式： MD5
5. paySign //微信簽名， 隨後說
6. **package** //這最重要， 充哪裡獲取到的呢？ 接下來說。
ps: 官網介面說明
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
五.取得package， 從微信的統一下單介面取得prepay_id
官方api：
https://api.mch.weixin.qq.com/pay/unifiedorder
請求參數一堆， 但是有一些不是必須的，下面是必須參數
{
appid : APPID,
attach : ATTACH,
body : BODY,
mch_id : MCH_ID,
nonce_str: NONCE_STR,
notify_url : NOTIFY_URL,// 微信付款后的回调地址
openid : OPENID,
out_trade_no : OUT_TRADE_NO ,//new Date().getTime(), //订单号
spbill_create_ip : SPBILL_CREATE_IP , //客户端的 ip
total_fee : TOTAL_FEE, //商品的价格， 此处需要注意的是这个价格是以分算的， 那么一般是元， 你需要转换为 RMB 的元
trade_type : 'JSAPI',
}微信的統一下單介面要求傳遞的是xml 的數據， 而且資料還要簽名， 那麼首先吧資料簽名。
微信官方簽章規則可以參考微信給的簽章規則（簽章方法一會給出）微信官方簽章規則：
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> ' + // 此处必带签名， 否者微信在验证数据的时候是不通过的 '</xml>';
接下來就是請求api 取得prepay_id的值了， 將上面得到的xml 資料請求下面的api 傳送給微信， 微信驗證資料沒問題後會放回你想要的數值。
api ： https://api.mch.weixin.qq.com/pay/unifiedorder
六. 取得到了prepay_id是不是就可以在 h5 段直接調用微信的支付了麼？ 答案是還不可以。
獲取到了prepay_id那麼現在h5 呼起微信的支付功能的參數是這樣的：
{
"appId" ： "wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp"：" 1395712654", //时间戳，自1970年以来的秒数
"nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //随机串
"package" ： "prepay_id=u802345jgfjsdfgsdg888",
"signType" ： "MD5", //微信签名方式：
}有了这样的参数， 那么你还需要吧所有参与的参数做签名。签名规跟上面的一样，生成了签名后需要吧签名的参数 paySign 赋给h5 呼起微信的支付功能的参数（也就是微信的签名不参与签名的生成）
最后的参数是这样子的：
{
"appId" ： "wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp"：" 1395712654", //时间戳，自1970年以来的秒数
"nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //随机串
"package" ： "prepay_id=u802345jgfjsdfgsdg888",
"signType" ： "MD5", //微信签名方式：
"paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
}如果你的各个环节都没有问题， 那么得到了这样参数后你就可以正常的调用起微信的支付功能， 跟原生的功能是没有任何的差别的，（估计你现在的心里也特高兴吧， 没有 app 竟然可以使用 app 的功能，就是这么的神奇）。
七.支付完成的回调
微信支付完了后会在 h5 页面的微信支付的回调函数里面放回值，
res.err_msg == "get_brand_wcpay_request：ok" ，这样就是成功了， 但是不是就完事儿了呢 ？ 也不是，为什么呢？ 微信真的收到钱了么？ 收到的钱是不是你传递给微信的值呢 ？你还需要将支付的结果写数据库什么的，这些都是未知。还记的在统一下单接口中有个必须参数就是 notify_url : NOTIFY_URL,// 微信付款后的回调地址 这个地址是用户传递给微信的， 微信在收到用户的付款后会以 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>
根据自己的业务逻辑解析这个 xml 格式的数据就好了。
注意：这里你在获取到数据后微信需要得到你的回应， 如果你一直不回应微信， 微信会请求你好几次， 这样估计你的逻辑会有问题吧，所以你需要给微信返回 xml 的格式的 回应。
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>
小坑：node ，express 框架开发， 如果你在微信的支付成功后的回调中没有获取到任何 xml 的值， 那么你需要安装一组件：body-parser-xml， 你可以使用 npm install body-parser-xml --save 安装， 在 app.js 里面require('body-parser-xml')(bodyParser);,使用中间件的方式
// 解决微信支付通知回调数据
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 数据了。
使用方法：
pay.getAccessToken({
notify_url : 'http://demo.com/', //微信支付完成后的回调
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微信公众号支付开发相关文章请关注PHP中文网！