微信支付如何实现内置浏览器的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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
移动端js触摸事件详解
Sep 18 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
一个C/C++编程面试题
2013/11/10 面试题
应届生求职信写作技巧
2013/10/24 职场文书
生产内勤岗位职责
2013/12/07 职场文书
党风廉政建设责任书
2014/04/14 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
小学清明节活动总结
2014/07/04 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
承租经营合作者协议书
2014/10/01 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2016年猴年新春致辞
2015/08/01 职场文书