關于微信小程序實現(xiàn)云支付那些事兒

更新時間：2021年09月08日 12:37:29 作者：super--Yang

我們在做小程序支付相關的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關于微信小程序實現(xiàn)云支付那些事兒,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

一、前言

稍微玩過微信小程序云開發(fā)的同學都基本知道微信小程序云開發(fā)目前已經(jīng)支持云支付這一能力。

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

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

那么本文主要介紹云支付的使用以及在云支付下的訂單系統(tǒng)、支付流程該如何設計。

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

二、思路分析

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

1、獲取免鑒權參數(shù)

小程序端傳入金額、商品信息等基本參數(shù)后，調用云函數(shù)獲取免鑒權參數(shù)。

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

云函數(shù)返回免鑒權參數(shù)，作為小程序端支付API的入?yún)ⅰ?/p>

3、用戶支付

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

4、微信端回調指定的云函數(shù)

支付成功后回調此云函數(shù)。

如果用戶取消支付，則不會回調此云函數(shù)。

那么，根據(jù)以上四個步驟就可以分析出，訂單的創(chuàng)建、訂單支付狀態(tài)的改變應該是在什么時候了。

訂單的創(chuàng)建應該是在第一步的獲取免鑒權參數(shù)的時候，獲取免鑒權參數(shù)后將訂單號等信息插入數(shù)據(jù)庫。

此時的訂單支付狀態(tài)應該是待支付狀態(tài)。

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

相關的官方文檔鏈接：

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

三、云支付小案例

1.云函數(shù)

1-1.獲取免鑒權參數(shù)云函數(shù)（wxPay）

此云函數(shù)主要是獲取支付API所需的參數(shù)，以及創(chuàng)建訂單插入數(shù)據(jù)庫。

成功調用示例結果截圖

實現(xiàn)代碼

// 云函數(shù)入口文件
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() // 訂單號

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

  // 創(chuàng)建訂單
  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
}

/** 創(chuàng)建隨機的唯一訂單號(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
}

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

1-2.支付回調云函數(shù)（payCallBack）

在用戶支付成功后微信服務端將會調用此云函數(shù)，并攜帶支付方的訂單號、openid、appid等信息。

開發(fā)者可以根據(jù)這個來判斷當前回調的是哪個訂單。

回調文檔

成功回調結果示例截圖

實現(xiàn)代碼

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

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

const db = cloud.database()

// 云函數(shù)入口函數(shù)
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)
    }
  }
  // 支付回調的返回協(xié)議和入?yún)f(xié)議（必須返回此結構體，詳見文檔）
  return {
    errcode: 0,
    errmsg: event.resultCode
  }
}

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

2.小程序端（js代碼）

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

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

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

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

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

    // 獲取支付免鑒權參數(shù)
    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 支付免鑒權參數(shù)
   */
  wxPay(payment) {
    return new Promise((resolve, rejects) => {
      wx.requestPayment({
        ...payment,
        success(res) {
          resolve({
            status: 'success',
            res: res
          })
        },
        fail(err) {
          resolve({
            status: 'fail',
            res: err
          })
        }
      })
    })
  },

  /**
   * 獲取支付免鑒權參數(shù)
   * @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)
        }
      })
    })
  },

})