1、H5支付和jssdk微信支付的区别
- H5支付:只能在微信外部的浏览器进行支付
- jssdk支付:在微信里面完成的支付
2、什么是JSSDK?
可以让微信里面的web页面有能力调用原生的api功能,这就叫jssdk(能力有限,相比微信小程序调用原生的api的能力差一些) 通过使用微信JS-SDK,网页开发者可以借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
3、配置jssdk
1、配置微信JSSDK支付之前的准备工作*重要:
(一)公众号里面的配置
1、配置JS安全域名: 公众号设置->功能设置->JS接口安全域名 [xxxx.com](http://xxxx.com/)
2、支付需要配置支付域名:公众号设置->功能设置->网页授权域名 (
支付的时候配置的)
3、配置IP白名单:基本配置->IP白名单
(二)商户平台里面配置支付目录:
- 商户平台>产品中心>开发配置->配置公众号支付授权目录 (* 支付的时候配置的)
① 配置JS安全域名:
_注意:JS接口安全域名是前端部署服务器的链接,而不是你node部署的服务器_
②配置IP白名单
想在哪里调用微信jssdk的参数,就在哪设置,比如要在118.123.14.36这台服务器里面配置,就输入服务器的ip地址
③商户平台里面配置支付目录
4、使用官方JS-SDK的流程:
1.必须配置js接口的安全域名 找到公众号里面的设置->公众号设置->JS接口安全域名->功能设置->JS接口安全域名
2、点开下面地址配置安全域名:
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
3、获取测试的appid appsecret
开发者工具->公众平台测试账户
获取正式的appid appsecret
基本配置->公众号开发信息
4、下载官方的JS-SDK 实例包
下载地址: 最下面https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
配置appid appsecret
5、jsApiList: [] 加入权限
6、wx.ready(function () {})里面 使用对应的实例
5、nodejs
用到了wechat-api这个包生成签名
1.安装wechat-api
cnpm install wechat-api --save
2、引入var API = require('wechat-api');
3、实例化配置
var api = new API(config.wxappid,config.wxappsecret) ;
4、生成config的参数
var param = {
debug: false,
jsApiList: ['checkJsApi',
'chooseImage',
'getNetworkType',
'openLocation',
'getLocation',
'scanQRCode'
],
url: req.body.url
};
api.getJsConfig(param, function(err,result){
res.send(result);
});
手机端的调试工具:
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
//手机端的调试工具
var vConsole = new VConsole();
</script>
微信支付步骤:
1、获取用户openID
2、生成 sign 签名
3、请求”统一下单API“,获取 prepay_id=
4、生成小程序签名 paySign
nodejs服务端
app.js
// app.js
/*
用到了wechat-api这个包生成签名
1.安装wechat-api
cnpm install wechat-api --save
2、引入var API = require('wechat-api');
3、实例化配置
var api = new API(config.wxappid,config.wxappsecret) ;
4、生成config的参数
var param = {
debug: false, 调试模式
jsApiList: ['checkJsApi',
'chooseImage',
'getNetworkType',
'openLocation',
'getLocation',
'scanQRCode'
],
url: req.body.url
};
api.getJsConfig(param, function(err,result){
res.send(result);
});
*/
var config = require('./module/config');
var API = require('wechat-api');
//引入统一下单的api
var wechatPay = require('./module/wechatPay');
var express = require('express');
var bodyParser = require('body-parser');
var xmlparser = require('express-xml-bodyparser');
var request = require('request');
var api = new API(config.wxappid,config.wxappsecret)
var app = new express();
//xmlparser
app.use(xmlparser());
app.use(express.static('./public'));
//使用中间件body-parser获取post参数
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.set('view engine','ejs');
app.post('/wechat',function (req, res, next) {
//使用wechat-api获取JSconfig
var param = {
debug: false,
jsApiList: ['checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'],
url: req.body.url
};
/*api.getTicket(function(err,result){
console.log(err);
console.log(result);
});*/
api.getJsConfig(param, function(err,result){
// console.log(err)
// console.log(result)
res.send(result);
});
// console.log('执行');
})
//获取openid返回客户端
app.get('/getOpenId',function(req, res){
var code=req.query.code;
var pay=new wechatPay();
//openid
pay.getAccessToken(code,function(err,data){
console.log(data);
res.json(data);
})
})
app.get('/',function (req, res) {
//使用wechat-api获取JSconfig
//使用wechat-api获取JSconfig
res.render('index');
})
app.get('/order',function (req, res) {
//使用wechat-api获取JSconfig
//使用wechat-api获取JSconfig
var openid=req.query.openid;
var pay=new wechatPay();
pay.createOrder({
openid:openid,
notify_url : 'http://a.sayid760.com/notifyUrl', //微信支付完成后的回调
out_trade_no : new Date().getTime(), //订单号
attach : '名称',
body : '购买信息',
total_fee : '1', // 此处的额度为分
spbill_create_ip : req.connection.remoteAddress.replace(/::ffff:/, ''),
}, function (error, responseData) {
if(error){
console.log(error);
}
res.json(responseData); /*签名字段*/
});
})
app.post('/notifyUrl',function (req, res) {
//使用wechat-api获取JSconfig
//接受xml
var pay=new wechatPay();
var notifyObj=req.body.xml;
var signObj={};
for(var attr in notifyObj){
if(attr !='sign'){
signObj[attr]=notifyObj[attr][0]
}
}
console.log(pay.getSign(signObj));
console.log('--------------------------');
console.log(req.body.xml.sign[0]);
})
app.listen(8002,function(){
console.log('port 8003 is running!');
});
统一下单接口
// module/config.js
var config={
mch_id: '1535063641',
wxappid: "wx616683031bf5c67d",
wxappsecret:'f506525621307c15c0df13c94363a848',
wxpaykey: 'c23fdgas768fdhASdsad121hgkf684gd'
}
module.exports=config;
// module/wechatPay.js
var url = require('url');
var queryString = require('querystring');
var crypto = require('crypto');
var request = require('request');
var xml2jsparseString = require('xml2js').parseString;
// 引入项目的配置信息
var config = require('./config.js');
// wechat 支付类 (使用 es6 的语法)
class WechatPay { /**
* 构造函数
* @param params 传递进来的方法
*/
constructor(){
// this.userInfo = userInfo;
// console.log(this.userInfo);
}
/**
* 获取微信统一下单参数
*/
getUnifiedorderXmlParams(obj){
var body = '<xml> ' +
'<appid>'+config.wxappid+'</appid> ' +
'<attach><![CDATA[" + obj.attach+ "]]></attach> ' +
'<body><![CDATA[" + 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>';
return body;
}
/**
* 获取微信统一下单的接口数据
*/
getPrepayId(obj){
var that = this;
// 生成统一下单接口参数
var UnifiedorderParams = {
appid : config.wxappid,
attach : obj.attach,
body : obj.body,
mch_id : config.mch_id,
nonce_str: this.createNonceStr(),
notify_url : obj.notify_url,// 微信付款后的回调地址
openid : obj.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',
// sign : getSign(),
};
// 返回 promise 对象
return new Promise(function (resolve, reject) {
// 获取 sign 参数
UnifiedorderParams.sign = that.getSign(UnifiedorderParams);
var url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request.post({url : url, body:JSON.stringify(that.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);
}
});
})
}
/**
* 获取微信支付的签名
* @param payParams
*/
getSign(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='+config.wxpaykey;
// 生成签名
return crypto.createHash('md5').update(queryString.unescape(string), 'utf8').digest("hex").toUpperCase();
}
/**
* 微信支付的所有参数
* @param req 请求的资源, 获取必要的数据
* @returns {{appId: string, timeStamp: Number, nonceStr: *, package: string, signType: string, paySign: *}}
*/
getBrandWCPayParams( obj, callback ){
var that = this;
var prepay_id_promise = that.getPrepayId(obj);
prepay_id_promise.then(function (prepay_id) {
var prepay_id = prepay_id;
var wcPayParams = {
"appId" : config.wxappid, //公众号名称,由商户传入
"timeStamp" : parseInt(new Date().getTime() / 1000).toString(), //时间戳,自1970年以来的秒数
"nonceStr" : that.createNonceStr(), //随机串
// 通过统一下单接口获取
"package" : "prepay_id="+prepay_id,
"signType" : "MD5", //微信签名方式:
};
wcPayParams.paySign = that.getSign(wcPayParams); //微信支付签名
callback(null, wcPayParams);
},function (error) {
callback(error);
});
}
/**
* 获取随机的NonceStr
*/
createNonceStr() {
return Math.random().toString(36).substr(2, 15);
};
//获取微信的 AccessToken openid
getAccessToken(code, cb){
var that = this;
var getAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="+config.wxappid+"&secret="+config.wxappsecret+"&code="+code+"&grant_type=authorization_code";
request.post({url : getAccessTokenUrl}, function (error, response, body) {
if (!error && response.statusCode == 200){
if (40029 == body.errcode) {
cb(error, body);
} else {
body = JSON.parse(body);
cb(null, body);
}
} else {
cb(error);
}
});
}
/**
* 创建订单
*/
createOrder(obj, cb){
this.getBrandWCPayParams(obj, function (error, responseData) {
if (error) {
cb(error);
} else {
cb(null, responseData);
}
});
}
}
module.exports = WechatPay;