# 工作流实现微信支付付款、接收事件回调

开发者可使用云开发工作流能力,快速对接微信支付下单、接收支付回调的接口,完成微信支付的对接开发。

# 流程概览

本文档中我们将会实现下图中的步骤,实现最简单的微信支付直连模式的支付流程:

# 第 1 步:部署微信支付下单模板,完成初始配置,并发布工作流

打开云开发控制台-「云函数」 - 新建 - 工作流,选择工作流「使用微信支付API发起支付」模板,并安装模板。

# 第 2 步:完成「JSAPI下单」工作流的配置

模板部署完成后,进入工作流编辑器内完成配置。

在微信支付下单节点内,完成 API 的配置。

方法选择:JSAPI下单

注意 更新 APIs 或方法后,入参需要重新配置为如下:

({
    ...manualTrigger.output,
    payer: {
      openid: $env.WX_OPENID || manualTrigger.output?.payer?.openid  //利用前端调用时带入的openid,或者云函数调用时传递的openid参数
    }
}) 

另外,首次使用的用户如果没有可用的微信支付 API 实例,可以新建凭证+API 实例。

支付通知回调的配置,可以配置成另一个工作流,或者已有 HTTP 服务的 URL:

# 第 3 步:完成「支付成功回调」工作流的配置

如果在第 2 步中,把支付通知回调配置为了另一条工作流,那么我们同样需要完成「支付成功回调」工作流的配置工作。

例如,我们可以使用自定义代码的节点,在支付回调中,修改云数据库内的订单状态:

const cloudbase = require("@cloudbase/node-sdk");

cloud.init({
  env: "<环境ID>",
});

const db = cloud.database();

// 示例:向 orders 集合中插入一条记录
const result = await db.collection("orders").add(wxpayTrigger.output.resource);

# 第 4 步:完成客户端代码

工作流配置完成后,接下来我们通过小程序来调用工作流,完成全套场景。

在小程序中,通过调用工作流,获取预付单信息,使用 wx.requestPayment 调起客户端支付控件:

其中,调用工作流使用了 callFunction 的方法,在其中有 FlowID参数,此参数可以通过在云函数列表点击选择已创建的工作流,获取工作流的ID并填写在代码中。

获取到流程ID后,在小程序中通过如下代码调用工作流,获取到工作流返回,并通过返回参数调用 wx.requestPayment 拉起客户端支付控件。

// 1. 小程序端调用
wx.cloud.callFunction({
  name: 'cloudbase_module',
  data: {
    // 工作流ID, 需从工作流属性中获取
    name: 'xxxxxxx',
    data: {
      /**
       * 注:appid 和 mchid 工作流已自动注入,无需传递
       * 本示例只传递了必要的参数,其他详细参数可参考微信支付文档:
       * https://pay.weixin.qq.com/doc/v3/merchant/4012525110
       */
      description: "商品描述",
      // 商户订单号,业务自行生成,此处仅为示例
      out_trade_no: Math.round(Math.random() * (10 ** 13)) + Date.now(),
      amount: {
        total: 1,
        currency: "CNY"
      }
    }
  },
  success: res => {
    console.log('下单结果: ', res);
    // 获取到预付单信息
    const paymentData = res.result?.data;
    // 唤起微信支付组件,完成支付
    wx.requestPayment({
      timeStamp: paymentData?.timeStamp,
      nonceStr: paymentData?.nonceStr,
      package: paymentData?.packageVal,
      paySign: paymentData?.paySign,
      signType: "RSA", // 该参数为固定值
      success(res) {
        // 支付成功回调,实现自定义的业务逻辑
        console.log('唤起支付组件成功:', res);
      },
      fail(err) {
        // 支付失败回调
        console.error('唤起支付组件失败:', err);
      }
    });
  },

另外,也可以通过云函数发起调用,通过小程序调用云函数、云函数调用工作流的方式,完成预付单的生成,然后再在小程序端唤起微信支付组件来进行支付。

如果需要从云函数中发起调用,可以参考如下代码:

// 2. 云函数中(服务端)调用

/**
 * 微信支付 - 下单
 */
const cloud = require('wx-server-sdk');
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  const res = await cloud.callFunction({
    // 固定参数
    name: 'cloudbase_module',
    data: {
      // 工作流ID, 需从工作流属性中获取
      name: 'xxxxxx',
      data: {
        /**
         * 注:appid 和 mchid 工作流已自动注入,无需传递
         * 本示例只传递了必要的参数,其他详细参数可参考微信支付文档:
         * https://pay.weixin.qq.com/doc/v3/merchant/4012525110
         */
        description: '商品描述',
        amount: {
          total: 1, // 订单金额
          currency: 'CNY',
        },
        // 商户订单号,业务自行生成,此处仅为示例
        out_trade_no: Math.round(Math.random() * 10 ** 13) + Date.now(),
        payer: {
          // 服务端调用需要手动传入payer.openid参数,可从云开发上下文中直接获取
          openid: wxContext.OPENID,
        },
      },
    },
  });
  return res.result;
};


// 云函数中调用下单工作流获取预付订单后,小程序中再调用云函数,完成支付流程

wx.cloud.callFunction({
  // 云函数名称
  name: 'xxxxx',
  success: (res) => {
    // 获取到预付订单信息
    const paymentData = res.result?.data;
    // 唤起微信支付组件,完成支付
    wx.requestPayment({
      timeStamp: paymentData?.timeStamp,
      nonceStr: paymentData?.nonceStr,
      package: paymentData?.packageVal,
      paySign: paymentData?.paySign,
      signType: 'RSA', // 该参数为固定值
      success(res) {
        // 支付成功回调,实现自定义的业务逻辑
        console.log('唤起支付组件成功:', res);
      },
      fail(err) {
        // 支付失败回调
        console.error('唤起支付组件失败:', err);
      },
    });
  },
});

可见,全程只有少量代码,即可完成生成预付单、完成付款、接收微信支付回调三大块逻辑,非常方便快捷。

点击咨询小助手