本文将为你展示如何用微搭低代码，快速完成小程序微信支付功能。开发者无需关心证书、签名、微信支付服务端对接等复杂流程，只需按照标准流程完成相应功能，即可完成小程序线上支付业务。
一、准备工作
在进行业务搭建之前，我们需要做以下准备工作：
- 企业/个体工商户的微信小程序和微信支付商户号
- 完成小程序与商户号的绑定
- 下载最新版微信开发工具版本
相关帮助文档可参考通过微搭快速注册小程序、获取商户号、商户号绑定小程序 AppID
二、搭建小程序和管理端
简单拆解下我们需要完成的主要功能：
1.管理端：上架商品、订单管理。
2.小程序：商品售卖、订单展示与退款。
对应模版可以安装微信开发工具-微搭-微信支付功能展示模版，详细了解应用功能。
2.1 管理端
管理端主要完成商品信息和订单信息的数据模型设计，字段设计如下：
商品信息数据源
| 字段名称 | 字段标识 | 字段类型 | 字段描述 |
|---|---|---|---|
| 商品名称 | spmc | 文本、短文本 | 用于存储商品名称信息 |
| 商品价格 | spjg | 数字 | 用于存储商品价格信息 |
| 商品描述 | spms | 文本、短文本 | 用于存储商品详细描述信息 |
| 商品图片 | sptp | 图片 | 用于存储商品图片，以图片形式在页面展示 |
订单信息数据源
| 字段名称 | 字段标识 | 字段类型 | 字段描述 |
|---|---|---|---|
| 订单号 | ddh | 自动编号 | 用于存储订单 |
| 商品名称 | spmc | 文本 | 用于存储商品名称 |
| 商品价格 | spjg | 数字 | 用于存储价格信息 |
| 支付状态 | zfzt | 数字 | 用于存储订单支付状态：1：表示未支付 2：表示已支付 3：表示退款中4：表示已退款 |
数据源配置在进入工具编辑器，选中数据源-数据模型-创建数据模型，配置对应字段即可
模拟数据可以点击管理数据，跳转浏览器进行测试商品的录入
生成模型应用需要跳转至微搭控制台，选择创建好的数据模型，创建模型应用即可。
进入__应用开发__ > 应用__页面，单击__新建应用 > 新建模型应用。
2.2 小程序
微搭低码提供了微信支付APIs服务，包括统一下单、查询订单、关闭订单、下载对账单以及退款相关接口，仅需完成简单配置，即可调用微信支付相关接口并完成业务搭建，强烈推荐。
- 进入__数据源__ > APIs 页面，选择__新建 APIs__。
- 选择__微信支付__进入创建微信支付 API 流程，详细说明请参见 微信支付 > 新建微信支付 API 部分。
- 搭建首页，发起支付
首页内容展示商品信息，选择用文本、数据列表和 Tab 栏等组件搭建，这里微搭有提供丰富的组件，大家可以自由选择调整样式。
数据列表选择创建好的__微信支付商品信息__数据模型，配置好排序字段、方式、显示条数、分页等相关信息。
数据列表内显示对应内容组件，单击选择__绑定数据__。
接下来配置__支付__按钮，也是我们主要的功能展示，需要重点关注。
支付功能我们简化模拟生成订单、支付商品、更新订单状态整个流程。按照微信支付接口要求，需要执行以下操作：
- 第一步：生成订单，为发起支付做准备。
单击__事件__，调用__微信支付模板订单数据__数据源__创建订单__方法，创建一个新的订单信息，传入对应商品名称、价格、支付状态，尤其是支付状态，在不同支付流程阶段，需要根据状态变化进行更新操作。
!支付状态字段为数字，1：表示未支付，2：表示已支付，3：表示退款中，4：表示已退款
创建订单成功后，调用数据源方法，根据返回值的数据唯一标识，查询订单信息。
查询成功回调，返回值赋值给提前设置好的全局变量，用于接下来发起支付时传输订单号。
__第二步：发起支付。__
订单和商品信息准备好后，接下来调用创建好的微信支付 APIs，统一下单接口，传入商品描述、商户订单号、支付总金额相关信息。
一定要使用自己创建好的微信支付 APIs 服务，创建方法请务必参见 <a href="https://cloud.tencent.com/document/product/1301/76292" rel="noopener" target="_blank">微信支付</a>。
调用成功后，才能使用自定义方法，调用编辑器写好的发起支付命令，发起微信支付。
应用调用如下图：
__第三步：根据支付结果更新订单状态。__
__特别强调：__ 微信支付成功和失败结果，并不会在发起支付后直接返回支付结果，而是通过在__统一下单__接口的回调云函数中，异步通知支付结果，所以对订单支付结果的更新，我们需要在回调云函数中操作。
统一下单云函数内，根据返回的订单号，更新支付状态。
云函数调用的环境类型，默认为 __prod 正式环境__，这里测试用的是预览环境，在应用发布后，记得修改为正式环境
至此，发起支付的整体功能已完成，接下来需要进行订单管理和退款操作。
订单页选择用选项卡和 Tab 栏进行搭建，选项卡内放入数据列表，数据列表选择创建好的__微信支付模板订单数据__数据模型，根据不同选项，配置好数据筛选条件、排序字段、方式、显示条数、分页等相关信息，如已支付页面，数据以支付状态等于2来筛选，其余页面逻辑类似。
发起退款流程，主要包括发起退款、更新订单状态、退款通知、查询退款结果、再次更新订单状态。
按照微信退款接口要求，退款需要执行以下操作：
- 已支付订单，显示申请退款按钮。
!支付状态字段为数字，1：表示未支付，2：表示已支付，3：表示退款中，4：表示已退款。
申请退款按钮的显示条件为：支付状态字段等于2时，显示退款按钮。
- 单击申请退款。
首先打开弹窗，由用户确认是否发起退款。
确认发起退款后，调用 APIs __微信支付模板功能申请退款__方法。
- 根据退款结果更新订单状态。
申请退款接口调用成功的回调，更新支付状态为3退款中。
!退款成功和失败结果，并不会在发起退款后直接返回结果，而是通过在__申请退款__接口的回调云函数中，异步通知退款结果，所以对订单支付结果的更新，需要在回调云函数中操作。
__申请退款云函数__中，接收到退款通知后，根据返回的退款值，更新订单状态，失败更新为2已支付，退款成功更新为4已退款。
"use strict";
const weda = require('[@cloudbase](/user/cloudbase)/weda-scf-sdk');
exports.main = async (event, context) => {
console.log('event',event)
// 申请退款回调参数说明，全部参数请查阅：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.refund.html#%E8%BF%94%E5%9B%9E%E5%80%BC%E8%AF%B4%E6%98%8E
const {
appid, // 服务商商户的APPID
mchId, // 微信支付分配的商户号
/**
随机字符串，不长于32位。推荐随机数生成算法 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_sl_api.php?chapter=4_3
*/
nonceStr,
outRefundNo, // 商户退款单号
outTradeNo, // 商户订单号
/**
* 退款资金来源 仅针对老资金流商户使用
REFUND_SOURCE_UNSETTLED_FUNDS---未结算资金退款（默认使用未结算资金退款）
REFUND_SOURCE_RECHARGE_FUNDS---可用余额退款
*/
refundAccount,
refundFee, // 退款总金额,单位为分,可以做部分退款
/** 退款金额 去掉非充值代金券退款金额后的退款金额，退款金额=申请退款金额 - 非充值代金券退款金额，退款金额<=申请退款金额 */
settlementRefundFee,
settlementTotalFee, // 应结订单金额
refundId, // 微信退款单号
refundRecvAccout, //
refundRequestSource, //
returnCode, // 返回状态码 SUCCESS/FAIL
refundStatus, // 业务结果 SUCCESS/FAIL SUCCESS退款申请接收成功
subAppid, // 微信分配的小程序ID
subMchId, // 微信支付分配的子商户号
successTime, // 成功时间
totalFee, // 订单总金额，单位为分，只能为整数
transactionId, // 交易号
userInfo, // 用户信息
} = event;
/**
* 在这里编写申请退款后处理逻辑
*/
console.log('refundStatus11', refundStatus)
console.log('refundFee',refundFee)
if (refundStatus === "SUCCESS") {
// 如果退款状态是退款关闭或退款异常，重置订单状态为已支付，结束轮询
if (refundFee <= 0) {
updataStatus(2)
} else {//退款成功，更新订单状态为退款成功，结束轮询
updataStatus(4)
}
}
// 更新订单状态
async function updataStatus (status) {
const statusRes = await weda.callModel({
//微信支付模板订单数据数据源标识
name: 'wxzfmbddsj_e3xp7j6',
//调用更新多条数据方法
methodName: 'wedaBatchUpdate',
params: {
where: [{
key: 'ddh',
rel: 'eq',
val: outRefundNo,
}],
record: {
zfzt: status,
}
},
/**
* 调用的引用环境类型, 默认值为 'prod'
* pre: 预览环境
* prod: 正式环境
*/
envType: 'pre',
})
return statusRes
}
// 回调的云函数必须返回如下一个对象，否则会视为回调不成功，云函数会收到重复的退款回调
return {
errcode: 0,
errmsg: "成功",
};
};
云函数调用的环境类型，默认为 prod 正式环境，这里测试用的是预览环境，在应用发布后，记得修改为正式环境。
- 调试样式，发布应用。
选择发布小程序，如果测试验证可以通过体验版进行发布。
!如果是体验版，在__统一下单__和__申请退款__方法的回调云函数中，配置对应的环境类型。
统一下单的云函数配置位置。
如果__统一下单__通知云函数没有 package.json 文件，需要右键新建文件，并录入以下代码。
{
"name": "wepay-unifiedOrder",
"version": "1.0.0",
"dependencies": {
"[@cloudbase](/user/cloudbase)/weda-scf-sdk": "*"
}
}
申请退款云函数配置位置。
! 如果退款通知云函数没有 package.json 文件，需要右键新建文件，并录入以下代码。
{
"name": "wepay-refund",
"version": "1.0.0",
"dependencies": {
"[@cloudbase](/user/cloudbase)/weda-scf-sdk": "*"
}
}
发布/上传小程序
至此，我们已模拟完成一个简单的商品售卖支付和退款完整流程，实际应用搭建时，您可以根据自己的业务特性，灵活调整各功能模块流程。
更为详细的搭建教程参考微信支付功能模版
最后，欢迎大家加入微搭官方交流群，共同交流微搭低代码开发。
强力驱动