当前位置：首页 > 资讯 > 技术文档

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

时间：2022-04-21 05:43 编辑：来源：阅读：
扫一扫，手机访问

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

因为项目需要，要在H5页面中加入微信支付，所以便去尝试，只想说真的很坑，尤其调试起来不方便这是微信的官方API文档 [url=https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7]微信API[/url] [b]微信支付的准备工作 [/b] 申请公众号，申请开通支付，这个很简单，自行百度申请好之后在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”，“测试授权目录”，“测试白名单” 在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)” 在商户平台中找到微信支付分配的商户号，以及自己配置一个商户支付密钥 [b]具体步骤[/b] 首先通过微信支付的api 获得支付用的prepay_id，这里需要用到上面提到的“AppID(应用ID)”，“AppSecret(应用密钥)”，“微信支付分配的商户号”，“商户支付密钥”以及其他的一些参数（具体参照微信开发文档）用MD5加密成签名（第一次签名）获得prepay_id后，用prepay_id和一些其他参数（具体参照微信开发文档）用MD5加密成签名（第二次签名）然后在前端通过微信内置浏览器提供的js API，WeixinJSBridge.invoke来调用微信支付的弹出页面，这里需要用到上面的第二次的签名 [b]具体代码如下[/b]

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

全部评论(0)

上一篇：JS实现光滑展开合拢的菜单效果代码
下一篇：基于JavaScript短信验证码如何实现

资讯排行榜
更多>>