JS通过调用微信API实现微信支付功能的方法示例


Posted in Javascript onJune 29, 2017

本文实例讲述了JS通过调用微信API实现微信支付功能的方法。分享给大家供大家参考,具体如下:

最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定。期间要感谢一些大神的帮助,趁热下面分享一下我的经验。

在实现微信支付之前,需要到微信开发平台认证,这些认证和配置信息我就不多说了,这里主要从代码层面实现支付。

function onBridgeReady(){
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId" : "wx2421b1c4370ec43b",   //公众号名称,由商户传入
      "timeStamp":" 1395712654",     //时间戳,自1970年以来的秒数
      "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串
      "package" : "prepay_id=u802345jgfjsdfgsdg888",   //统一订单号
      "signType" : "MD5",     //微信签名方式:
      "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付签名
    },
    function(res){
      alert(res.err_msg);
      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();
}

上面的JS代码是官方文档上贴出来的,官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。

下面对JS中的几个参数做主要的讲解:

在开发过程中,有4个非常重要的参数:一个是appid,AppSecret,apikey和商户号。上面js中的appID就是其中之一。timeStamp是一个时间戳,10位数,nonceStr是随机数,32位以内,这里最重要的两个参数,也是最容易出错的就是package和paySign了。我一一说来。先说package,这里需要用到prepay_id,这个参数是微信生成的订单号,需要我们调用统一订单接口来获取。官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1。可以从文档看到,要获取prepay_id,需要很多参数,这里面有一个非常重要的参数就是签名。注意:这里的签名和JS中的支付签名和不同的。 签名的算法文档里有,我只是强调两点。一个是参数的顺序,一定一定要按照ASCII从小到大拼接,二是apikey一定不能错,这个apikey在哪里呢?登入商户平台就可以设置了。

JS通过调用微信API实现微信支付功能的方法示例

拼接好签名需要的字符串后,进行MD5加密就可以得到签名了。然后把签名和前面所有的参数组合成xml格式的字符串,调用给的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一个xml结果,解析出其中的prepay_id,这样这个参数就成功获取到了。

下面再说JS中的最后一个参数PaySign:支付签名。支付签名的算法也是一样,把JS中的其他5个参数按照顺序拼接,加上apikey,MD5加密,ok。

签名的算法都是一样的,只是参数值不同而已。这里需要注意一点。在支付签名的时候,用到随机数nonceStr,时间戳timeStamp,而签名时使用的这两个参数和JS中的这两个参数的值要是一样的,是同一个随机数,同一个时间戳。为什么呢?虽然文档没说,但是我的理解是:支付签名是通过随机数和时间戳来生成的,然后在支付的时候,把随机数,时间戳,支付签名一起发送过去,那么在微信进行验证的时候,也会根基js中的随机数和时间戳生成签名和你发送的支付签名进行比较,如果你在js中重新获取新的随机数、时间戳,那么算出来的签名和你发送的签名就会不一样,就会报错:签名失败。

到此,代码层面的注意点就这些,当然,还有其他的一些注意点。比如其中有用的openid,这个参数也是需要调用接口获取到的,还有支付授权的目录是否配置正确。

最后一句总结:仔细看文档,最后问别人,可以找微信支付相关的群,里面很多大神的,我之前就是遇到一个问题纠结了2天没解决,(有时候光看文档也不行),

然后怒加了8个微信开发的群,最终在高人的指点下终于搞出来了。再次表示感谢。程序员是一个热爱分享的群体,他们非常乐意把自己知道的东西分享出去。所以不懂的时候,多问问。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
Vuex利用state保存新闻数据实例
Jun 28 #Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 #Javascript
You might like
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
使用python编写监听端
2018/04/12 Python
python3.4实现邮件发送功能
2018/05/28 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python实现微信打飞机游戏
2020/03/24 Python
Python的历史与优缺点整理
2020/05/26 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
Hibernate持久层技术
2013/12/16 面试题
执行力心得体会
2013/12/31 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
干部年终考核评语
2015/01/04 职场文书
新兵入伍决心书
2015/09/22 职场文书