h5唤起支付(微信和支付宝)

• h5调用微信支付

  // 微信支付
  weChatPay(data){
          var vm= this;
   //下面是解决WeixinJSBridge is not defined 报错的方法
          if (typeof WeixinJSBridge == "undefined"){
               if( document.addEventListener ){
                     document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
                     document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
                    }
                    }else{
                      vm.onBridgeReady(data);
                    }
            },
       // 调起微信支付 （data：后台传来的支付参数）
onBridgeReady(data){
          let that = this
                 WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',{
                        "appId":data.appId,
                        "timeStamp": data.timestamp,
                        "nonceStr":data.nonceStr,
                        "package": data.package,
                        "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('取消支付')
                           } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                               alert('支付失败')
                            }
                    }
                )
            },

注意：微信支付回调需放到线上才能获取

• h5调用支付宝支付

    var form= res.data.result.jsConfig; // 后台返回的form
     const div = document.createElement('div')
     div.innerHTML = form//此处form就是后台返回接收到的数据
     document.body.appendChild(div)
      document.forms[0].submit()

弊端

• 以上代码仅支持在除微信浏览器以外的浏览器
• 因为微信不能直接使用支付宝，会提示‘请长按网址复制后使用浏览器访问’，使用效果不好，ios不支持

修改后的支付宝支付

增加支付提示页面，使用其他浏览器打开

---

   var form= res.data.result.jsConfig;
   const div = document.createElement('div')
   div.innerHTML = form//此处form就是后台返回接收到的数据
   document.body.appendChild(div)
   var queryParam = '';
   Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {
        queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);});
        var gotoUrl = document.querySelector("form").getAttribute('action')  + queryParam;
       window._AP.pay(gotoUrl);