nodejs微信公众号支付开发

 更新时间:2016年10月3日 10:01  点击:1722

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

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

[!--infotagslink--]

相关文章

  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
  • Nodejs回调加超时限制两种实现方法

    这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
  • Nodejs中使用captchapng模块生成图片验证码

    本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码,非常具有实用价值,需要的朋友可以参考下 ...2017-05-22
  • Nodejs学习item【入门手上】

    这篇文章主要介绍了Nodejs学习item【入门手上】,需要的朋友可以参考下...2016-05-09
  • nodejs 终端打印进度条实例代码

    本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
  • Nodejs express框架一个工程中同时使用ejs模版和jade模版

    这篇文章主要介绍了Nodejs express框架一个工程中同时使用ejs模版和jade模版 的相关资料,需要的朋友可以参考下...2015-12-29
  • Node.js检测端口(port)是否被占用的简单示例

    大家有没有遇到过在开启本地服务时,有这么一种情况:当前端口已经被另一个项目使用了,导致服务开启失败。那么接下来,我们通过简简单单的示例代码来检测端口是否已经被占用。有需要的朋友们可以参考借鉴。...2016-10-02
  • Nodejs下DNS缓存问题浅析

    本文给大家一起探讨nodejs下dns的缓存问题,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧...2016-11-22
  • 详解Windows下安装Nodejs步骤

    本篇文章主要介绍了详解Windows下安装Nodejs步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-22
  • Nodejs 数组的队列以及forEach的应用详解

    这篇文章主要介绍了Nodejs 数组的队列以及forEach的应用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-25
  • HTML5实现微信拍摄上传照片功能

    这篇文章主要介绍了HTML5实现微信拍摄上传照片功能,实现HTML5 Canvas手机拍摄,本地压缩上传图片时遇到问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
  • node.js如何根据URL返回指定的图片详解

    这篇文章主要介绍了NODE.JS如何根据URL返回指定的图片详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-21
  • 使用JavaScript脚本判断页面是否在微信中被打开

    这篇文章主要介绍了使用JavaScript脚本判断网页是否在微信中被打开的方法,在各种使用微信参加活动的移动版页面上经常可以用到,需要的朋友可以参考下...2016-03-09
  • NodeJS通过魔术封包唤醒局域网计算机实例

    这篇文章主要为大家介绍了NodeJS通过魔术封包唤醒局域网计算机代码实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-06-11
  • JavaScript结合Bootstrap仿微信后台多图文界面管理

    这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-07-29
  • Node.js中使用jQuery的做法

    在Node.js中使用jQuery的做法,需要先安装jquery,npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24
  • 详解Nodejs基于mongoose模块的增删改查的操作

    本篇文章主要介绍了Nodejs基于mongoose模块的增删改查的操作,Mongoose是MongoDB的一个对象模型工具,封装了MongoDB对文档的的一些增删改查等常用方法,让NodeJS操作Mongodb数据库变得更加灵活简单。 ...2016-12-31
  • NodeJS 实现手机短信验证模块阿里大于功能

    这篇文章主要介绍了NodeJS 实现手机短信验证模块阿里大于功能,需要的朋友可以参考下...2017-06-24
  • JavaScript仿微信打飞机游戏

    这篇文章主要为大家详细介绍了JavaScript仿微信打飞机游戏的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
  • nodejs基础知识

    本文主要介绍了nodejs基础知识。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-08