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)
    }
复制代码

总结

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

转载于:https://juejin.im/post/5d50de41e51d4561e721debd