快應用微信H5支付

這個id我沒想好發表於2019-02-16
H5

快應用微信H5支付

1.首先是服務端完成支付服務端的接入，接入完成以後，伺服器要完成的工作是接收來自客戶端的支付請求，然後生成一個訂單，之後把訂單傳給微信的伺服器，微信會返回一個mweb_url，伺服器需要把這個mweb_url返回給客戶端；

data:{
    orderId :56955,
    url:`https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602`
}

2.完成一箇中間跳轉頁面，中間頁需要在載入完成的時候從頁面的get引數中解析出 mweb_url , 然後自動向這個url跳轉；生成一個https://my.demain.com/html/bo… H5連結

//中間頁面H5的邏輯
  var payUrl = decodeURIComponent(getQueryString(`mweb_url`))
  if (payUrl !== `null`) {
    window.location.replace(payUrl)
  }

  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var l = decodeURI(window.location.search);
    var r = l.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }

3.關於這個中間頁:

  • 為什麼需要這個中間頁？
  • 因為微信h5支付拉起支付介面的方式就是向mweb_url跳轉，不過因為微信會通過ref做防盜鏈檢查，因為跳轉動作需要在開發者的頁面中完成
  • 這個中間頁什麼時候會被載入執行？呼叫微信支付的pay介面之後，平臺會自動載入執行這個頁面
  • 載入執行這個中間頁的時候，會拿到哪些引數？呼叫微信支付的pay介面時傳入的引數，會全部作為get引數傳給這個頁面

4.在快應用中進行配置中間頁地址,manifest.json中宣告wxpay這個feature時填上

 {
     "name": "service.wxpay",
     "params": {
     "package": "you.package.name",
     "sign": "abcdefg",
     "url": "https://my.demain.com/html/bookSoter/index.html"
  }
}

5.呼叫官方文件提供的wxpay.getType()方法

wechatPayHandle(){
    var payType = wxpay.getType();
    if (payType === `MWEB`) {
    wxpay.pay({
      //微信網頁支付的prepayId
      prepayid: `wx13101012415473b5899768303880086259`,
      extra: {
        //傳遞給支付頁面的自定義引數, 根據需要進行設定, 會被urlEncode之後拼接在配置的url尾部
        mweb_url: `https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602`
      },
      fail: function (data, code) {
        console.log(`WX H5 PAY handling fail, code = ${code}`)
      },
      cancel: function () {
        console.log(`WX H5 PAY handling cancel`)
      },
      success: function (data) {
        //H5方式下，支付成功的回撥僅僅只是指將訂單遞交給微信，並不意味著支付已經成功完成
        console.log(data)
      }
    })
  }
}

6.如果pay()方法走成功以後會返回一個data，不需要做任何操作和跳轉，就可以喚起微信支付，返回的格式如下：

{
finl_url:"https://my.demain.com/html/bookSoter/index.html?repayid=wx13101012415473b5899768303880086259&trade_type=MWEB&mweb_url=https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx13101012415473b5899768303880086259%26package%1999421602"
    }

7.如果走了success回撥函式以後，微信喚起不成功存在可能有

  • 生成的H5中間頁面的域名沒有在微信開發平臺上面配置白名單；
  • 服務端程式碼釋出環境和你測試環境在同一個區域網裡面

8.如果走了fail回撥函式，看返回的code值

  • 900 在manifest.json中配置的應用簽名有誤，無法解析
  • 901 在manifest.json中配置的應用包名有誤
  • 1000 微信未安裝
  • 1001 用於微信網頁支付的url配置找不到
  • 2001 訂單已經提交給微信，但是微信返回錯誤, 可能的原因：簽名錯誤、未註冊APPID、專案設定APPID不正確、註冊的APPID與設定的不匹配、其他異常等。

相關文章