微信支付x低代码，快速构建支付类小程序实操教程

来源：基于Stable-Diffusion AI模型生成

基于微搭低代码开发的小程序，如何调用微信的在线支付能力，当前的实现方案主要有如下两种：

• 使用微搭内置的微信支付APIs连接器
• 通过自行实现微信支付接口API提供给微搭调用

注意，以上实现方案仅在小程序端有效。

下面我们就基于这两种方案分别展开介绍一下，大家可按需选取适用方案。

一、在微搭使用内置的微信支付APIs连接器实现

该方案基于微搭内置的连接器API来完成，可以做到几乎不写任何后端逻辑代码，即可完成在线支付流程的搭建。

• 优势，整体流程操作相对简单，目前主推这种方式
• 不足，需要是普通商户号（比如小商店这类二级商户号则不支持），一般情况下，常规流程开通的商户号默认为普通商户号

1 准备工作

• 开通一个企业主体下的小程序，并且授权给微搭，完成绑定操作。在微搭低代码控制台也提供了直接注册小程序 的入口
• 同时在该企业主体下，在微信支付平台申请商户号（注：必须为普通商户号，不能为二级商户号，如微信小商店默认开通的商户号则不支持）
• 在小程序的公众号后台，选择微信支付模块的商户号管理，发起关联该微信商户号

2 操作步骤

2.1 新建商品和订单的数据模型

在微搭控制台完成微信小程序授权后，可以先开始新建商品和订单相关的数据模型，具体模型字段可以参考如下：

这里有关新建数据模型的详细步骤可参考官方文档微搭新建订单数据模型，这里不再赘述。

2.2 新建微搭微信支付APIs连接器

进入数据源模块中选择APIs，新建APIs中选择微信支付，点击微信支付后，可以看到如下授权信息：

需要注意的是，这一步的微信支付商户号绑定操作，必须使用微信商户平台的超级管理员关注微信支付商家助手公众号之后，查收微信推送的相关授权信息并进行确认。

发起授权后，微信商户平台的超级管理员会收到 微信支付商家助手 公众号推送的确认消息，根据提示进行授权即可。完成授权后，也可以通过登录微信商户平台查看绑定状态。

如果对这一步骤有疑问，新建微信支付APIs的详细流程也可参考官方文档新建微信支付APIs数据源。

2.3 配置调用统一下单接口以及回调接口

构建如下下单支付页之后，选择支付按钮，给按钮配置点击事件：

首先，在数据源中选择第一步新建的订单数据源，并选择“创建单条记录”将相关商品信息作为入参完成订单的新建，之后通过返回值拿到生成的内部的订单号（该内部订单号可自行按规则生成自增数字即可，需要在下一步中作为微信支付统一下单API的入参）

在成功拿到内部订单号后，接着调用微信支付的API，在调用数据源中选择上一步创建的数据源微信支付APIs，选择“统一下单”方法，配置参考如下：

上述步骤中，需要各位注意的是，微信统一下单方法的价格入参必须要求是整数，单位为分，比如1元钱，则传入参数应为100，一毛钱应为10，如果出现小数点如0.1，则会调用失败报错。

完成统一下单接口调用之后，通过拿到微信支付API返回的prepay_id等参数，在前端调用自定义JavaScript方法调用wx.requestPayment方法发起支付操作，来调起微信的支付弹层，相关自定义JavaScript参考如下：

export default function({event, data}) {

        wx.requestPayment({
            ...event.detail.payment,
            success (res) {
              console.log('pay success', res);
              app.showToast({
                    title: "支付成功"
              })
            },
            fail (err) {
              console.error('pay fail', err);
              app.showToast({
                    title: "支付失败"
                })
            }
        })
}

综上，整体的前端交互流程步骤，总结下主要包含如下几步：

以上就是发起微信支付的全部流程了。

最后别忘了，完成发起支付成功或失败后，微信支付会有相应的后端接口回调。微搭默认的微信支付APIs连接器自带了回调的云函数（即支付成功或失败的回调），在云函数中调用数据源方法来更新订单状态即可。发起退款与发起支付同理，可调用微信支付APIs中内置的不同接口方法，完成这些接口方法的调用后，通过云函数回调来更新订单退款状态。

关于云函数回调操作的详细步骤，可参考微信支付云函数回调文档，关于小程序页面搭建过程，可参考微搭支付下单页搭建文档，小程序调起支付前端接口说明，可参考小程序调起支付API

二、在微搭使用自行实现的微信支付API

该方案主要基于自行开发的微信支付下单等相关API，接入微搭来完成在线支付业务流程的搭建。

• 优势，可以支持二级商户号（比如小商店商户号），也可以绑定不同主体的商户号（将小程序和商户号建立绑定关系即可）
• 不足，需要有公网服务器并且具备后端服务语言的开发能力（如PHP，Java等）

1 准备工作

• 需要有独立的服务器/域名，并且具备一定开发能力，以及至少一种服务端开发语言，如Java、PHP或NodeJS皆可
• 开通一个企业主体下的小程序，并且授权给微搭，完成绑定操作。在微搭低代码控制台也提供了直接注册小程序 的入口
• 同时在该企业主体下，在微信支付平台申请商户号（注：该方案不受限于商户号类型，均可使用，适用于某些二级商户号的情况）
• 在小程序的公众号后台，选择微信支付模块的商户号管理，发起关联该微信商户号

2 操作步骤

2.1 新建商品和订单的数据模型

在微搭控制台完成微信小程序授权后，可以先开始新建商品和订单相关的数据模型，具体模型字段可以参考如下：

这一步与方案一流程相同，在此不再赘述。

2.2 微信支付相关接口的开发

微信支付相关接口的开发，主要有两个 统一下单接口，以及支付成功的回调接口（默认采用APIv3版本的微信支付API）。

首先，在接口开发前，需要去商户平台下载相应的平台证书以及相关API KEY，详细过程可参考官方文档：小程序支付接入前准备

其次，完成上述证书的下载和配置之后，可以着手接口代码的编写，其中的关键代码如下（这里以PHP为例）：

统一下单部分：

下单回调部分：

更完整的后端实现代码，大家可参考GitHub开源实现方案：wechatpay-php

最后，接口开发完成后，在微搭数据源中配置自定义APIs连接器，关联上述自行开发的API接口，比如设置统一下单API接口，根据自己接口定义的入参，填入相关查询参数：

2.3 配置调用统一下单接口以及回调接口

这一步的整体流程与方案一类似，前端步骤包含如下几步：

唯一的差异是需要把内置的微信支付APIs连接器，换成自己开发的自定义API即可。参考如下：

调用上述新建的微信支付自定义API连接器的下单方法后，传入对应的参数openid、下单金额、内部订单号等，自定义接口则返回给前端调用支付wx.requestPayment方法所需要的prepay_id和签名等信息，来调起微信的支付弹层，其中，将wx.requestPayment方法的入参...event.detail.data解构做如下替换：

export default function({event, data}) {

        wx.requestPayment({
            ...event.detail.data,
            success (res) {
              console.log('pay success', res);
              app.showToast({
                    title: "支付成功"
              })
            },
            fail (err) {
              console.error('pay fail', err);
              app.showToast({
                    title: "支付失败"
                })
            }
        })
}

以上就是发起自定义微信API支付的全部流程了。发起退款与发起支付同理，完成自建服务端的退款API搭建后，在微搭配置自定义API的对应方法，然后在前端进行调用即可。

到此，以上两种方案都介绍完了，有开通企业账号的朋友可以动手试一试。