web端的微信支付可分為JSAPI與H5

JSAPI使用場景為微信內部，而H5支付則是使用在非微信下的外部瀏覽器。

1.JSAPI

在微信內部可以直接喚起微信瀏覽器的內建物件 WeixinJSBridge
廢話不多說直接上程式碼：

// 呼叫後端介面拿到JSAPI支付所需引數，我在beforeRouteEnter的時候呼叫。
api.apply.jsApiPay(obj).then(res => {
     if (res.data.code === '0000') {
      vm.params = res.data.bean
     } else {
      alert('微信支付調起失敗！')
     }
    }).catch(err => {
     alert(err)
    })

// 點選支付時候呼叫
if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
     document.addEventListener('WeixinJSBridgeReady',this.onBridgeReady(this.params),false)
    } else if (document.attachEvent) {
     document.attachEvent('WeixinJSBridgeReady',this.onBridgeReady(this.params))
     document.attachEvent('onWeixinJSBridgeReady',this.onBridgeReady(this.params))
    }
   } else {
    this.onBridgeReady(this.params)
   }


onBridgeReady (params) {
   const that = this
   WeixinJSBridge.invoke(
    'getBrandWCPayRequest',{
     appId: params.appId,// 公眾號名稱，由商戶傳入
     timeStamp: params.timeStamp,// 支付簽名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
     nonceStr: params.nonceStr,// 支付簽名隨機串，不長於 32 位
     package: params.prepay_id,// 統一支付介面返回的prepay_id引數值，提交格式如：prepay_id=\*\*\*）
     signType: params.signType,// 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'
     paySign: params.paySign // 支付簽名
    },function (res) {
     if (res.err_msg === 'get_brand_wcpay_request:ok') {
      that.queryOrder() // 這裡是查詢訂單是否支付完成，然後執行成功和失敗的業務邏輯
     } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
      alert('支付失敗！')
     }
    }
   )
  },

在微信支付的回撥函式中，當res.err_msg 為

get_brand_wcpay_request:ok 時，支付狀態不一定準確，因此需要呼叫後端的查詢訂單介面，查詢是否支付完成，然後再執行相應的邏輯。

2、H5支付

h5相對簡單，前端只需要跳轉到後端返回的連結即可

api.apply.h5Pay({
      title: ''
      orderNum: '',expireMinute: 10,redirectUrl: `${window.location.origin}/pay/card?orderId=${vm.orderId}`
     }).then(res => {
      vm.h5PayUrl = res.data.bean
      // 查詢訂單
     }).catch(err => {
      alert(err)
     })

第一步，請求後端介面，需要傳支付的標題，訂單號，支付時間，重定向連結。

第二部，們只需要點選支付按鈕時候跳轉至後端返回連結即可。

window.location.href = this.h5PayUrl

需要注意的是H5支付查詢訂單需要使用者去手動觸發，因此需要增加一個確定訂單的彈層。如圖：

查詢訂單是否支付成功與JSAPI一致~

到此這篇關於vue專案前端微信JSAPI與外部H5支付相關實現過程及常見問題的文章就介紹到這了,更多相關vue專案前端微信JSAPI與外部H5支付相關實現過程及常見問題內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！