關於微信小程序實現雲支付那些事兒

Posted on by

一、前言

稍微玩過微信小程序雲開發的同學都基本知道微信小程序雲開發目前已經支持雲支付這一能力。

那麼在雲支付的能力支持之下，整個支付的流程是怎樣的呢？

例如：用戶發起支付前、支付中、支付後的邏輯處理應該是怎樣的，該如何設計會比較保險，降低出錯的概率。

那麼本文主要介紹雲支付的使用以及在雲支付下的訂單系統、支付流程該如何設計。

順便提一下：微信支付功能僅支持企業主體調用。

二、思路分析

雲支付的調用流程大致分為以下四步：

1、獲取免鑒權參數

小程序端傳入金額、商品信息等基本參數後，調用雲函數獲取免鑒權參數。

2、將免鑒權參數傳入小程序端的支付API

雲函數返回免鑒權參數，作為小程序端支付API的入參。

3、用戶支付

調起微信支付，用戶進行支付/取消支付操作

4、微信端回調指定的雲函數

支付成功後回調此雲函數。

如果用戶取消支付，則不會回調此雲函數。

那麼，根據以上四個步驟就可以分析出，訂單的創建、訂單支付狀態的改變應該是在什麼時候瞭。

訂單的創建應該是在第一步的獲取免鑒權參數的時候，獲取免鑒權參數後將訂單號等信息插入數據庫。

此時的訂單支付狀態應該是待支付狀態。

同時也可以知道，訂單支付狀態的改變，應該是在第四步中去進行改變，如果支付成功，將訂單的支付狀態改為支付成功即可。

相關的官方文檔鏈接：

  • 雲支付文檔
  • 雲支付回調文檔
  • 小程序端調起支付API文檔

三、雲支付小案例

1.雲函數

1-1.獲取免鑒權參數雲函數（wxPay）

此雲函數主要是獲取支付API所需的參數，以及創建訂單插入數據庫。

成功調用示例結果截圖

實現代碼

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

exports.main = async (event) => {

  const wxContent = cloud.getWXContext() // openid等信息
  const openid = wxContent.OPENID
  const appid = wxContent.APPID

  const totalFee = event.totalFee // 支付金額（單位：分）
  const body = event.body // 商品名

  const outTradeNo = createOutTradeNo() // 訂單號

  // 獲取免鑒權支付參數
  const payMent = await cloud.cloudPay.unifiedOrder({
    "body": body,
    "outTradeNo": outTradeNo,
    "spbillCreateIp": "127.0.0.1",
    "subMchId": "商戶號", // 商戶號
    "totalFee": totalFee,
    "envId": "對應的雲環境id", // 雲環境id
    "functionName": "payCallBack" // 支付回調雲函數
  })

  // 創建訂單
  const nowTime = new Date().getTime()
  const orderObj = {
    _openid: openid,
    appid: appid,
    outTradeNo: outTradeNo,
    totalFee: totalFee * 0.01,
    payStatus: 'wait',
    createTime: nowTime,
    updateTime: nowTime,
    deleteTime: null,
  }
  await addOrder(orderObj)

  return payMent
}

/** 創建隨機的唯一訂單號(32位) */
const createOutTradeNo = () => {
  let outTradeNo = new Date().getTime() // 獲取當前13位時間戳
  let numStr = '0123456789';
  let randomStr = '';
  for (let i = (32 - 13); i > 0; --i) {
    randomStr += numStr[Math.floor(Math.random() * numStr.length)];
  }
  outTradeNo += randomStr
  return outTradeNo
}

/** 向數據庫創建訂單 */
const addOrder = async (orderObj) => {
  return await db.collection('order')
    .add({
      data: orderObj
    })
    .then(res => {
      console.log("創建訂單成功 =====>", res, orderObj)
    })
    .catch(err => {
      console.log("創建訂單異常 =====>", err, orderObj)
    })
}

1-2.支付回調雲函數（payCallBack）

在用戶支付成功後微信服務端將會調用此雲函數，並攜帶支付方的訂單號、openid、appid等信息。

開發者可以根據這個來判斷當前回調的是哪個訂單。

回調文檔

成功回調結果示例截圖

實現代碼

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

// 雲函數入口函數
exports.main = async (event) => {
  console.log("回調返回對象 =====>", event)
	// 判斷條件
  if (event.returnCode == 'SUCCESS') {
    if (event.resultCode == 'SUCCESS') {
      // 查詢條件
      const whereObj = {
        appid: event.subAppid, // 小程序的APPID
        _openid: event.subOpenid, // 小程序用戶的openid
        outTradeNo: event.outTradeNo, // 商戶號的訂單號
      }
      // 更新對象
      const updateObj = {
        transactionId: event.transactionId, // 微信方的訂單號
        totalFee: event.totalFee * 0.01, // 微信方收到的金額
        timeEnd: event.timeEnd, // 支付結束時間
        payStatus: 'success',
        updateTime: new Date().getTime()
      }
      // 更新訂單
      await updateOrder(whereObj, updateObj)
    }
  }
  // 支付回調的返回協議和入參協議（必須返回此結構體，詳見文檔）
  return {
    errcode: 0,
    errmsg: event.resultCode
  }
}

/** 更新訂單的支付狀態 */
const updateOrder = async (whereObj, updateObj) => {
  return await db.collection('order')
    .where(whereObj)
    .update({
      data: updateObj
    })
}

2.小程序端（js代碼）

// pages/wxPay/wxPay.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad() {},

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow() {},

  /** 支付點擊監聽 */
  async payTap() {
    const totalFee = 2
    const body = '支付測試'
    wx.showLoading({
      title: '調起微信支付中',
      mask: true
    })

    // 獲取支付免鑒權參數
    const payMentRes = await this.getPayMent(totalFee, body)
    wx.hideLoading({
      success: (res) => {},
    })
    // 小程序支付API
    const payRes = await this.wxPay(payMentRes.result.payment)
    // 支付API返回結果打印
    console.log(payRes)
  },

  /**
   * 小程序支付API
   * @param {object} payment 支付免鑒權參數
   */
  wxPay(payment) {
    return new Promise((resolve, rejects) => {
      wx.requestPayment({
        ...payment,
        success(res) {
          resolve({
            status: 'success',
            res: res
          })
        },
        fail(err) {
          resolve({
            status: 'fail',
            res: err
          })
        }
      })
    })
  },

  /**
   * 獲取支付免鑒權參數
   * @param {number} totalFee 支付金額, 單位：分
   * @param {string} body 商品名稱
   */
  getPayMent(totalFee, body) {
    return new Promise((resolve, rejects) => {
      wx.cloud.callFunction({
        name: 'wxPay',
        data: {
          totalFee,
          body
        },
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(err)
        }
      })
    })
  },

})

3.支付結果

用戶端

商傢端

4、代碼目錄結構

四、為什麼這樣寫

或許有的同學也使用過微信雲支付的能力，但是不曾使用到上面說到的支付回調雲函數。

但是也可以做到獲取用戶的支付結果。

如下圖

事實上，小程序端的支付API(wx.requestPayment())也可以返回當前的支付結果。也確實可以使用這個回調的結果來判斷支付是否成功。

那既然這樣，為什麼還要多此一舉寫個支付回調雲函數來獲取支付的結果呢？

看到這裡也說明你看完瞭整個實現過程瞭，如果你有為什麼要用這種方式實現的疑問，也應該多少能夠自己給自己找到一些答案。

除去開發規范、優化相關的小問題，我這裡說一個很致命的原因。

微信小程序支付API(wx.requestPayment())在IOS端有一個致命的問題，

當用戶支付後會進入下面這個頁面

當用戶不點擊完成按鈕，微信小程序的支付API（wx.requestPayment()）回調是不會觸發的。

也就說，小程序自身拿不到用戶的支付結果瞭。

假設用戶直接退出瞭微信，小程序也就銷毀瞭。這時，訂單狀態該如何改變呢？

tips: 在安卓端不會出現這個問題。有興趣的同學可以自己去實踐以下。

五、結語

思路是這樣的，但是一些異常處理，需要開發者在開發過程中自行處理，例如訂單插入失敗、更新失敗等異常問題。雖然概率不大，而且也有打印調用記錄，如果出現問題，也是可以查到調用記錄以及相關信息。

到此這篇關於關於微信小程序實現雲支付那些事兒的文章就介紹到這瞭,更多相關微信小程序雲支付內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：