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 相关文章推荐
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
详解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
文件上传程序的全部源码
2006/10/09 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP Cookie学习笔记
2016/08/23 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
Javascript中replace()小结
2015/09/30 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
python如何爬取个性签名
2018/06/19 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python集合常见运算案例解析
2019/10/17 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
小学生家长寄语
2014/04/02 职场文书
岗位说明书范文
2014/05/07 职场文书
病媒生物防治方案
2014/05/13 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
送达通知书
2015/04/25 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python