目錄

前言

?問題

支付場景非法或請在微信外打開訂單

微信公眾號支付 錯誤chooseWXPay:fail, the permission value is offline verifying

其他支付對接方式

H5微信支付

支付寶支付

支付各環境測試情況

寫在最后

---

前言

這次項目是基于react寫的一個h5，這篇是支付遇到的問題~

?問題

支付場景非法或請在微信外打開訂單

解決方法

區別環境使用不同的微信API。

首先遇到的一個坑就是不同環境下的支付需要調用不同的API類型。

例如我這次的項目有兩種支付環境，可以區分為微信環境和非微信環境。因此，對應就需要用到下圖中的JSAPI支付和H5支付。

微信支付開發文檔的截圖

原來我都是按H5寫，調用支付的時候就自己想當然的使用H5支付。于是在微信環境內測試就出現了如下問題。

H5支付文檔中的常見問題5

微信H5支付文檔中的常見問題的確很實用，遇到的錯誤都可以再這里找到問題原因。

既然說是H5支付不能再微信客戶端內調起，那么就只能換一個了，于是我仔細看了下文檔才發現微信環境內調用是需要使用JSAPI的?。

JSAPI使用比較簡單，前面基本的設置，JSAPI支付文檔已經寫的很清楚了，后面的調用也都是由后端調用。

后端注意交易類型的區分：trade_type=MWEB（H5支付）trade_type=JSAPI（JSAPI支付）否則會報支付場景非法。

前端判斷代碼：

// 示例代碼來源于官方文檔 function onBridgeReady(){WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":"wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp":"1395712654", //時間戳，自1970年以來的秒數 "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式： "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 },function(res){if(res.err_msg == "get_brand_wcpay_request:ok" ){// 使用以上方式判斷前端返回,微信團隊鄭重提示：//res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。} }); } if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);} }else{onBridgeReady(); }

getBrandWCPayRequest參數可以全部由后端返回。前端只需要調用WeixinJSBridge內置對象和判斷返回結果即可。具體要仔細研讀文檔。

// 判斷是否是微信環境的代碼 var isWechart = function () {var rst = trueif(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){var ua = navigator.userAgent.toLowerCase();if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {rst = false;}}else {rst = false;}return rst;}/* ------------------- 其他 js判斷瀏覽器的環境代碼 --------------------------*/ /* 參考鏈接：https://www.jb51.net/article/178066.htm */// 判斷微信瀏覽器是PC端還是手機端，以及手機端是微信瀏覽器還是非微信瀏覽器 //平臺、設備和操作系統 var system = { win: false, mac: false, xll: false, ipad: false}; //檢測平臺 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false; //跳轉語句，如果是手機訪問就自動跳轉到wap.baidu.com頁面 if (system.win || system.mac || system.xll || system.ipad) { alert("在PC端上打開的");} else { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { alert("在手機端微信上打開的"); } else { alert("在手機上非微信上打開的"); } }// 判斷瀏覽器函數 // 方法一function isMobile(){if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {return true; // 移動端}else{return false; // PC端}}// 方法二摘自：im.qq.com var os = function() { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua), isChrome = /(?:Chrome|CriOS)/.test(ua), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), isPhone = /(?:iPhone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isSymbian; return { isTablet: isTablet, isPhone: isPhone, isAndroid : isAndroid, isPc : isPc }; }(); // 使用方法 if(os.isAndroid || os.isPhone){ alert("-----"); }

微信公眾號支付 錯誤chooseWXPay:fail, the permission value is offline verifying

為了方便測試我開了微信開發者工具的公眾號網頁來測試，普通功能是沒問題的，調支付接口的話就會報錯。

有兩種可能，一種是非真機調用引起的，一種是url地址錯誤。

解決方法

一是在模擬器中實行發起支付，要在真機是發起

二是微信公眾號支付授權目錄要填寫實際發起支付的url地址，比如你的頁面是http://www.newfms.com/order/pay/id-115，那么此處應該填http://www.newfms.com/order/pay/

參考鏈接：https://blog.csdn.net/haibo0668/article/details/85209238

其他支付對接方式

H5微信支付

h5微信支付調用比較簡單，由后端調統一下單接口，返回一個url地址，前端只需要跳轉這個url就行。

支付寶支付

支付寶的也很簡單，由后端發起訂單請求，根據返回的訂單數據來拉起支付寶支付。

我采用的是form提交。

let temp = document.createElement("form"); temp.action = res.action; temp.method = res.method; temp.style.display = "none"; let params = res.para; for (const k in params) {let opt = document.createElement("input");opt.name = k;opt.value = params[k];temp.appendChild(opt); } document.body.appendChild(temp); temp.submit();// 參考鏈接： https://www.cnblogs.com/jun-qi/p/12313495.html

最后走通流程測試后，發現支付寶支付有個問題， form表單調用支付寶會跳轉到H5收銀臺頁面然后再調起跳轉到支付寶APP，在取消支付后回來，H5收銀頁無法關閉。

至此開始走了不少彎路。。。

首先是寫了iframe，讓H5收銀頁顯示在iframe中，再額外手動寫個關閉按鈕放上去。

解決了H5收銀頁關閉的問題，出現了另一個問題，在IOS中，iframe無法調起支付寶APP，并且在安卓中也需要用戶手動點擊藍色的【使用支付寶APP付款】的按鈕才可以跳轉，并不是自動跳轉。

除此之外前前后后還試了不少方法，看了幾遍文檔，無奈后端小哥哥太忙，沒有時間配合我做其他方法的測試。最后好歹是發現了控件跳轉這個方法（其實也在文檔中）。

但是這個方法前端并不用做什么事情，我查過收銀頁的代碼，發現跳轉的代碼是寫在這里的，并且也有打印出來，只是我無法獲取到，于是改由后端去訪問，再返回已經拼接好的（以alipay:// 或 alipays:// 開頭的）跳轉鏈接，前端只需要重定向到這個鏈接就能不跳轉收銀頁調起支付寶APP了。

支付各環境測試情況

大致測試結果如圖，由于是我項目完成后總結回憶的，并且安卓的測試情況由后端小哥哥提供，所以可能有偏差，歡迎指正~

項目要求是微信環境下不設支付寶支付，所以“ - ” 都是不需要測試的情況，僅使用微信JSAPI即可。

最終出了微信環境下微信支付，其他項目全部采用控件調起APP支付，微信控件支付同支付寶調起類似，也是后端返回拼接好的以weixin://? 開頭的跳轉鏈接，重定向即可。但是如上圖所示，可以看出在IOS中會出現支付完成或取消后跳轉QQ瀏覽器的頁面。不大清楚有沒有自身錯誤操作的原因，但是最終沒找到問題，卸載QQ瀏覽器后也不是跳到IOS默認瀏覽器Safari中，而是直接關閉支付彈窗，需要像支付寶一樣手動返回自己的網站或者網頁。

寫在最后

支付功能一度被我放在項目進度后面的后面，但是其實了解了后就覺得也沒有很棘手，官方文檔還是要好好看~看多幾個人家寫的demo就差不多啦~

總結

以上是生活随笔為你收集整理的关于对接支付接口遇到的问题（微信和支付宝）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。