微信H5支付前端遇到的問題(Vue專案)

H5支付主要是在手機、ipad等移動設備中通過瀏覽器來喚起微信支付的支付產品，

H5支付官方檔案鏈接：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1

需求要求：需要給甲方app提供一個h5鏈接實作商城商品微信h5支付 ；（甲方app當作非微信客戶端瀏覽器）

按照官方開發流程：

1、用戶在商戶側完成下單，使用微信支付進行支付

2、由商戶后臺向微信支付發起下單請求（呼叫統一下單介面）注：交易型別trade_type=MWEB

3、統一下單介面回傳支付相關引數給商戶后臺，如支付跳轉url（引數名“mweb_url”），商戶通過mweb_url調起微信支付中間頁

4、中間頁進行H5權限的校驗，安全性檢查（此處常見錯誤請見下文）

5、如支付成功，商戶后臺會接收到微信側的異步通知

6、用戶在微信支付收銀臺完成支付或取消支付,回傳商戶頁面（默認為回傳支付發起頁面）

7、商戶在展示頁面，引導用戶主動發起支付結果的查詢

8,9、商戶后臺判斷是否接收到微信側的支付結果通知，如沒有，后臺呼叫我們的訂單查詢介面確認訂單狀態（查單實作可參考：支付回呼和查單實作指引）

10、展示最終的訂單支付結果給用戶

首先遇到的問題是提示如下：

參照：其它常見錯誤型別序號2：

1. 當前調起H5支付的referer為空導致，一般是因為直接訪問頁面調起H5支付，請按正常流程進行頁面跳轉后發起支付，或自行抓包確認referer值是否為空；

問題解決: <meta name="referrer" content="no-referrer"> 修改為<meta name="referrer">

再次遇到的報錯問題如下：

參照：其它常見錯誤型別序號3：

1，當前調起H5支付的域名（微信側從referer中獲取）與申請H5支付時提交的授權域名不一致，如需添加或修改授權域名，請登錄商戶號對應的【商戶平臺->產品中心->開發配置】自行配置；

問題出現原因：為了統一收款賬戶名稱，管理人員重新配置了商戶號，測驗環境，后臺人員后使用了生產的appid；這是由前后端配置的appid不一致導致的，

其它需要注意的問題是否配置redirect_url(配置后遇到的問題)：

   AWechatH5Pay ({ state, commit, dispatch, rootState }) {
        const {orderId, payAmount, isPlusH5} = state.orderInfo;
        const params = { payMethod: 'H5', payType: '1' }
        return dispatch('AGetH5PaymentSignInfo', params).then(res => {
            const { data: signature, error } = res
            const {origin, pathname} = window.location;
            const reUrl = origin+pathname+"#/payment/h5result?payAmount="+payAmount+"&flag=2&orderId="+orderId+"&isPlusH5="+isPlusH5;
           
            const replaceUrl = signature.mweburl+'&redirect_url=' + encodeURIComponent(reUrl);
            window.location.href = replaceUrl;
        })
      }, 

拼接了指定回呼頁面地址，執行跳轉時無論用戶后續是否支付都會跳轉到落地頁（具體看下面2）

1.需對redirect_url進行urlencode處理

2.由于設定redirect_url后,回跳指定頁面的操作可能發生在：
a、微信支付中間頁調起微信收銀臺后超過5秒
b、用戶點擊“取消支付”或支付完成后點擊“完成”按鈕，因此無法保證頁面回跳時，支付流程已結束，所以商戶設定的redirect_url地址不能自動執行查單操作，應讓用戶去點擊按鈕觸發查單操作，

當使用window.location.href或open執行跳轉時會出現呼叫微信支付網頁空白屏的程序；

這時可以借助iframe來實作支付跳轉：

AWechatH5Pay ({ state, commit, dispatch, rootState }) {
        const {orderId, payAmount, isPlusH5} = state.orderInfo;
        const params = { payMethod: 'H5', payType: '1' }
        return dispatch('AGetH5PaymentSignInfo', params).then(res => {
            const { data: signature, error } = res
            const {origin, pathname} = window.location;
            const reUrl = origin+pathname+"#/payment/h5result?payAmount="+payAmount+"&flag=2&orderId="+orderId+"&isPlusH5="+isPlusH5;
           
            const replaceUrl = signature.mweburl+'&redirect_url=' + encodeURIComponent(reUrl);
            const iframe = document.createElement('iframe')
            iframe.style.display ='none'
            iframe.setAttribute('src', replaceUrl)
            iframe.setAttribute('sandbox','allow-top-navigation allow-scripts')
            document.body.appendChild(iframe)
            // window.location.href = replaceUrl;
        })
      }, 

如果用戶執行h5支付不想直接跳轉落地頁則不設定指定回呼頁面地址redirect_url，如下

/**
       * 微信H5支付-非微信客戶端打開-其他瀏覽器打開頁面
       * @param {*} param0
       * @param {*} payType
       */
      AWechatH5Pay ({ state, commit, dispatch, rootState }) {
        // const {orderId, payAmount, isPlusH5} = state.orderInfo;
        const params = { payMethod: 'H5', payType: '1' }
        return dispatch('AGetH5PaymentSignInfo', params).then(res => {
            const { data: signature } = res
            const replaceUrl = signature.mweburl;
            const iframe = document.createElement('iframe')
            iframe.style.display ='none'
            iframe.setAttribute('src', replaceUrl)
            iframe.setAttribute('sandbox','allow-top-navigation allow-scripts')
            document.body.appendChild(iframe)
            return Promise.resolve({ res:'執行完h5支付' });
        })
      }, 

 <!-- 訂單確認彈窗 -->
    <van-dialog
      v-model:show="DialogSure.show"
      :closeOnClickOverlay="false"
      :showCancelButton="true"
      @confirm="DialogSure.confirm(1)"
      @cancel="DialogSure.confirm(0)"
      confirmButtonText="已完成支付"
      title="支付確認"
    >
      <section class="confirm_dialog">
        請在微信內完成支付，如果您已支付成功，請點擊"已完成支付"按鈕，
      </section>
    </van-dialog>


const loading = showLoadding(20000);
store.dispatch('payment/AWechatH5Pay').then(res => {
    //打開訂單確認彈窗
    //引導用戶主動查詢支付結果；
    //長輪訓查詢訂單支付狀態-如果成功跳轉支付結果頁面
}).finally(()=>{
    loading.clear()
})

如下圖：

參考京東h5支付鏈(非微信客戶端瀏覽器打開)

https://item.m.jd.com/product/10023152628285.html?gx=RnFixzVbYTDbw9RP--sAKaTjuWvZ02ARkmQ&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL