目錄

前言

?問題

支付場景非法或請?jiān)谖⑿磐獯蜷_訂單

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

其他支付對接方式

H5微信支付

支付寶支付

支付各環(huán)境測試情況

寫在最后

---

前言

這次項(xiàng)目是基于react寫的一個(gè)h5，這篇是支付遇到的問題~

?問題

支付場景非法或請?jiān)谖⑿磐獯蜷_訂單

解決方法

區(qū)別環(huán)境使用不同的微信API。

首先遇到的一個(gè)坑就是不同環(huán)境下的支付需要調(diào)用不同的API類型。

例如我這次的項(xiàng)目有兩種支付環(huán)境，可以區(qū)分為微信環(huán)境和非微信環(huán)境。因此，對應(yīng)就需要用到下圖中的JSAPI支付和H5支付。

微信支付開發(fā)文檔的截圖

原來我都是按H5寫，調(diào)用支付的時(shí)候就自己想當(dāng)然的使用H5支付。于是在微信環(huán)境內(nèi)測試就出現(xiàn)了如下問題。

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

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

既然說是H5支付不能再微信客戶端內(nèi)調(diào)起，那么就只能換一個(gè)了，于是我仔細(xì)看了下文檔才發(fā)現(xiàn)微信環(huán)境內(nèi)調(diào)用是需要使用JSAPI的?。

JSAPI使用比較簡單，前面基本的設(shè)置，JSAPI支付文檔已經(jīng)寫的很清楚了，后面的調(diào)用也都是由后端調(diào)用。

后端注意交易類型的區(qū)分：trade_type=MWEB（H5支付）trade_type=JSAPI（JSAPI支付）否則會(huì)報(bào)支付場景非法。

前端判斷代碼：

// 示例代碼來源于官方文檔 function onBridgeReady(){WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":"wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp":"1395712654", //時(shí)間戳，自1970年以來的秒數(shù) "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式： "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 },function(res){if(res.err_msg == "get_brand_wcpay_request:ok" ){// 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：//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參數(shù)可以全部由后端返回。前端只需要調(diào)用WeixinJSBridge內(nèi)置對象和判斷返回結(jié)果即可。具體要仔細(xì)研讀文檔。

// 判斷是否是微信環(huán)境的代碼 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判斷瀏覽器的環(huán)境代碼 --------------------------*/ /* 參考鏈接：https://www.jb51.net/article/178066.htm */// 判斷微信瀏覽器是PC端還是手機(jī)端，以及手機(jī)端是微信瀏覽器還是非微信瀏覽器 //平臺(tái)、設(shè)備和操作系統(tǒng) var system = { win: false, mac: false, xll: false, ipad: false}; //檢測平臺(tái) 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; //跳轉(zhuǎn)語句，如果是手機(jī)訪問就自動(dòng)跳轉(zhuǎn)到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("在手機(jī)端微信上打開的"); } else { alert("在手機(jī)上非微信上打開的"); } }// 判斷瀏覽器函數(shù) // 方法一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; // 移動(dòng)端}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("-----"); }

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

為了方便測試我開了微信開發(fā)者工具的公眾號網(wǎng)頁來測試，普通功能是沒問題的，調(diào)支付接口的話就會(huì)報(bào)錯(cuò)。

有兩種可能，一種是非真機(jī)調(diào)用引起的，一種是url地址錯(cuò)誤。

解決方法

一是在模擬器中實(shí)行發(fā)起支付，要在真機(jī)是發(fā)起

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

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

其他支付對接方式

H5微信支付

h5微信支付調(diào)用比較簡單，由后端調(diào)統(tǒng)一下單接口，返回一個(gè)url地址，前端只需要跳轉(zhuǎn)這個(gè)url就行。

支付寶支付

支付寶的也很簡單，由后端發(fā)起訂單請求，根據(jù)返回的訂單數(shù)據(jù)來拉起支付寶支付。

我采用的是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

最后走通流程測試后，發(fā)現(xiàn)支付寶支付有個(gè)問題， form表單調(diào)用支付寶會(huì)跳轉(zhuǎn)到H5收銀臺(tái)頁面然后再調(diào)起跳轉(zhuǎn)到支付寶APP，在取消支付后回來，H5收銀頁無法關(guān)閉。

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

首先是寫了iframe，讓H5收銀頁顯示在iframe中，再額外手動(dòng)寫個(gè)關(guān)閉按鈕放上去。

解決了H5收銀頁關(guān)閉的問題，出現(xiàn)了另一個(gè)問題，在IOS中，iframe無法調(diào)起支付寶APP，并且在安卓中也需要用戶手動(dòng)點(diǎn)擊藍(lán)色的【使用支付寶APP付款】的按鈕才可以跳轉(zhuǎn)，并不是自動(dòng)跳轉(zhuǎn)。

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

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

支付各環(huán)境測試情況

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

項(xiàng)目要求是微信環(huán)境下不設(shè)支付寶支付，所以“ - ” 都是不需要測試的情況，僅使用微信JSAPI即可。

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

寫在最后

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。