微信支付如何实现内置浏览器的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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
js对象的复制继承实例
Jan 10 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
layUI实现列表查询功能
Jul 27 Javascript
vue监听用户输入和点击功能
Sep 27 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 缓存实现代码及详细注释
2010/05/16 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python命令行解析模块详解
2018/02/01 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
详解Django的CSRF认证实现
2018/10/09 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python 如何测试文件是否存在
2020/07/31 Python
Python绘制组合图的示例
2020/09/18 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
商场周年庆活动方案
2014/08/19 职场文书
典型事迹材料范文
2014/12/29 职场文书
旅游项目合作意向书
2015/05/08 职场文书
教师素质教育心得体会
2016/01/19 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Python基础之数据类型知识汇总
2021/05/18 Python
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python