這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
背景
- 應(yīng)用背景：vite搭建的vue3項(xiàng)目
- 需求背景：功能都涉及了支付業(yè)務(wù)，故需要和外部支付系統(tǒng)對接
- 外部支付系統(tǒng)：聚合支付、微信小程序支付、微信H5支付
目錄
讀完本文，你將會對以下幾個坑點(diǎn)有所了解：
- 對接第三方服務(wù)商過程踩坑
- 對接小程序支付踩坑
- 對接微信H5支付踩坑
- 關(guān)于客戶端頁面的H5支付踩坑
一、? 對接第三方服務(wù)商過程踩坑
踩坑1：業(yè)務(wù)前期對接第三方服務(wù)商，一開始完全是由業(yè)務(wù)和服務(wù)商對接，研發(fā)團(tuán)隊(duì)沒有參與，技術(shù)風(fēng)控風(fēng)險沒能及時發(fā)現(xiàn)
解決1：只要涉及到研發(fā)工作，業(yè)務(wù)需通知研發(fā)團(tuán)隊(duì)需同時和服務(wù)商對接，這樣研發(fā)團(tuán)隊(duì)可以盡早了解到相關(guān)風(fēng)險
一開始和服務(wù)商聚合支付對接H5的支付功能，只有業(yè)務(wù)參與了。待業(yè)務(wù)敲定后再通知研發(fā)團(tuán)隊(duì)要使用服務(wù)商支付服務(wù)，接著研發(fā)團(tuán)隊(duì)和服務(wù)商研發(fā)團(tuán)隊(duì) 對接技術(shù)方案，研發(fā)完成上線
直到小程序被封第一次，研發(fā)團(tuán)隊(duì)才知道聚合支付服務(wù)是免費(fèi)的，且服務(wù)商聚合支付并沒有完全被微信支付官方認(rèn)可 所以，當(dāng)小程序被封后，服務(wù)商解決問題的態(tài)度是不積極的
踩坑2：對接第三方服務(wù)時，不要被對方的方案牽著走
解決2：使用第三方服務(wù)過程中，若方案需要調(diào)整，內(nèi)部需要及時同步并堅(jiān)定自身方案和立場
H5應(yīng)用最先方案是和服務(wù)商進(jìn)行H5支付對接，但在對接過程中，H5支付走不通。對方未告知具體原因的情況下，讓我們換成小程序支付，內(nèi)部研發(fā)團(tuán)隊(duì)沒有經(jīng)過統(tǒng)方案調(diào)整同步的情況下，服務(wù)商私自更改了對接方案；固內(nèi)部整個研發(fā)團(tuán)隊(duì)被推動著改變了支付方案，使后續(xù)開發(fā)進(jìn)行方案調(diào)整非常被動
具體分步解決
- 研發(fā)方案有變動，內(nèi)部應(yīng)同步并統(tǒng)一變動方案
- 統(tǒng)一方案后再與第三方平臺對接
二、? 對接微信小程序支付踩坑
踩坑3：使用了聚合支付，聚合支付的費(fèi)率是3‰，而微信支付商戶規(guī)定費(fèi)率是6‰，被微信支付風(fēng)控判定為竄費(fèi)率而封禁
解決3：不再通過服務(wù)商對接，小程序應(yīng)用直接和微信小程序支付對接。
項(xiàng)目上線后。騰訊突然直接把小程序封了，沒有任何預(yù)警通知，直接封。
聚合支付底層用的還是微信支付那一套系統(tǒng)，所以開發(fā)小程序?qū)邮褂玫氖俏⑿判〕绦蜉d體，那同時得遵守微信支付的規(guī)則
小程序被封后，官方發(fā)出的公告指出我們存在利用技術(shù)繞開審核的行為。并指引我們查看到以下圖中內(nèi)容
但詢問微信內(nèi)部人員，給出真正理由是：使用了聚合支付，違背了微信費(fèi)率規(guī)則
?
被騰訊封的小程序，基本是撈不回來了，所以要重新申請程序重新認(rèn)證，重新綁定商戶號 經(jīng)過微小改動，直接對接小程序支付成功上線。但過了兩天，小程序它又雙叒叕被封了！
踩坑4：這次他們給的原因是：小程序頁面沒有實(shí)質(zhì)和服務(wù)的內(nèi)容，不符合規(guī)則。
解決4：改用微信H5支付
這次被封，官方發(fā)出的公告依然指出我們存在利用技術(shù)繞開審核的行為。和上次給出的理由一樣。但詢問微信內(nèi)部人員，給出真正理由是：小程序頁面沒有實(shí)質(zhì)和服務(wù)的內(nèi)容
小程序確實(shí)只有三個頁面：登錄頁面、支付頁面，支付完成頁面
前后兩次被封的小程序關(guān)聯(lián)的都是同一個主體，微信規(guī)定，同一個商戶號下的小程序被封兩次后，該主體就會被拉入黑名單中
具體分步解決：
- 爭取把主體從小黑屋中救出來
- 主體從黑名單中放出來后，申請新的支付載體
- 新的支付載體選擇公眾號
踩坑5：使用外部平臺能力時，功能層面沒有備選方案
解決5：功能層面要規(guī)劃脫離依賴外部能力的備選方案
一開始沒有備選方案的意識。被封后，導(dǎo)致業(yè)務(wù)受阻
當(dāng)小程序相繼兩次被封后，我們意識到需要有過渡方案：預(yù)備脫離線上支付交易受阻，如何不影業(yè)務(wù)工作的方案
本應(yīng)用實(shí)現(xiàn)的備選方案：手動切換線上線下支付交易方案，當(dāng)微信支付能正常使用時，就走常規(guī)的線上交易流程。當(dāng)微信支付發(fā)生意外，被封被禁后能快速啟動線下支付備選方案，保障業(yè)務(wù)不受影響
三、? 對接微信H5支付踩坑
踩坑6：商戶需要申請H5支付權(quán)限
解決6：商戶申請H5支付權(quán)限
由于之前對接小程序支付給接入準(zhǔn)備已經(jīng)走過一遍了，小程序支付不需要商戶申請支付權(quán)限，只需要把商戶號和公眾號綁定上就行
所以沒有意識到商戶需要申請H5支付權(quán)限，且忽略了接入前準(zhǔn)備-H5支付 | 微信支付商戶平臺文檔中心最后一行小字。這直接引出了坑7，并且需要花費(fèi)比較長的時間解決
踩坑7：支付域名和網(wǎng)站域名的ICP注冊主體與申請商戶號的主體必須一致
解決7：為H5應(yīng)用申請域名并進(jìn)行ICP備案
商戶申請H5支付權(quán)限必須要遵守商戶申請H5支付權(quán)限需要注意哪規(guī)則？，發(fā)現(xiàn)支付域名和網(wǎng)站域名的主體和商戶號的主體不一致，由于企業(yè)內(nèi)部架構(gòu)的原因：
H5網(wǎng)頁的域名的ICP注冊主體是A公司
需要申請H5支付權(quán)限的商戶號主體是B公司
且A公司和B公司的關(guān)系不在以下4種范圍中，那只能為H5網(wǎng)頁單獨(dú)申請域名
四、? 關(guān)于前端的H5支付踩坑
踩坑8：在客戶端頁面打開支付中間頁的事件上，安卓系統(tǒng)和ios系統(tǒng)表現(xiàn)不同
解決8：根據(jù)業(yè)務(wù)需要自定義拼接redirect_url
- 前情提要：
微信支付回調(diào)是異步任務(wù)，前端請求http是同步任務(wù)，但微信的支付回調(diào)我們是沒辦法得知觸發(fā)時間
例如：當(dāng)用戶在支付中間頁完成支付后切回業(yè)務(wù)頁面，我們要查詢當(dāng)前訂單的支付狀態(tài)，不能即刻查詢 借鑒其他支付交易的交互，H5頁面利用的是倒計時交互實(shí)現(xiàn)虛擬異步
- 小程序支付中支付中間頁與客戶端頁面之間的跳轉(zhuǎn)，在安卓、蘋果、鴻蒙系統(tǒng)的行為表現(xiàn)是一致，統(tǒng)一監(jiān)聽visibilitychange事件來進(jìn)行邏輯編寫即可
document.addEventListener('visibilitychange', function() {
// 用戶息屏、或者切到后臺運(yùn)行 （離開頁面
if (document.visibilityState === 'hidden' ) {
// 一些業(yè)務(wù)邏輯：比如開始倒計時開始，倒計時完微信支付狀態(tài)回調(diào)查詢
// some code
console.log('hidden')
}
// 用戶打開或回到頁面
if (document.visibilityState === 'visible') {
// 一些業(yè)務(wù)邏輯
// some code
console.log('visible')
}
})
- 而H5支付，安卓、蘋果、鴻蒙系統(tǒng)的行為表現(xiàn)不一致，再通過統(tǒng)一監(jiān)聽visibilitychange事件無法滿足微信支付狀態(tài)回調(diào)查詢
- 在ios系統(tǒng)中，企業(yè)微信瀏覽器上跳轉(zhuǎn)微信H5支付，會換起微信應(yīng)用打開H5支付控件，這樣客戶端頁面的所有數(shù)據(jù)和狀態(tài)都會保留，所以依然可以用visibilitychange事件監(jiān)聽
?2. 在安卓和鴻蒙系統(tǒng)，企微瀏覽器換起H5支付中間頁，是直接在當(dāng)前瀏覽器窗口替換了客戶端頁面，所以支付完成返回客戶端頁面后，頁面所有的狀態(tài)和原有數(shù)據(jù)都會被清空。如圖，這會造成兩個問題：
2.1：支付完成后回到客戶端頁面，查詢訂單狀態(tài)所需要的訂單信息會丟失如何保留當(dāng)前訂單信息 2.2：微信支付回調(diào)是異步任務(wù)，前端請求http是同步任務(wù)如何正確延時發(fā)http請求
3.自定義拼接跳轉(zhuǎn)中間頁的redirect_url就可以解決這兩個問題，支付完成后微信會重定向回我們自定義的url,在url上加上業(yè)務(wù)需要的信息，重定向回客戶端后，就可以拿到狀態(tài)和數(shù)據(jù)了
// 自定義拼接redirect_url
const setToPayURL = (res:string)=>{
let redirectUrl = `${myurl}?訂單id=payResultId&頁面狀態(tài)=1`
redirectUrl = encodeURIComponent(redirectUrl)
window.location.href = `${res}&redirect_url=${redirectUrl}`
}
五、? 微信支付相關(guān)
小程序支付對接
小程序提供了獲取小程序短鏈的開放能力，H5頁面可以直接觸發(fā)跳轉(zhuǎn)到微信小程序，在小程序中喚起支付控件
詳情查看相關(guān)文檔： 獲取 URL Scheme | 微信開放文檔
●?前期準(zhǔn)備：開小程序賬號并認(rèn)證、開商戶號、然后商戶號和小程序需要關(guān)聯(lián)。商戶號和微信小程序認(rèn)證都需要綁定具有合規(guī)經(jīng)營的主體。
詳情查看小程序支付接入前準(zhǔn)備：接入前準(zhǔn)備-小程序支付 | 微信支付商戶臺文檔中心
●?開發(fā)流程：開發(fā)指引-小程序支付 | 微信付商戶平臺文檔中心
H5支付對接
●?前期準(zhǔn)備：開小程序賬號并認(rèn)證、開商戶號、然后商戶號和小程序需要關(guān)聯(lián)。商戶號和微信小 程序認(rèn)證都需要綁定具有合規(guī)經(jīng)營的主體。
詳情查看H5支付接入前準(zhǔn)備：接入前準(zhǔn)備-H5支付 | 微信支付商戶平臺文檔中心
●?開發(fā)流程：開發(fā)指引-H5支付 | 微信支付商戶平臺文檔中心文章來源：http://www.zghlxwxcb.cn/news/detail-709789.html
總結(jié)
- 對接第三方服務(wù)商坑總結(jié)：一旦涉及研發(fā)工作量，研發(fā)團(tuán)隊(duì)需盡早和第三方服務(wù)商對接
- 小程序支付坑總結(jié)：內(nèi)容的管控比較嚴(yán)格，需有閉環(huán)的業(yè)務(wù)場景；費(fèi)率最好不要用低于微信官方的，特別還是“免費(fèi)”的
- H5支付坑總結(jié)：對內(nèi)容管控相對寬松，但商戶申請支付權(quán)限相對嚴(yán)格，需要域名備案、三體一致
- 其他：需要時刻關(guān)注平臺管控；風(fēng)控的規(guī)則一般不會那么明顯，所以最好能找到服務(wù)機(jī)構(gòu)和內(nèi)部人員；功能層面要規(guī)劃支付被封后的過渡方案
本文轉(zhuǎn)載于:
https://juejin.cn/post/7273301807709896762
如果對您有所幫助，歡迎您點(diǎn)個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-709789.html
到了這里，關(guān)于記錄--H5頁面對接微信支付踩坑雜記的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
