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)
    }
複製代碼

總結

只有你弄清楚整個流程，前端這塊仍是挺簡單的😸