最新接收了微信公众号开发的任务，也是第一次接触node.js,不过这一篇我暂时先不说node.js的使用，由于接通微信支付的确是花费了我好多时间和精力，为了下次能够快速接通当然也和大家分享一下，特以此文记录一下。
一.首先在微信公众号后台
设置 -- > 公众号设置 --> 功能设置 -- > 网页授权域名 （填写微信公众号菜单跳转 到 自己的网站的域名 例如wx.mingrivr.com）
其中
设置 -- > 公众号设置 --> 功能设置 -- > 业务域名 （最好也设置一下，这样如果你的网站需要输入的时候就不会出现红色的提示框提示谨慎输入的字样）
另外切换到
微信支付 --> 开发配置 （将支付授权目录精确到你要发起支付的请求界面的url地址，并以“/” 结束）
然后添加测试的白名单
将测试的微信号添加上去
二.回到程序中来
支付流程：
选择充值的金额之后 --> 告诉自家服务器 生成一个订单号返回 --> 微信支付 --> 支付成功、失败之后回调 --> 告诉自家服务器 余额中充值 并返回结果 -- > 如果成功 结束 ；不成功 微信原路退款
在node.js 工程中，建议建立一个json文件存放关于wxpay配置的相关信息
{
"wxAppId" : "", // 公众号后台 开发 --> 基本配置 中可以看到
"wxAppSecret" : "",// 公众号后台 开发 --> 基本配置 中可以看到
"wxMchId" : "", // 支付商户的id
"wxPayKey" : ""// 支付商户的密钥
}
调起微信支付的时候主要就是下面一个方法
WeixinJSBridge.invoke( 'getBrandWCPayRequest',
{
"appId" :paramObj.appId, //公众号名称，由商户传入
"timeStamp":paramObj.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr" :paramObj.nonceStr, //随机串 "package":paramObj.package,
"signType":paramObj.signType, //微信签名方式：
"paySign":paramObj.paySign //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request：ok" ) {
//支付成功的回调 微信团队说不一定准确 哈哈哈
}
if(res.err_msg == "get_brand_wcpay_request：cancel" || res.err_msg == "get_brand_wcpay_request：fail"){
//微信支付失败或者取消的回调
}
});
其实在你需要调起微信支付的页面的js里面添加这个方法就能调起微信支付，重点来啦，你看到需要传的参数了么？虽然只有五个参数，但是步骤还真是不少？一起来看看吧！
一般为了安全起见，获取这些个参数放在后台，我的程序中也就是node.js负责的这部分。也就是说客户端发起一个请求的时候我在route中通知自家服务端，然后发起微信请求，获取所需的参数之后传回到客户端发起微信支付，收到微信支付回调信息之后再发起请求告诉自家服务器支付结果。
看一下node.js中关于微信支付的代码吧
第一步.获取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
1. appid公众号的 appid，可以在公众号中看到
2. redirect_uri 自定义的微信回调地址， 微信会在你请求完上面的地址后跳转到你定义的redirect_uri的地址， 带着 code，此处的 redirect_url 需要 **url_encode** *php*， 如果你的程序是 node 则需要使用 **encodeURLComponent(url)**编码
3. response_type=code，这个没什么好说的就是固定的
4. scope=snsapi_userinfo，也可以选择snsapi_base 就不会出现绿色的授权界面
5. state=STATE 固定这样写就好，详细说明可以查看微信官网的说明
6. wechat_redirect 固定这样写就好，详细说明可以查看微信官网的说明
第二步.获取access_token openid
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
1. appid 微信公众号 id，微信公众号后台获取
2. secret 微信公众号的密钥， 微信公众号后台获取
3. code， 第一步获取用到的 code
4. grant_type=authorization_code 固定就好
第三步.先把需要获取的简单的几个参数的方法展示一下
获取随机的NonceStr
voucherControl.createNonceStr = function(){
return Math.random().toString(36).substr(2, 15);
};
第四步.获取prepay_id
voucherControl.getPrepayId = function(obj){
// 生成统一下单接口参数
var UnifiedorderParams = {
appid : wxConfig.wxAppId,
body : obj.body,
mch_id : wxConfig.wxMchId,
nonce_str: voucherControl.createNonceStr(),
notify_url : obj.notify_url,// 微信付款后的回调地址
openid : openid,
out_trade_no : obj.out_trade_no,//new Date().getTime(), //订单号
spbill_create_ip : obj.spbill_create_ip,
total_fee : obj.total_fee,
trade_type : 'JSAPI',
};
// 返回 promise 对象
return new Promise(function (resolve, reject) {
// 获取 sign 参数
UnifiedorderParams.sign = voucherControl.getSign(UnifiedorderParams);
var url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request.post(
{
url : url,
body:JSON.stringify(voucherControl.getUnifiedorderXmlParams(UnifiedorderParams))
},
function (error, response, body) {
var prepay_id = '';
if (!error && response.statusCode == 200) {
// 微信返回的数据为 xml 格式， 需要装换为 json 数据， 便于使用
xml2jsparseString(body, {async:true}, function (error, result) {
prepay_id = result.xml.prepay_id[0];
// 放回数组的第一个元素
resolve(prepay_id);
});
} else {
reject(body);
}
});
})}
第五步.获取sign
获取微信支付的签名
voucherControl.getSign = function(signParams){
// 按 key 值的ascll 排序
var keys = Object.keys(signParams);
keys = keys.sort();
var newArgs = {};
keys.forEach(function (val, key) {
if (signParams[val]){
newArgs[val] = signParams[val];
}
})
var string = queryString.stringify(newArgs)+'&key='+wxConfig.wxPayKey;
return crypto.createHash('md5').update(queryString.unescape(string), 'utf8').digest("hex").toUpperCase();
}
第六步.获取将json数据变为xml数据（因为微信统一下单的时候body中传数据必须为xml数据）
获取微信统一下单参数
voucherControl.getUnifiedorderXmlParams = function(obj){
var body = '' +
''+wxConfig.wxAppId+' ' +
''+obj.body+'' +
''+wxConfig.wxMchId+' ' +
''+obj.nonce_str+' ' +
''+obj.notify_url+' ' +
''+obj.openid+' ' +
''+obj.out_trade_no+' '+
''+obj.spbill_create_ip+' ' +
''+obj.total_fee+' ' +
''+obj.trade_type+' ' +
''+obj.sign+' ' +
' ';
return body;
}
第七步.获取微信支付的所有参数
微信支付的所有参数 *
@param req 请求的资源, 获取必要的数据 *
@returns {{
appId: string,
timeStamp: Number,
nonceStr: *,
package: string,
signType: string,
paySign: *}}
voucherControl.getBrandWCPayParams = function(obj,callback ){
var prepay_id_promise = voucherControl.getPrepayId(obj);
prepay_id_promise.then(function (prepay_id) {
var prepay_id = prepay_id;
var wcPayParams = {
"appId" : wxConfig.wxAppId, //公众号名称，由商户传入
"timeStamp" : parseInt(new Date().getTime() / 1000).toString(), //时间戳，自1970年以来的秒数
"nonceStr" : voucherControl.createNonceStr(), //随机串 // 通过统一下单接口获取
"package" : "prepay_id="+prepay_id,
"signType" : "MD5", //微信签名方式： };
wcPayParams.paySign = voucherControl.getSign(wcPayParams); //微信支付签名
callback(null, wcPayParams);
},function (error) {
callback(error);
});
}
第八步.将微信支付取得的参数传回客户端去调用微信支付吧
voucherControl.getBrandWCPayParams(obj, function (error, responseData) {
if (error) {
callback(error);
} else {
callback(null, responseData);
}
});
第九步.支付完成的回调
微信支付完了后会在 h5 页面的微信支付的回调函数里面放回值，res.err_msg == "get_brand_wcpay_request：ok" ，这样就是成功了， 但是不是就完事儿了呢 ？ 也不是，为什么呢？ 微信真的收到钱了么？ 收到的钱是不是你传递给微信的值呢 ？你还需要将支付的结果写数据库什么的，这些都是未知。还记的在统一下单接口中有个必须参数就是notify_url : NOTIFY_URL,// 微信付款后的回调地址
这个地址是用户传递给微信的， 微信在收到用户的付款后会以 post 的方式请求这个接口，微信会传递用户付款的信息过来， 不过是 xml 格式的。类系这样的 xml 格式：
1
根据自己的业务逻辑解析这个 xml 格式的数据就好了。注意：这里你在获取到数据后微信需要得到你的回应， 如果你一直不回应微信， 微信会请求你好几次， 这样估计你的逻辑会有问题吧，所以你需要给微信返回 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)
});
});
最后我将node.js关于微信支付的代码封装成一个js
使用方法见js中的 useWxPay 方法，将所需参数传入就会得到微信下单的所有参数
/**
* Created by haHa on 2016/11/21.
* 微信支付的js文件
*/
var wxPayControl = module.exports;
var request = require("request");
var url = require('url');
var queryString = require('querystring');
var crypto = require('crypto');
var xml2jsparseString = require('xml2js').parseString;
var wxConfig = require('../z_configs/wxconfig.json');
/*
{
"wxAppId" : "",//公众号appid
"wxAppSecret" : "",//公众号appsecrect
"wxMchId" : "",//商户id
"wxPayKey" : ""//商户密钥
}
*/
var access_token;
var expires_in;
var refresh_token;
var openid = "";
var scope;
/*
微信支付的js文件使用
*/
function useWxPay() {
var notify_url = '你发起支付的页面地址';
var spbill_create_ip = getClienIp(req);
var obj = {
body : "明日VR-账户游戏币充值", //描述微信支付的意义
notify_url : notify_url,// 微信付款后的回调地址
out_trade_no : data.orderNo,//new Date().getTime(), //订单号
spbill_create_ip :spbill_create_ip,
total_fee : total_fee//金额
}
wxPayControl.getAccessToken(obj,wxCode,function (err,wxParam) {
})
}
/**
* 获取客户端的ip
* req是发起请求的req
*/
getClienIp = function(req) {
//固定ip
return "139.224.53.144"
//因为 输出是 ::fffff:139.224.53.144 所以固定测试一下
// return req.headers['x-forwarded-for'] ||
// req.connection.remoteAddress ||
// req.socket.remoteAddress ||
// req.connection.socket.remoteAddress;
};
/*
第一步 获取code
*/
/**
* 获取微信的 AccessToken 和 openid
*/
wxPayControl.getAccessToken = function(obj,wxCode,callback) {
console.log("wecode ~~~");
console.log(wxCode);
var getAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="+wxConfig.wxAppId+"&secret="+wxConfig.wxAppSecret+"&code="+wxCode+"&grant_type=authorization_code";
request.post({url : getAccessTokenUrl}, function (error, response, body) {
console.log("微信支付 获取accesstoken");
console.log(body);
if (!error && response.statusCode == 200){
if (40029 == body.errcode) {
callback(error, body);
} else {
body = JSON.parse(body);
access_token = body.access_token;
expires_in = body.expires_in;
refresh_token = body.refresh_token;
openid = body.openid;
scope = body.scope;
// 拼接微信的支付的参数
getBrandWCPayParams(obj, function (error, responseData) {
if (error) {
callback(error);
} else {
console.log("微信支付的参数");
console.log(responseData);
callback(null, responseData);
}
});
}
} else {
callback(error);
}
});
}
/**
* 获取微信统一下单的接口数据
*/
function getPrepayId(obj){
// 生成统一下单接口参数
var UnifiedorderParams = {
appid : wxConfig.wxAppId,
body : obj.body,
mch_id : wxConfig.wxMchId,
nonce_str: createNonceStr(),
notify_url : obj.notify_url,// 微信付款后的回调地址
openid : openid,
out_trade_no : obj.out_trade_no,//new Date().getTime(), //订单号
spbill_create_ip : obj.spbill_create_ip,
total_fee : obj.total_fee,
trade_type : 'JSAPI',
};
// 返回 promise 对象
return new Promise(function (resolve, reject) {
// 获取 sign 参数
UnifiedorderParams.sign = getSign(UnifiedorderParams);
var url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request.post({url : url, body:JSON.stringify(getUnifiedorderXmlParams(UnifiedorderParams))}, function (error, response, body) {
console.log("微信下单返回数据");
console.log(response);
var prepay_id = '';
if (!error && response.statusCode == 200) {
// 微信返回的数据为 xml 格式， 需要装换为 json 数据， 便于使用
xml2jsparseString(body, {async:true}, function (error, result) {
prepay_id = result.xml.prepay_id[0];
// 放回数组的第一个元素
resolve(prepay_id);
});
} else {
reject(body);
}
});
})
}
/**
* 微信支付的所有参数
* @param req 请求的资源, 获取必要的数据
* @returns {{appId: string, timeStamp: Number, nonceStr: *, package: string, signType: string, paySign: *}}
*/
function getBrandWCPayParams(obj,callback ){
var prepay_id_promise = getPrepayId(obj);
prepay_id_promise.then(function (prepay_id) {
var prepay_id = prepay_id;
var wcPayParams = {
"appId" : wxConfig.wxAppId, //公众号名称，由商户传入
"timeStamp" : parseInt(new Date().getTime() / 1000).toString(), //时间戳，自1970年以来的秒数
"nonceStr" : createNonceStr(), //随机串
// 通过统一下单接口获取
"package" : "prepay_id="+prepay_id,
"signType" : "MD5", //微信签名方式：
};
wcPayParams.paySign = getSign(wcPayParams); //微信支付签名
console.log(wcPayParams.paySign);
console.log("微信支付的所有参数");
console.log(wcPayParams);
callback(null, wcPayParams);
},function (error) {
callback(error);
});
}
/**
* 获取微信统一下单参数
*/
function getUnifiedorderXmlParams(obj){
var body = '' +
''+wxConfig.wxAppId+' ' +
''+obj.body+'' +
''+wxConfig.wxMchId+' ' +
''+obj.nonce_str+' ' +
''+obj.notify_url+' ' +
''+obj.openid+' ' +
''+obj.out_trade_no+' '+
''+obj.spbill_create_ip+' ' +
''+obj.total_fee+' ' +
''+obj.trade_type+' ' +
''+obj.sign+' ' +
' ';
return body;
}
/**
* 获取微信支付的签名
* @param payParams
*/
function getSign(signParams){
// 按 key 值的ascll 排序
console.log('支付签名');
console.log(signParams);
var keys = Object.keys(signParams);
keys = keys.sort();
var newArgs = {};
keys.forEach(function (val, key) {
if (signParams[val]){
newArgs[val] = signParams[val];
}
})
var string = queryString.stringify(newArgs)+'&key='+wxConfig.wxPayKey;
console.log(string);
// 生成签名
return crypto.createHash('md5').update(queryString.unescape(string), 'utf8').digest("hex").toUpperCase();
}
/**
* 获取随机的NonceStr
*/
function createNonceStr(){
return Math.random().toString(36).substr(2, 15);
}