关于对接支付接口遇到的问题(微信和支付宝)
目錄
前言
?問題
支付場景非法或請在微信外打開訂單
微信公眾號支付 錯誤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就差不多啦~
總結
以上是生活随笔為你收集整理的关于对接支付接口遇到的问题(微信和支付宝)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java实现满天星动案例
- 下一篇: dellt30服务器虚拟机安装,服务器价