微信支付如何实现内置浏览器的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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
如何提高数据访问速度
Dec 26 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
js实现随机8位验证码
Jul 24 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
JavaScript实现更换背景图片
Oct 18 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
php获取数组长度的方法(有实例)
2013/10/27 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
javascript 写类方式之七
2009/07/05 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python基础教程之异常详解
2019/01/10 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
实习生自荐信范文
2013/11/13 职场文书
党员创先争优活动总结
2014/05/04 职场文书
服务承诺书范文
2014/05/19 职场文书
太行山上观后感
2015/06/05 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书