前端在h5页面调起微信支付接口和支付宝接口（日常笔记）

微信支付

结合微信支付的api文档进行配置。参考JSAPI支付开发者文档——微信内H5调起支付

微信文档中的例子如下。

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();
}

我们主要是从后台中获取数据传入onBridgeReady这个方法中。
所以第一步是获取数据，第二步是把获取到的数据传入到onBridgeReady方法
第一步：发送请求获取后台数据
1.在对应的api文件下封装请求（get）

export function wechatPay(type, vid, token, point, discount) {
  let discount_type = discount || null
  return axios.get(`${Host}/api/save_mobile`,{
    params: {
      pay_type: type,
      video_id: vid,
      token,
      point,
      discount_type
    }
  })
}

2.在对应的组件调用请求

发送支付请求

import { wechatPay } from '../../../api/pay.js'

export default {
  name: 'payfooter',
  computed: {
    info() {
      return this.$store.state.user.info
    },
    // 获取选择支付的方式
    paytype() {
      return this.$store.state.pay.paytype
    }
  },
  methods: {
    _wechatPay(type, vid, token, point) {
       wechatPay(type, vid, token, point).then(res => {
            console.log(res) // 这个res就是后台返回的数据
       })
    }
  }
} 

3.后台返回的json格式数据如下（这不是console出来，方便显示我就直接把json数据复制过来）

{
    "code": 0,
    "data": {
        "appId": "wx5beac*******7c40c",
        "nonceStr": "8491k3******Rs5",
        "package": "prepay_id=wx07**************2653",
        "paySign": "CDE21B*************40C1A",
        "signType": "MD5",
        "timeStamp": "15******1"
    },
    "msg": null
}

第二步：把数据传给onBridgeReady函数
所以真正需要获取的内容是 res.data.data，然后再把res.data.data的值传给onBridgeReady函数
4.重新整理一下代码就是

  methods: {
    _wechatPay(type, vid, token, point) {
       wechatPay(type, vid, token, point).then(res => {
            res = res.data
            if(res.code === 0) {
                this.onBridgeReady(res.data) // 这样就把res.data传给onBridgeReady函数
            }
       })
    },
    // 微信支付api相关配置文档
    onBridgeReady(data) {
      if (typeof WeixinJSBridge === 'undefined') {
        this.$toast({ message: '请使用微信内置浏览器进行支付' })
      } else {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.package,
            signType: data.signType, // 微信签名方式：
            paySign: data.paySign // 微信签名
          },
          res => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$toast({ message: '支付成功' })
              this.$router.push({path: '/videoplayer', query: { video_id: this.$route.query.video_id }}) // 支付成功之后跳转的路由
            } else {
              this.$toast({ message: '支付失败' })
            }
          }
        )
      } 
    },
  }

支付宝支付

与微信支付不同的是，支付宝支付后台是返回form格式的数据，如下

那么在处理后台数据的时候用下面的方法（参考网络大神）

_wechatPay(type, vid, token, point) {
     wechatPay(type, vid, token, point).then(res => {
        const form = res.data
        const div = document.createElement('div')
        div.id = 'alipay'
        div.innerHTML = form
        document.body.appendChild(div)
        document.querySelector('#alipay').children[0].submit() // 执行后会唤起支付宝
     })
}