nodejs微信公众号支付开发


Posted in NodeJs onSeptember 19, 2016

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 需要注意几个参数:

1.  appid公众号的 appid,可以在公众号中看到
2.  redirect_uri 自定义的微信回调地址, 微信会在你请求完上面的地址后跳转到你定义的redirect_uri的地址, 带着 code,此处的 redirect_url 需要 **url_encode** *php*, 如果你的程序是 node 则需要使用 **encodeURLComponent(url)**编码
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_code
此处api 的参数说明:

1.  appid 微信公众号 id,微信公众号后台获取
2.  secret 微信公众号的密钥, 微信公众号后台获取
3.  code, 第一步获取用到的 code
4.  grant_type=authorization_code 固定就好

三.通过access_token调用接口

access_token 可以做后续的功能, 可以参考官方的例子:
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&lang=zh_CN

四.网页端调起支付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
 });
 });

就到这里吧, 感觉也差不多了。如有不对的地方还请指正。

附上我自己的代码:https://git.oschina.net/anziguoer/wechatPay

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
Feb 04 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
nodejs基础知识
Feb 03 NodeJs
nodejs服务搭建教程 nodejs访问本地站点文件
Apr 07 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
nodejs创建简易web服务器与文件读写的实例
Sep 07 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
nodejs 如何手动实现服务器
Aug 20 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
nodeJS进程管理器pm2的使用
Jan 09 NodeJs
nodejs实现用户登录路由功能
May 22 NodeJs
nodeJs内存泄漏问题详解
Sep 05 #NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 #NodeJs
NodeJS远程代码执行
Aug 28 #NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
Aug 16 #NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 #NodeJs
NodeJs的优势和适合开发的程序
Aug 14 #NodeJs
在windows上用nodejs搭建静态文件服务器的简单方法
Aug 11 #NodeJs
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php自定义hash函数实例
2015/05/05 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python斐波那契数列的计算方法
2018/09/27 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
老师推荐信
2013/10/28 职场文书
高三政治教学反思
2014/02/06 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
授权委托书
2014/09/17 职场文书
党员个人剖析材料
2014/09/30 职场文书
个人年度总结报告
2015/03/09 职场文书
离婚民事起诉状
2015/08/03 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android