js 支付功能

提示：做项目以来，做过h5页面支付，做过微信公众号页面支付，总的来说，就是微信支付和支付宝支付。本章是对支付功能一些总结，反正调支付功能看起来简单，坑也不少，所以简单记录一下，希望下次写到能更顺利

---

前言

本章主要两大块，api总结和项目总结，之前项目已经结束有一段时间了，现在总结的可能会有疏忽遗漏，所以仅供参考，下次再遇到会查缺补漏

---

API总结

1.微信支付

• 支付开发文档

1.1 JSAPI支付

• JSAPI支付开发文档

1.1.1 业务流程：

- 下单
- 获取支付单参数prepay_id,paySign等
- 发起支付，请求JSAPI接口
- 输入密码，同时提交支付授权
- 获得支付结果
- 跳转页面

1.1.2 微信内H5调起支付

• 在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。
• 注意：WeixinJSBridge内置对象在其他浏览器中无效。
• JS API的返回结果:
  • get_brand_wcpay_request:ok 用户成功完成支付
  • get_brand_wcpay_request:cancel 用户遇到错误
  • get_brand_wcpay_request:fail 用户主动放弃

代码如下（示例）：

function onBridgeReady(){
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
            "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
            "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
            "package":"prepay_id=u802345jgfjsdfgsdg888",     
            "signType":"MD5",         //微信签名方式：     
            "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
        },
        function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            } 
        }
    ); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

---

1.2 小程序支付

• JSSDK支付开发文档

代码如下（示例）：

wx.requestPayment({
    'timeStamp': '',
    'nonceStr': '',
    'package': '',
    'signType': 'MD5',
    'paySign': '',
    'success':function(res){},
    'fail':function(res){},
    'complete':function(res){}
})

---

1.3 H5支付

• 主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付
• 后端会返回一个支付的路径，跳到微信支付进行操作就可以了
• 正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。

代码如下（示例）：

// 拼接后的地址为MWEB_URL为：
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

代码如下（示例）：

this.payUrl = res.data.data.codeUrl 
window.location.href = this.payUrl + '&redirect_url='回调地址'

---

1.4 PC或native

1.4.1 二维码支付

• 扫码支付
• 后端返回一个支付二维码的图片，前端做展示就好了

---

2.支付宝支付

待补充

---

项目总结

JSAPI支付（vue+微信公众号）

• 坑一： WeixinJSBridge.invoke() 里的参数得是json格式，双引号不要省，不知道是不是重点，反正做就对了
• 坑二： data的数据是下单之后，后台调微信统一下单接口返回的数据，要注意，最好让后端完全组装好数据，再返回，前端直接拿来用，这样不是为了偷懒，是经验之谈，因为后端得到微信返回的数据要经过加签和二次加签，整理一下才能给前端用，既然都要处理，不如一次到位，完全封装好再返回，前端直接拿来用，出bug的可能会更小一点

代码如下（示例）：

// 在下单方法里调用
this_.callpay(res.data.datas);

// 支付代码
wxPay(data) {
  var that = this;
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",
      {
        "appId": data.appId,     //公众号名称，由商户传入     
        "timeStamp":data.timeStamp, //时间戳，自1970年以来的秒数     
        "nonceStr":data.nonceStr, //随机串     
        "package":data.package,     
        "signType":"MD5",         //微信签名方式：     
        "paySign":data.paySign //微信签名 
      },
      function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
           console.log('支付成功');
        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
          console.log('支付取消');
        } else {
          console.log('支付失败');
        }
      }
   );
},
callpay(data) {
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", this.wxPay, false);
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", this.wxPay);
        document.attachEvent("onWeixinJSBridgeReady", this.wxPay);
      }
    } else {
      this.wxPay(data);
    }
}

---

JSAPI 支付踩坑

问题描述：

调起支付返回：“支付验证签名失败”

---

原因分析：

找了各种可能的原因，一一尝试

1. 检查签名

   • 检查签名
   • 加密方式前端后台明确MD5 还是 HMAC-SHA25
   • 检查total_fee
   • 参数的一些错误，比如大小写问题
   • 后台在给前端准备参数的时候，是要进行两次签名的
   • appID第二次校验的appid不对。应该校验的是子商户发起支付的appid,而我传的是公众号的appid，所以不对。

2. 检查商户号授权目录、秘钥、关联账号

   • 确认公众号的 baiappSecret 和商户号的 API 密钥没有搞混
   • 重置商户 API 密钥。
   • 确认公众号授权的域名和目录是正确的

3. 编码方式

   • utf-8

4. 其他参数

   • 商品信息包含空格
   • 参数 body 含有中文字符

5. demo

   • demo-java

---

解决方案：

上述诸多原因试过来，前后端都有修改，最后顺利解决

• 后台： 二次签名，中文字符编码，参数确认
• 前端： 传参数得是 JSON 对象

{
    "appId": data.appId,     //公众号名称，由商户传入
    "timeStamp":data.timeStamp,        //时间戳，自1970年以来的秒数
    "nonceStr":data.nonceStr, //随机串
    "package":data.package,
    "signType":"MD5",         //微信签名方式：
    "paySign":data.paySign //微信签名
},

• 结果：OK

---

总结

本章项目代码，主要总结了在微信公号里调起支付，前端代码不多，但是因为最后测功能时，微信报错提示语简单，无法准确定位错误所在，所以跟后端一起排坑，最后顺利解决，所以上述一些bug，还有一些是后端问题，总之，具体做项目时，参照API来，很多bug在字里行间藏着，仔细阅读，仔细比对，实在不行就找度娘，肯定能顺利解决，加油！