节省80%代码量？对接微信支付，云开发推出两大新能力

微信支付作为国内最大的支付服务之一，多年以来一直是各类APP、小程序、Web应用必须对接的公共服务之一。当然，对接微信支付也并非那么简单，除了官方文档、代码示例、SDK以外，依然会有一些较为复杂、繁重的开发工作量，例如：

部署和维护微信支付证书
实现微信支付的签名、验签、回调、对账流程
搭建微信支付的后台管理系统，实现退款审核、查账单等功能

现在，微信云开发推出了全新的「可视化工作流」和「云开发管理系统」 能力，帮助开发者更加快速、简便地完成微信支付场景的业务开发。

可视化工作流

提供可视化的逻辑编排能力，支持多种类型的节点，帮助快速对接外部API，帮助开发者更清晰、灵活、高效地组织和管理业务逻辑。

云开发管理工具

提供了一套基础的业务运营管理系统+低代码开发工具，涵盖小程序、公众号、微信支付等场景。开通后的管理系统支持从 Web 网页登录，支持分配运营人员账号和权限管理。开发者可基于低代码工具开发运营系统内的应用，拖拽组件生成前端 UI，从而定制各类管理端应用。

接下来我们对这两个能力进行简单地介绍：

#01

使用「可视化工作流」对接微信支付

根据微信支付的官方最佳实践，想要实现一个完备的下单、付款、落库流程，通常有以下四件事情需要开发者实现：

客户端（小程序、Web、原生App）根据服务端生成的预付单信息，调用客户端接口，完成支付
服务端接收微信支付回调，更新订单状态
定时调用查单接口校验订单，避免没收到回调导致订单状态异常
（可选）每日or每周固定时间调用对账单接口进行对账

我们可以使用云开发可视化工作流以极高的效率实现以上需求。

// 使用云开发工作流，五分钟快速对接微信支付

云开发工作流提供了开箱即用的多种微信支付模板，仅需要少量配置即可完成微信支付下单、回调流程的对接。

第 1 步：部署工作流微信支付模板

打开微信开发者工具 -> 云开发控制台 -> 管理工具

选择工作流「微信支付下单」模板，并安装模板：

第 2 步：完成「下单」工作流的配置

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

首先我们选择触发节点，在配置栏内，找到触发工作流的 URL 配置（这个 URL 将会在后续的云函数内使用到）。

在支付下单节点内，完成 API 的配置。

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

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

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

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

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

代码语言：javascript

复制

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);

代码语言：javascript

复制

第 4 步：完成客户端与云函数代码

工作流配置完成后，接下来我们通过云函数来调用工作流，完成全套场景。

首先是云函数的示例代码，我们通过 HTTP 请求，调用「支付下单」工作流：

代码语言：javascript

复制

代码语言：javascript

复制

const axios = require("axios");

const cloud = require('wx-server-sdk');
// 工作流的触发 URL，在第 1 步中获取

const FLOW_URL = "https://xxxx.ap-shanghai.tcbautomation.cn/Automation/.....";
exports.main = async (event, context) => {

const res = await axios.post(

FLOW_URL,

{

description: "云开发工作流-微信支付测试",

out_trade_no: "xxxxxxxxxxxxx", // 业务订单号，自定义指定

amount: {

total: 1, // 订单金额，单位为分

},

payer: {

// 用户在小程序中的 OpenID，云函数中可直接获取

openid: cloud.getWXContext().OPENID,

},

}

);
const { timeStamp, packageVal, paySign, nonceStr } = res;
return {

timeStamp,

packageVal,

paySign,

nonceStr,

};

};

然后在小程序中，调用上述云函数获取预付单信息，使用 wx.requestPayment 调起客户端支付控件：

代码语言：javascript

复制

// 小程序端内

// 首先我们调用 makePayment 云函数

wx.cloud

.callFunction({

name: "makePayment",

data: {

// 业务自定义参数

},

})

.then((res) => {

// 获取到预付单信息

const { timeStamp, packageVal, paySign, nonceStr } = res.result;
// 唤起微信支付组件，完成支付
wx.requestPayment({
  timestamp: timeStamp,
  nonceStr: nonceStr,
  package: packageVal,
  signType: &#34;RSA&#34;,
  paySign: paySign,
  success(res) {
    // 支付成功回调
    // 实现自定义的业务逻辑
  },
});

});