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

qby**n發表於2021-06-19

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

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

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

流程圖步驟說明

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

2、UNIAPP發起支付申請

使用者在小程式(UNIAPP開發)上主動發起了一個向商家支付的申請後,呼叫UNIAPP的uni.log(obj)方法(無論是否是點選後呼叫還是點選前呼叫,均可以根據實際情況來決定,此處只是為了方便流程的講解),其中引數型別與返回值說明如下圖:
參考:https://uniapp.dcloud.io/api/plugins/login
【圖2:UNIAPP的uni.log(obj)方法】
image
在返回值中,我們得到了臨時登入憑證code(只能使用一次),我們便可以根據code來獲取使用者的openId,由此我們可以獲取得到了使用者的小程式的openId。
參考:https://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
參考:https://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。
參考:https://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了。
參考:https://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
參考:https://uniapp.dcloud.io/api/plugins/payment

10、使用者支付完成,呼叫自己服務介面

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

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

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

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

相關文章