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

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

时间: 2015-09-22

微信通过页面(H5)直接打开本地app的解决方法

简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了"微下载"之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安装就直接打开,没有安装的话就是腾讯微下载的页面进行app下载,当然微下载的页面腾讯提供了几个模板,可以自己选择和修改. IOS实现:ios像直接点击链接打开本地app就难了,有两种方式可供我们选择: 1.腾讯深度合作的公司,微信可以帮你打开app: 2.使用IOS9+的新功能"U

Android编程实现使用webView打开本地html文件的方法

本文实例讲述了Android编程实现使用webView打开本地html文件的方法.分享给大家供大家参考,具体如下: 在布局的配置文件里: <WebView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/webView"> </WebView> 后台java代码; @SuppressLint(

jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

Oracle出现超出打开游标最大数的解决方法

本文实例讲述了Oracle出现超出打开游标最大数的解决方法.分享给大家供大家参考,具体如下: Java代码在执行conn.createStatement()和conn.prepareStatement()的时候,实际上都是相当与在数据库中打开了一个cursor.尤其是,假如你的createStatement和prepareStatement是在一个循环里面的话,就会非常轻易出现这个问题.因为游标一直在不停的打开,而且没有关闭. 一般来说,我们在写Java代码的时候,createStatement

php版微信公众平台回复中文出现乱码问题的解决方法

本文实例分析了php版微信公众平台回复中文出现乱码问题的解决方法.分享给大家供大家参考,具体如下: 微信公众平开发时碰到回复中文乱码了,这个问题小编发现是编码问题,其实只要把编码转成utf8就可以解决了,具体来看看. 很多微信公众平台的自动回复程序都是 ThinkWechat.class.php 这个类开发的,今天碰到一个莫名其妙的乱码问题,查问题发现是GB2312编码导致,所以要修改源码. 先增加一个方法: /** * 检测是否UTF-8 * @param $str * @return boo

Android Studio 报错“app:processDebugResources"解决方法

Android Studio 报错"app:processDebugResources"解决方法 Android Studio项目Build的时候报了这么一个错误: Error:Execution failed for task ':app:processDebugResources'. > com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Pro

关于Git远程与本地冲突的解决方法

发现问题 昨天发现了一个新的前端框架Semantic UI,觉得比较新奇嘛,于是乎就动手做一个页面试试,在晚上11点左右页面做好了并上传到GitHub,开启了pages.今天上午发现手机上显示有问题,修改了代码,准备再次Push到GitHub上的时候,问题出现了: 看到这提示,我马上打开GitHub查看了一番,发现GitHub在给pages添加域名时,创建了一个CNMAE的文件.远程有了更新而本地也有了更新,怎么办呢?我的做法是这样的. 解决方法 1.把远程仓库master分支下载到本地并存为t

phpmyadmin打开很慢的解决方法

phpmyadmin4系列通通加载缓慢的最终原因是最近phpmyadmin的官网经常打不开,而phpmyadmin页面会自动检查官网上的程序版本更新,所以当你进入phpmyadmin管理页面点击数据库的时候phpmyadmin一直在尝试连接官网从而把整个打开过程拖得很慢. 最终的解决办法是不让phpmyadmin检查更新,找到phpmyadmin目录下version_check.php文件,具体修改如下: 复制代码 代码如下: if (isset($_SESSION['cache']['vers

.net 刷新页面后弹出重试框的解决方法

关闭模式窗口后,需要刷新父页面,但是模式窗口关闭后,父页面总是会弹出"重试"消息框,如下图所示: 解决方法:在父页面的form标签中,添加属性 method="get" ,将post修改为get,这样父页面刷新的时候就不会再弹出"重试"框了

sqlserver还原数据库的时候出现提示无法打开备份设备的解决方法(设备出现错误或设备脱)

[问题描述] 在系统管理进行手工备份时,出现提示"无法打开备份设备'E:\自动备份\ufidau8xTmp\UFDATA.BAK'.设备出现错误或设备脱机.详细信息请参阅SQL Server 错误日志.-2147217900" 再点"确定"后会提示一个建议"1.检查提示路径的磁盘剩余空间大小,或者提示的目录是否存在:2.检查提示的系统库账套路径d:\u8soft\Admin\server\,与mdf数据文件目录(ZT+账套号\年号,此部分不保存在系统库中)