知識就是力量，但更重要的是運用知識的能力---網頁端微信掃碼支付-技術設計

2022-07-07 20:54:55

網頁端微信掃碼支付流程

1. 使用者在網頁上支援的支付方式裡選擇“微信支付”

2. 網頁根據微信通道傳回的支付連結生成微信支付碼

3. 使用者通過手機掃碼支付

4. 網頁根據使用者付款結果，進行跳轉或提示。

12306網站上購買火車票，可以用微信掃碼支付，北漂的兄弟們應該都體驗過。

如下是一個産品互動原型，便于直覺了解。

再介紹一下網頁端微信掃碼支付的時序。我方先調用三方接口拿到qrcode展示到前端頁面上，然後等待使用者使用手機微信掃碼支付。微信收到支付請求并處理完畢會主動通知我方系統，我方系統會修改支付單狀态，這個過程通常會在極短時間内完成（一般不超過5s）。三方也提供支付結果查詢接口，供我方主動發起查詢。

而使用者界面上這個人機互動的難點，就在于頁面展示付款碼之後，怎麼知道使用者是否掃碼支付完成了呢？因為頁面展示了付款碼之後，會存在兩種情況，一種情況是使用者用手機掃碼支付了，一種情況是使用者并沒有掃碼，或者是掃碼了也沒有支付。

最簡單也是最常用的方式是：服務端提供一個查詢支付結果的接口。頁面在展示了支付碼以後，設定interval，比如每間隔2秒鐘，就調一下服務端的接口，看看是否支付完成。

接下來，我們來看看服務端接口和頁面互動的詳細設計。

✅ 服務端接口：查詢支付狀态

方案：先查本地庫，判斷是否已經支付，如果已經支付，則直接傳回。如果未支付，則同步調用三方接口請求支付結果，然後如果是終态，則改支付單記錄，再傳回。

這個方案的缺點很明顯：① 連接配接db做查詢或修改操作；② 調用外部接口。這兩點會導緻響應慢，尤其是②，會增加因網絡導緻的不可控的因素。

優化方案：改為查redis。就是說，當三方回調我方支付結果時，我們将支付狀态儲存在redis裡。直接查redis，5s内即使無終态，也不主動調用三方接口；5s後，則可以考慮異步觸發調用三方接口。

這樣會極大提高接口響應速度。

✅ 頁面端互動

頁面設定interval，每隔2秒查支付結果，拿到結果後，跳轉頁面，給出對應提示。

特殊情況下，頁面不能一直傻傻地輪詢查，可以再設定一個門檻值，比如如果超過30秒還沒有拿到支付結果，則跳轉頁面，給出支付逾時的提示，并引導使用者重新發起支付。

微信傳回的付款二維碼是有時效的，一般最長2小時。

如果頁面上支援重新擷取付款碼，這時一定要首先校驗訂單是否支付完成，如果已經支付完成，則引導使用者進入付款成功的頁面。如果未支付，則調用微信取消支付接口将目前付款碼置為無效，然後重新生成支付訂單号，然後調用三方微信支付接口，重新擷取qrcode位址并在付款頁面展示付款二維碼。