vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題

更新時間：2020年04月14日 08:34:11 作者：YoLinDeng

這篇文章主要介紹了vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

1.JSAPI

在微信內(nèi)部可以直接喚起微信瀏覽器的內(nèi)置對象 WeixinJSBridge
廢話不多說直接上代碼：

// 調(diào)用后端接口拿到JSAPI支付所需參數(shù)，我在beforeRouteEnter的時候調(diào)用。
api.apply.jsApiPay(obj).then(res => {
     if (res.data.code === '0000') {
      vm.params = res.data.bean
     } else {
      alert('微信支付調(diào)起失敗！')
     }
    }).catch(err => {
     alert(err)
    })

// 點擊支付時候調(diào)用
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, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）
     signType: params.signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
     paySign: params.paySign // 支付簽名
    },
    function (res) {
     if (res.err_msg === 'get_brand_wcpay_request:ok') {
      that.queryOrder() // 這里是查詢訂單是否支付完成，然后執(zhí)行成功和失敗的業(yè)務(wù)邏輯
     } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
      alert('支付失敗！')
     }
    }
   )
  },

在微信支付的回調(diào)函數(shù)中，當res.err_msg 為

get_brand_wcpay_request:ok 時，支付狀態(tài)不一定準確，因此需要調(diào)用后端的查詢訂單接口，查詢是否支付完成，然后再執(zhí)行相應的邏輯。

2、H5支付

h5相對簡單，前端只需要跳轉(zhuǎn)到后端返回的鏈接即可

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)
     })

第一步，請求后端接口，需要傳支付的標題，訂單號，支付時間，重定向鏈接。

第二部，們只需要點擊支付按鈕時候跳轉(zhuǎn)至后端返回鏈接即可。

window.location.href = this.h5PayUrl

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

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

到此這篇關(guān)于vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題的文章就介紹到這了,更多相關(guān)vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: