关于微信小程序实现云支付那些事儿

一、前言

稍微玩过微信小程序云开发的同学都基本知道微信小程序云开发目前已经支持云支付这一能力。

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

例如：用户发起支付前、支付中、支付后的逻辑处理应该是怎样的，该如何设计会比较保险，降低出错的概率。

那么本文主要介绍云支付的使用以及在云支付下的订单系统、支付流程该如何设计。

顺便提一下：微信支付功能仅支持企业主体调用。

二、思路分析

云支付的调用流程大致分为以下四步：

1、获取免鉴权参数

小程序端传入金额、商品信息等基本参数后，调用云函数获取免鉴权参数。

2、将免鉴权参数传入小程序端的支付API

云函数返回免鉴权参数，作为小程序端支付API的入参。

3、用户支付

调起微信支付，用户进行支付/取消支付操作

4、微信端回调指定的云函数

支付成功后回调此云函数。

如果用户取消支付，则不会回调此云函数。

那么，根据以上四个步骤就可以分析出，订单的创建、订单支付状态的改变应该是在什么时候了。

订单的创建应该是在第一步的获取免鉴权参数的时候，获取免鉴权参数后将订单号等信息插入数据库。

此时的订单支付状态应该是待支付状态。

同时也可以知道，订单支付状态的改变，应该是在第四步中去进行改变，如果支付成功，将订单的支付状态改为支付成功即可。

三、云支付小案例

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)
        }
      })
    })
  },

})