微信支付流程
流程:
上圖的網址為:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4
如上圖所示,微信網頁支付的具體流程大致分為三個部分,最重要的是第一和第二部分:
-
第一部分:用戶進入網頁
- 用戶點擊消息、鏈接或者掃描二維碼,進入商品界面(即觸發網頁的
window.onload
事件的時候)。 - 網頁產生支付請求至商戶服務器,支付服務器先產生商戶訂單,然后調用 統一下單API,向微信服務器發送請求。
- 商戶服務器接收到微信服務器對統一下單API的響應后,提取出參數
prepay_id
,並根據算法(后面會提到)生成支付簽名,然后將prepay_id
和支付簽名作為上一步支付請求的響應數據返回給客戶端,客戶端 緩存此數據 。
- 用戶點擊消息、鏈接或者掃描二維碼,進入商品界面(即觸發網頁的
-
第二部分:用戶發起請求,服務器響應
- 用戶在商品界面中點擊支付按鈕后,根據第一部分取到的數據和商品數據調用jsapi接口(至微信服務器)請求支付,微信支付服務器對請求進行驗證並響應,這個過程中,微信客戶端顯示“微信支付”的動畫。
- 如果上一步的請求驗證通過,此時微信客戶端會彈出密碼輸入對話框,讓用戶輸入密碼。
- 用戶輸入密碼點擊支付后,微信客戶端提交支付授權。
- 微信客戶端對支付授權進行驗證,並將結果 同時發送 至用戶客戶端和商戶服務器。其中微信服務器發送至商戶服務器的通知url在第一部分的統一下單接口中由商戶指定。
- 商戶服務器對上一步收到的結果進行處理,並響應。客戶端也會收到微信支付結果的模板消息。
注意: 第二部分和商戶的服務器沒有任何交互。
- 第三部分
- 微信跳轉回商戶的H5頁面。
- 商戶網頁調用請求查詢訂單結果。
具體的實現方案
上面的介紹詳細解釋了微信支付的流程,那么根據此流程,我們就可以分別對微信網頁支付設計前端和后端的實現方案。
我們可以看到,上面的支付流程中有一點不是很合理的地方:就是每進入一次網頁就請求一次支付接口,產生一個訂單。因為很多時候,用戶打開網頁並不會點擊購買產生實質的支付請求。這樣會無故消耗不少服務器資源,特別是對於高並發網站來說。
對此我的改進方案是:在用戶點擊相關的產生實質支付的按鈕時,才向商戶后台發送支付,再調統一下單接口,返回
prepy_id
和簽名,然后利用這個數據進行上面的第二部分,請求微信支付。這樣做的好處是可以減少無效請求,但是壞處是兩次請求的時間可能會較長,特別是第一個向商戶后台下訂單的請求,因為這個還需要調微信支付的服務,可能整個請求的響應會超過1s,慢的甚至2~3s,這會嚴重影響用戶體驗。而且此時,一般需要在前端顯示一個“正在請求支付”的加載動畫,不然幾秒沒響應用戶會以為沒效果再點擊造成重復下單。
我們按照上面描述的改進方案進行前端和后端支付業務流程的設計。
微信網頁支付前端流程
在第一節的圖中忽略了一點,使用微信JSAPI支付的網頁,必須在支付前使用微信JSAPI的
config
接口注入權限驗證配置,這一步一般放在網頁加載后,即window.onload()
函數中來執行。具體內容參考:微信網頁開發說明
前端的流程如下:
- 在頁面中引入JS文件,網址為: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
,在需要支付的頁面中根據上面提到的注入權限驗證配置(在頁面的window.onload()函數
編寫wx.config()函數
),權限配置驗證中需要向商戶服務器請求簽名,后面會提到。 - 編寫支付按鈕的點擊事件邏輯,函數中包括:
- 向商戶后台發送下單請求,返回的數據包括統一下單請求結果,(如成功),還有
prepay_id
和生成的支付簽名。簽名算法說明 。 - 如果上一步成功,調用
WeixinJSBridge.invoke
函數調起支付,並編寫支付成功和失敗的回調函數。
- 向商戶后台發送下單請求,返回的數據包括統一下單請求結果,(如成功),還有
微信網頁支付后端流程
微信支付主要的邏輯在后端,后端的邏輯如下:
- 用戶進入網頁時,前端發送權限注入需要的簽名請求,進行簽名,並返回簽名數據。簽名算法 的附錄一部分,涉及到請求的
access_token
是:網頁授權access_token - 用戶點擊支付,產生支付請求:
- 獲取支付金額等信息,先調用相關邏輯產生商戶的訂單,再按照統一下單API規定生成所需的數據,發送統一下單請求,獲得響應。
- 處理上一步的響應,如果成功,根據說明鏈接產生簽名字符串,響應上一步的請求。
為了前端處理方便,這一步可以將支付請求所需的所有參數都生成然后返回。
- 響應微信服務器發送支付結果:
對第二步統一下單API中指定的notify_url
添加支付結果處理邏輯,根據支付結果通知所述,返回指定信息,此接口要有處理重復通知的能力,具體詳見前面的鏈接。
其他
下面幾篇文章將展示實現微信網頁支付邏輯的前端和后端(基於java web框架spring mvc)的示例代碼。
如有錯誤和疑惑之處請在評論區指出,謝謝。