微信支付以内置浏览器的H5页面支付

微信支付以内置浏览器的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中有中文须要转义

其中还有一些问题没有彻底解决，就是位置支付没有一个判断失效的时间，若是在微信支付的弹出层停留时间过久了，可能这个订单在咱们网站上
已经失效了，可在微信支付中仍然能支付成功，若是有高人知道这个问题怎么解决的，但愿能告诉解决办法