微信支付之JSAPI開發-第二篇：業務流程詳解與方案設計

微信支付流程

流程：

上圖的網址爲：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4

如上圖所示，微信網頁支付的具體流程大體分爲三個部分，最重要的是第一和第二部分：

1. 第一部分：用戶進入網頁
   • 用戶點擊消息、連接或者掃描二維碼，進入商品界面（即觸發網頁的window.onload事件的時候）。
   • 網頁產生支付請求至商戶服務器，支付服務器先產生商戶訂單，而後調用 統一下單API,向微信服務器發送請求。
   • 商戶服務器接收到微信服務器對統一下單API的響應後，提取出參數prepay_id，並根據算法（後面會提到）生成支付簽名，而後將prepay_id和支付簽名做爲上一步支付請求的響應數據返回給客戶端，客戶端 緩存此數據 。
2. 第二部分：用戶發起請求，服務器響應
   • 用戶在商品界面中點擊支付按鈕後，根據第一部分取到的數據和商品數據調用jsapi接口（至微信服務器）請求支付，微信支付服務器對請求進行驗證並響應，這個過程當中，微信客戶端顯示「微信支付」的動畫。
   • 若是上一步的請求驗證經過，此時微信客戶端會彈出密碼輸入對話框，讓用戶輸入密碼。
   • 用戶輸入密碼點擊支付後，微信客戶端提交支付受權。
   • 微信客戶端對支付受權進行驗證，並將結果 同時發送 至用戶客戶端和商戶服務器。其中微信服務器發送至商戶服務器的通知url在第一部分的統一下單接口中由商戶指定。
   • 商戶服務器對上一步收到的結果進行處理，並響應。客戶端也會收到微信支付結果的模板消息。

注意： 第二部分和商戶的服務器沒有任何交互。

1. 第三部分
   • 微信跳轉回商戶的H5頁面。
   • 商戶網頁調用請求查詢訂單結果。

具體的實現方案

上面的介紹詳細解釋了微信支付的流程，那麼根據此流程，咱們就能夠分別對微信網頁支付設計前端和後端的實現方案。

咱們能夠看到，上面的支付流程中有一點不是很合理的地方：就是每進入一次網頁就請求一次支付接口，產生一個訂單。由於不少時候，用戶打開網頁並不會點擊購買產生實質的支付請求。這樣會無端消耗很多服務器資源，特別是對於高併發網站來講。

對此個人改進方案是：在用戶點擊相關的產生實質支付的按鈕時，才向商戶後臺發送支付，再調統一下單接口，返回prepy_id和簽名，而後利用這個數據進行上面的第二部分，請求微信支付。這樣作的好處是能夠減小無效請求，可是壞處是兩次請求的時間可能會較長，特別是第一個向商戶後臺下訂單的請求，由於這個還須要調微信支付的服務，可能整個請求的響應會超過1s，慢的甚至2~3s，這會嚴重影響用戶體驗。並且此時，通常須要在前端顯示一個「正在請求支付」的加載動畫，否則幾秒沒響應用戶會覺得沒效果再點擊形成重複下單。

咱們按照上面描述的改進方案進行前端和後端支付業務流程的設計。

微信網頁支付前端流程

在第一節的圖中忽略了一點，使用微信JSAPI支付的網頁，必須在支付前使用微信JSAPI的config接口注入權限驗證配置，這一步通常放在網頁加載後，即window.onload()函數中來執行。具體內容參考：微信網頁開發說明

前端的流程以下：

1. 在頁面中引入JS文件，網址爲: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
   ，在須要支付的頁面中根據上面提到的注入權限驗證配置（在頁面的window.onload()函數編寫wx.config()函數），權限配置驗證中須要向商戶服務器請求籤名，後面會提到。
2. 編寫支付按鈕的點擊事件邏輯，函數中包括：
   • 向商戶後臺發送下單請求，返回的數據包括統一下單請求結果，（如成功），還有prepay_id和生成的支付簽名。簽名算法說明 。
   • 若是上一步成功，調用WeixinJSBridge.invoke函數調起支付，並編寫支付成功和失敗的回調函數。

微信網頁支付後端流程

微信支付主要的邏輯在後端，後端的邏輯以下：

1. 用戶進入網頁時，前端發送權限注入須要的簽名請求，進行簽名，並返回簽名數據。簽名算法 的附錄一部分，涉及到請求的access_token是：網頁受權access_token
2. 用戶點擊支付，產生支付請求：
   • 獲取支付金額等信息，先調用相關邏輯產生商戶的訂單，再按照統一下單API規定生成所需的數據，發送統一下單請求，得到響應。

   • 處理上一步的響應，若是成功，根據說明連接產生簽名字符串，響應上一步的請求。

     爲了前端處理方便，這一步能夠將支付請求所需的全部參數都生成而後返回。

3. 響應微信服務器發送支付結果：
   對第二步統一下單API中指定的notify_url添加支付結果處理邏輯，根據支付結果通知所述，返回指定信息，此接口要有處理重複通知的能力，具體詳見前面的連接。

其餘

下面幾篇文章將展現實現微信網頁支付邏輯的前端和後端(基於java web框架spring mvc)的示例代碼。

若有錯誤和疑惑之處請在評論區指出，謝謝。