微信支付如何实现内置浏览器的H5页面支付


Posted in Javascript onSeptember 25, 2015

因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便

这是微信的官方API文档 微信API

微信支付的准备工作

申请公众号,申请开通支付,这个很简单,自行百度
申请好之后 在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”,“测试授权目录”,“测试白名单”
在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)”
在商户平台中找到微信支付分配的商户号,以及自己配置一个商户支付密钥

具体步骤

首先通过微信支付的api 获得支付用的prepay_id,这里需要用到上面提到的“AppID(应用ID)”,“AppSecret(应用密钥)”,“微信支付分配的商户号”,“商户支付密钥”以及其他的一些参数(具体参照微信开发文档)用MD5加密成签名(第一次签名)获得prepay_id后,用prepay_id和一些其他参数(具体参照微信开发文档)用MD5加密成签名(第二次签名)然后在前端通过微信内置浏览器提供的js API,WeixinJSBridge.invoke来调用微信支付的弹出页面,这里需要用到上面的第二次的签名

具体代码如下

$.get('/xxx',function(data){
 if(data && data !== ""){
  var _data = $.parseJSON(data)[0];
  if(parseInt(_data.userAgent) < 5){
  alert('您的微信版本低于5.0,无法使用微信支付!');
  return false;
  }
  WeixinJSBridge.invoke('getBrandWCPayRequest',{
  'appId': _data.appId,
  'timeStamp': _data.timeStamp,
  'nonceStr': _data.nonceStr,
  'package': 'prepay_id=' + _data.packageOne,
  'signType': _data.signType,
  'paySign': _data.paySign
  },function(res){
   if(res.err_msg === 'get_brand_wcpay_request:ok'){
   alert('支付成功,返回订单列表!');
   }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
   alert('取消支付!');
   }
  });

 }
});

几个容易失败点需要注意

支付链接和在开发平台配置的链接不匹配

总共需要2次签名,并且所需的参数是不同的,在JS中用到的签名是第二次签名,不要混淆参数传递的不能有错

如果body中有中文需要转义其中还有一些问题没有完全解决,就是位置支付没有一个判断失效的时间,如果在微信支付的弹出层停留时间太久了,可能这个订单在我们网站上已经失效了,可在微信支付中仍然能支付成功,如果有高人知道这个问题怎么解决的,希望能告诉解决办法

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
编写React组件项目实践分析
Mar 04 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
十天学会php(3)
2006/10/09 PHP
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
django 信号调度机制详解
2019/07/19 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python获取linux系统信息的三种方法
2020/10/14 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
团工委书记自荐书范文
2013/12/17 职场文书
通知函的格式
2015/04/27 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
浅谈Redis中的RDB快照
2021/06/29 Redis