本文将为你展示如何用微搭低代码，快速完成小程序微信支付功能。开发者无需关心证书、签名、微信支付服务端对接等复杂流程，只需按照标准流程完成相应功能，即可完成小程序线上支付业务。

一、准备工作

在进行业务搭建之前，我们需要做以下准备工作：

1. 企业/个体工商户的微信小程序和微信支付商户号
2. 完成小程序与商户号的绑定
3. 下载最新版微信开发工具版本

相关帮助文档可参考通过微搭快速注册小程序、获取商户号、商户号绑定小程序 AppID

二、搭建小程序和管理端

简单拆解下我们需要完成的主要功能：
1.管理端：上架商品、订单管理。
2.小程序：商品售卖、订单展示与退款。
对应模版可以安装微信开发工具-微搭-微信支付功能展示模版，详细了解应用功能。

2.1 管理端

管理端主要完成商品信息和订单信息的数据模型设计，字段设计如下：

商品信息数据源

订单信息数据源

数据源配置在进入工具编辑器，选中数据源-数据模型-创建数据模型，配置对应字段即可

模拟数据可以点击管理数据，跳转浏览器进行测试商品的录入

生成模型应用需要跳转至微搭控制台，选择创建好的数据模型，创建模型应用即可。

进入__应用开发__ > 应用__页面，单击__新建应用 > 新建模型应用。

2.2 小程序

微搭低码提供了微信支付APIs服务，包括统一下单、查询订单、关闭订单、下载对账单以及退款相关接口，仅需完成简单配置，即可调用微信支付相关接口并完成业务搭建，强烈推荐。

1. 进入__数据源__ > APIs 页面，选择__新建 APIs__。
   
2. 选择__微信支付__进入创建微信支付 API 流程，详细说明请参见 微信支付 > 新建微信支付 API 部分。
   
3. 搭建首页，发起支付
   首页内容展示商品信息，选择用文本、数据列表和 Tab 栏等组件搭建，这里微搭有提供丰富的组件，大家可以自由选择调整样式。
   
   数据列表选择创建好的__微信支付商品信息__数据模型，配置好排序字段、方式、显示条数、分页等相关信息。
   
   数据列表内显示对应内容组件，单击选择__绑定数据__。
   
   接下来配置__支付__按钮，也是我们主要的功能展示，需要重点关注。
   支付功能我们简化模拟生成订单、支付商品、更新订单状态整个流程。按照微信支付接口要求，需要执行以下操作：
   

• 第一步：生成订单，为发起支付做准备。
  单击__事件__，调用__微信支付模板订单数据__数据源__创建订单__方法，创建一个新的订单信息，传入对应商品名称、价格、支付状态，尤其是支付状态，在不同支付流程阶段，需要根据状态变化进行更新操作。

!支付状态字段为数字，1：表示未支付，2：表示已支付，3：表示退款中，4：表示已退款

创建订单成功后，调用数据源方法，根据返回值的数据唯一标识，查询订单信息。

查询成功回调，返回值赋值给提前设置好的全局变量，用于接下来发起支付时传输订单号。

__第二步：发起支付。__  
订单和商品信息准备好后，接下来调用创建好的微信支付 APIs，统一下单接口，传入商品描述、商户订单号、支付总金额相关信息。  
一定要使用自己创建好的微信支付 APIs 服务，创建方法请务必参见 <a href="https://cloud.tencent.com/document/product/1301/76292" rel="noopener" target="_blank">微信支付</a>。



![](https://image.wxopen.club/content_6b75f1cc-0219-11ee-843e-acde48001122.png)  
调用成功后，才能使用自定义方法，调用编辑器写好的发起支付命令，发起微信支付。  
![](https://image.wxopen.club/content_6b867ba0-0219-11ee-843e-acde48001122.png)  
应用调用如下图：  
![](https://image.wxopen.club/content_6b9cf556-0219-11ee-843e-acde48001122.png)

__第三步：根据支付结果更新订单状态。__  
__特别强调：__ 微信支付成功和失败结果，并不会在发起支付后直接返回支付结果，而是通过在__统一下单__接口的回调云函数中，异步通知支付结果，所以对订单支付结果的更新，我们需要在回调云函数中操作。  
![](https://image.wxopen.club/content_6bac592e-0219-11ee-843e-acde48001122.png)  
统一下单云函数内，根据返回的订单号，更新支付状态。  
云函数调用的环境类型，默认为 __prod 正式环境__，这里测试用的是预览环境，在应用发布后，记得修改为正式环境  
![](https://image.wxopen.club/content_6bc4feac-0219-11ee-843e-acde48001122.png)  
至此，发起支付的整体功能已完成，接下来需要进行订单管理和退款操作。

订单页选择用选项卡和 Tab 栏进行搭建，选项卡内放入数据列表，数据列表选择创建好的__微信支付模板订单数据__数据模型，根据不同选项，配置好数据筛选条件、排序字段、方式、显示条数、分页等相关信息，如已支付页面，数据以支付状态等于2来筛选，其余页面逻辑类似。

发起退款流程，主要包括发起退款、更新订单状态、退款通知、查询退款结果、再次更新订单状态。
按照微信退款接口要求，退款需要执行以下操作：

1. 已支付订单，显示申请退款按钮。

!支付状态字段为数字，1：表示未支付，2：表示已支付，3：表示退款中，4：表示已退款。

申请退款按钮的显示条件为：支付状态字段等于2时，显示退款按钮。

2. 单击申请退款。
   首先打开弹窗，由用户确认是否发起退款。
   
   确认发起退款后，调用 APIs __微信支付模板功能申请退款__方法。
   
3. 根据退款结果更新订单状态。
   申请退款接口调用成功的回调，更新支付状态为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 正式环境，这里测试用的是预览环境，在应用发布后，记得修改为正式环境。

4. 调试样式，发布应用。
   选择发布小程序，如果测试验证可以通过体验版进行发布。

!如果是体验版，在__统一下单__和__申请退款__方法的回调云函数中，配置对应的环境类型。
统一下单的云函数配置位置。

如果__统一下单__通知云函数没有 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": "*"
  }
}

发布/上传小程序

至此，我们已模拟完成一个简单的商品售卖支付和退款完整流程，实际应用搭建时，您可以根据自己的业务特性，灵活调整各功能模块流程。
更为详细的搭建教程参考微信支付功能模版
最后，欢迎大家加入微搭官方交流群，共同交流微搭低代码开发。