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支付相關實現過程及常見問題內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！