小程式微信支付(UNIAPP+第三方SDK:binarywang)

小程式支付流程圖說明(UNIAPP+第三方SDK:binarywang)

說明:小程式為UNI-APP開發,使用的第三方微信支付SDK為binarywang提供的,此SDK對微信公眾號、小程式、微信各種類型的支付、企業微信的相關對接介面都有很好的全面集成,是應用得比較多的一款優秀的SDK。

如圖為各個服務相互調用的過程,後續有步驟說明
【圖1:小程式支付流程圖】
image

流程圖步驟說明

1、用戶在小程式中觸發了支付申請(如:點擊了付款按鈕,喚起微信支付頁面,非掃碼支付)

2、UNIAPP發起支付申請

用戶在小程式(UNIAPP開發)上主動發起了一個向商家支付的申請後,調用UNIAPP的uni.log(obj)方法(無論是否是點擊後調用還是點擊前調用,均可以根據實際情況來決定,此處只是為了方便流程的講解),其中參數類型與返回值說明如下圖:
參考://uniapp.dcloud.io/api/plugins/login
【圖2:UNIAPP的uni.log(obj)方法】
image
在返回值中,我們得到了臨時登錄憑證code(只能使用一次),我們便可以根據code來獲取用戶的openId,由此我們可以獲取得到了用戶的小程式的openId。
參考://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

3、調用自己的服務創建預支付單

如流程圖中的步驟三創建預支付單的介面:gql.createWxPayOrdercode(code, orderId: 1000, trandeType: “JSAPI”),其中code為獲取用戶小程式的openId的臨時憑證,即上一步所獲得的code,orderId為自己業務的參數,trandeType為固定值JSAPI(JSAPI支付或小程式支付)。當然此值也可以在後台固定,此處只是為了提示此支付類型。
【圖3:微信支付交易類型】
image
參考://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_2

4、調用自己的服務創建預支付單

在我們自己定義的介面的做相應的業務校驗處理,準備好參數後,調用SDK中創建預支付單的介面wxPayService.createOrder

5、SDK調用微信小程式生單介面

在SDK中會調用微信小程式的生意介面,也就是原生的微信支付介面,在生單介面中有一個參數notify_url,此參數是微信伺服器將用戶的支付結果回傳給我們時調用的url,即此url是我們自己服務對外暴露的url。
參考://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1


6、微信小程式將返回創建支付單的結果返回給SDK

【圖4:返回創建支付單的部分結果】
image

7、SDK將微信小程式返回的結果進行封裝加密成喚起微信支付頁面所需要的參數

在原生的微信小程式生單介面中,返回參數需要再次的根據相應的規則進行加密後,才能調用API喚起微信支付頁面
【圖5:喚起微信支付需要的參數】
image
但是在SDK中,SDK將此加密轉換的過程已經幫我們做了,它返回的是已經處理好了的參數,所以我們在前面直接使用這些返回的結果就OK了。
參考://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

8、9、創建預支付單的介面返回給小程式,喚起微信支付

在我們的小程式中接收到創建預支付單的介面返回值後,便可調用UNIAPP中的uni.requestPayment(OBJECT)方法來響起微信支付,我這邊是這樣調用的:result為後台返回的結果
【圖6:小程式調用微信支付頁面】
image
參考://uniapp.dcloud.io/api/plugins/payment

10、用戶支付完成,調用自己服務介面

用戶支付完成後,可以根據實際情況更新自己的業務資訊

11、用戶支付完成,微信伺服器的結果回傳

當用戶支付完成後,微信伺服器會調用生單介面中參數notify_url的值進行結果的回傳。此notify_url為我們系統對外暴露的url。我們在此url對應的介面中做相對應的支付結果業務處理。
參考://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8

為了更好的理解,SDK提供了一個微信支付的DEMO,大家可去clone下來更方便的理解。