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

一、准备工作

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

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

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

二、搭建小程序和管理端

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

2.1 管理端

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

商品信息数据源

字段名称	字段标识	字段类型	字段描述
商品名称	spmc	文本、短文本	用于存储商品名称信息
商品价格	spjg	数字	用于存储商品价格信息
商品描述	spms	文本、短文本	用于存储商品详细描述信息
商品图片	sptp	图片	用于存储商品图片，以图片形式在页面展示

订单信息数据源

字段名称	字段标识	字段类型	字段描述
订单号	ddh	自动编号	用于存储订单
商品名称	spmc	文本	用于存储商品名称
商品价格	spjg	数字	用于存储价格信息
支付状态	zfzt	数字	用于存储订单支付状态：1：表示未支付 2：表示已支付 3：表示退款中4：表示已退款

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

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

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

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

2.2 小程序

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

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

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

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

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

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

• 第二步：发起支付。
  订单和商品信息准备好后，接下来调用创建好的微信支付 APIs，统一下单接口，传入商品描述、商户订单号、支付总金额相关信息。
  一定要使用自己创建好的微信支付 APIs 服务，创建方法请务必参见 微信支付。

  
  调用成功后，才能使用自定义方法，调用编辑器写好的发起支付命令，发起微信支付。
  
  应用调用如下图：
  

• 第三步：根据支付结果更新订单状态。
  特别强调： 微信支付成功和失败结果，并不会在发起支付后直接返回支付结果，而是通过在统一下单接口的回调云函数中，异步通知支付结果，所以对订单支付结果的更新，我们需要在回调云函数中操作。
  
  统一下单云函数内，根据返回的订单号，更新支付状态。
  云函数调用的环境类型，默认为 prod 正式环境，这里测试用的是预览环境，在应用发布后，记得修改为正式环境
  
  至此，发起支付的整体功能已完成，接下来需要进行订单管理和退款操作。

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

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

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

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

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

2. 单击申请退款。
首先打开弹窗，由用户确认是否发起退款。

确认发起退款后，调用 APIs 微信支付模板功能申请退款方法。

3. 根据退款结果更新订单状态。
申请退款接口调用成功的回调，更新支付状态为3退款中。

!退款成功和失败结果，并不会在发起退款后直接返回结果，而是通过在申请退款接口的回调云函数中，异步通知退款结果，所以对订单支付结果的更新，需要在回调云函数中操作。

申请退款云函数中，接收到退款通知后，根据返回的退款值，更新订单状态，失败更新为2已支付，退款成功更新为4已退款。

"use strict";
const weda = require('@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/weda-scf-sdk": "*"
    }
}

申请退款云函数配置位置。

! 如果退款通知云函数没有 package.json 文件，需要右键新建文件，并录入以下代码。

{
  "name": "wepay-refund",
  "version": "1.0.0",
  "dependencies": {
      "@cloudbase/weda-scf-sdk": "*"
  }
}

发布/上传小程序

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