用微搭低代码实现微信支付，原来真的很简单
发布于 2 年前 作者 yan16 615 次浏览 来自 分享

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

一、准备工作

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

  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。
  3. 选择微信支付进入创建微信支付 API 流程，详细说明请参见 微信支付 > 新建微信支付 API 部分。
  5. 搭建首页，发起支付
  6. 首页内容展示商品信息，选择用文本、数据列表和 Tab 栏等组件搭建，这里微搭有提供丰富的组件，大家可以自由选择调整样式。
  8. 数据列表选择创建好的微信支付商品信息数据模型，配置好排序字段、方式、显示条数、分页等相关信息。
  10. 数据列表内显示对应内容组件，单击选择绑定数据。
  12. 接下来配置支付按钮，也是我们主要的功能展示，需要重点关注。
  13. 支付功能我们简化模拟生成订单、支付商品、更新订单状态整个流程。按照微信支付接口要求，需要执行以下操作：
  • 第一步：生成订单，为发起支付做准备。
  • 单击事件，调用微信支付模板订单数据数据源创建订单方法，创建一个新的订单信息，传入对应商品名称、价格、支付状态，尤其是支付状态，在不同支付流程阶段，需要根据状态变化进行更新操作。
!支付状态字段为数字，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](/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": "*"
  }
}

发布/上传小程序

至此，我们已模拟完成一个简单的商品售卖支付和退款完整流程，实际应用搭建时，您可以根据自己的业务特性，灵活调整各功能模块流程。

更为详细的搭建教程参考微信支付功能模版

最后，欢迎大家加入微搭官方交流群，共同交流微搭低代码开发。


回到顶部