vue 接入 h5 支付

背景

最近接私活的时候，而后要接入支付宝支付和微信支付，注意这个是独立 h5 支付，非公众号那种，总结一下遇到的问题。

支付流程

接下来的工做就是去查阅文档了，稍微整理了一下以下图

因此总结一下，梳理整个流程之后你会发现前端这边的工做量不是很大，主要是服务端那边须要配置 sdk。下面进入具体支付动做

支付宝

支付宝这边比较简单

1. 用户下单生产流水号，关于流水号有争议，究竟是服务端给仍是前端本身生成？最后服务端不给仍是我本身生成的，而后用了个库
2. 而后服务端返回去调支付宝 api返回一段 表单,同时把流水号塞进 localStorage 里面，这里方便回来的时候去查支付结果
3. 这个时候去提交表单而后去唤醒支付宝支付，手机上没有支付宝去唤醒网页版
4. 支付完之后点完成跳转到配置的回调地址
5. 去本地 localStorage 取订单号，而后去查支付结果，通常轮询5次就够了。超过这个时间你再轮询也没用，要快就很快

// 支付宝支付
    async aliPay (id) {
      const params = {
        id,
        orderNo: _uuid().replace(/-/g, ''),
        paymentType: '1'
      }
      try {
       let res = await axios({
         method: 'post',
         data: params,
         headers: {
           common: {
             Authorization: window.localStorage.getItem('token')
           }
         }
       })
        if(res.data) {
         const d = res.data
         const div = document.createElement('div')
         div.innerHTML = d //此处form就是后台返回接收到的数据
         document.body.appendChild(div)
         document.forms[0].submit()
         window.localStorage.setItem('orderNo', params.orderNo)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 查询支付结果
    queryPayResult () {
      const orderNo = window.localStorage.getItem('orderNo')
      if (orderNo)  this.show = true
      let count = 0
      const socket = async (orderNo) => {
          const res = await getPayResult({ orderNo })
          if(res.data || res.data === 0){
              if (res.data === 1) {
                this.result = '支付成功'
              }
              if (res.data === 0) {
                this.result ='未支付'
              }
              setTimeout(() => {
                this.show = false
              }, 1000)
              window.localStorage.removeItem('orderNo')
            } else {
            count += 1
            count < 5 && socket(orderNo)
          }
      }
      //若是有就说明是从支付宝那边过来的，没有就表明第一次进来；由于查询成功后我会或者未支付我会把这个清掉
        orderNo && socket(orderNo)
    },
    mounted () {
    this.queryPayResult()
  }
复制代码

微信

1. 用户下单生产流水
2. 而后服务端返回去调微信 api返回带有 deeplink 一段 脚本,而后去执行这段脚本
3. 这个时候会调起微信客户端
4. 后面就跟支付宝同样了，惟一须要注意的地方就是微信支付基本不支持本地调试，也可能支付个人姿式不对。否则你就会遇到提示你微信支付环境不安全，不让你支付的状况

核心代码

if(res.data) {
     const d = res.data
     var reg = /<script[^>]*?>[\s\S]*?<\/script>/i;
     var len1 = d.indexOf(">")
     var len2 = d.lastIndexOf("<")
     var str3 = d.substring(len1+1,len2)
     eval(str3)
     window.localStorage.setItem('orderNo', params.orderNo)
    }
复制代码

总结

只有你弄清楚整个流程，前端这块仍是挺简单的😸