微信小程式的支付流程

喆星高照發表於2021-10-26
微信小程式

 

 

一、前言

微信小程式為電商類小程式，提供了非常完善、優秀、安全的支付功能

在小程式內可呼叫微信的API完成支付功能，方便、快捷

場景如下圖所示：

 

 

 

 

  • 使用者通過分享或掃描二維碼進入商戶小程式，使用者選擇購買，完成選購流程
  • 調起微信支付控制元件，使用者開始輸入支付密碼
  • 密碼驗證通過，支付成功。商戶後臺得到支付成功的通知
  • 返回商戶小程式，顯示購買成功
  • 微信支付公眾號下發支付憑證

二、流程

以電商小程式為例

支付流程圖如下所示：

 

 

具體的做法：

  • 開啟某小程式，點選直接下單
  • wx.login獲取使用者臨時登入憑證code，傳送到後端伺服器換取openId
  • 在下單時，小程式需要將購買的商品Id，商品數量，以及使用者的openId傳送到伺服器
  • 伺服器在接收到商品Id、商品數量、openId後，生成服務期訂單資料，同時經過一定的簽名演算法，向微信支付傳送請求，獲取預付單資訊(prepay_id)，同時將獲取的資料再次進行相應規則的簽名，向小程式端響應必要的資訊
  • 小程式端在獲取對應的引數後，呼叫wx.requestPayment()發起微信支付，喚醒支付工作臺，進行支付
  • 接下來的一些列操作都是由使用者來操作的包括了微信支付密碼，指紋等驗證，確認支付之後執行鑑權調起支付
  • 鑑權調起支付：在微信後臺進行鑑權，微信後臺直接返回給前端支付的結果，前端收到返回資料後對支付結果進行展示
  • 推送支付結果：微信後臺在給前端返回支付的結果後，也會向後臺也返回一個支付結果，後臺通過這個支付結果來更新訂單的狀態

其中後端響應資料必要的資訊則是wx.requestPayment方法所需要的引數，大致如下：

wx.requestPayment({
  // 時間戳
  timeStamp: '',
  // 隨機字串
  nonceStr: '',
  // 統一下單介面返回的 prepay_id 引數值
  package: '',
  // 簽名型別
  signType: '',
  // 簽名
  paySign: '',
  // 呼叫成功回撥
  success () {},
  // 失敗回撥
  fail () {},
  // 介面呼叫結束回撥
  complete () {}
})

 

 

參數列如下所示：

 

 

三、結束

小程式支付和以往的網頁、APP微信支付大同小異，可以說小程式的支付變得更加簡潔，不需要設定支付目錄、域名授權等操作

參考文獻

  • https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_0.shtml

相關文章