JeecgBoot AI专题研究 | JeecgBoot低代码支付功能前端对接实战
支付集成的整体架构
在 JeecgBoot低代码平台中，支付功能采用前后端分离的标准架构：前端负责发起支付请求、展示支付界面（二维码或跳转），后端负责与微信/支付宝的服务器通信、处理回调通知、维护订单状态。
本文聚焦于前端侧的对接实现，涵盖微信扫码支付和支付宝网页支付两种主流方式。
微信支付：扫码支付流程
微信支付采用"生成付款码 → 用户扫码 → 轮询结果"的标准流程。
1. 获取支付二维码
调用 JeecgBoot低代码后端接口获取微信支付二维码：
- 接口地址：
/pay/getPayCode - 请求参数：
buyYears— 订阅时长，可选值为1、2、3
接口返回支付二维码图片和关联的订单信息。前端将二维码渲染到页面上，引导用户使用微信扫码完成支付。
2. 轮询支付状态
用户扫码后，前端需要持续查询支付结果：
- 接口地址：
/pay/queryPayStatus - 请求参数：订单号（从获取二维码时的响应中获取）
- 轮询策略：建议每 2~3 秒查询一次，设置合理的超时上限（如 5 分钟）
查询结果有三种状态：
- 支付成功 — 跳转到成功页面，更新用户权益
- 支付失败 — 提示用户重新发起支付
- 等待支付 — 继续轮询
支付宝支付：表单提交流程
支付宝支付的前端实现与微信有所不同，采用的是"获取表单 → 新窗口提交"的方式。
1. 获取支付表单
- 接口地址：
/pay/alipay/getAlipayVipForm - 请求参数：与微信支付类似的订阅信息
接口返回的是一段 HTML 表单代码，包含了提交到支付宝服务器所需的全部参数。
2. 表单提交实现
前端需要动态创建 DOM 元素，将返回的表单 HTML 注入其中，并在新窗口中触发提交：
const handleAlipay = (formData: string) => {
const div = document.createElement('div');
div.innerHTML = formData;
document.body.appendChild(div);
const form = div.querySelector('form');
if (form) {
form.target = '_blank';
form.submit();
}
document.body.removeChild(div);
};
表单提交后，用户会被重定向到支付宝的收银台页面完成支付。
前端组件设计建议
在 JeecgBoot低代码平台的 Vue3 + TypeScript 技术栈下，支付组件的设计可以参考以下结构：
PaymentPanel/
├── index.vue # 主容器：套餐选择 + 支付方式切换
├── WechatPay.vue # 微信支付：二维码展示 + 状态轮询
├── AlipayPay.vue # 支付宝支付：表单提交逻辑
└── usePayment.ts # 组合式函数：封装支付相关 API 调用
套餐选择交互：使用 Radio 组件让用户选择订阅时长，确保选中状态与支付请求参数联动。
支付方式切换：Tab 或 Radio 切换微信/支付宝，切换时重置支付状态。
安全与异常处理
- 订单防重复：同一用户在上一笔订单未完成时，不应允许发起新的支付请求
- 轮询超时：设置最大轮询次数或时间上限，超时后提示用户刷新或重试
- 表单清理：支付宝表单提交后，及时从 DOM 中移除动态创建的元素
- 金额校验：前端展示金额应与后端返回一致，前端不做金额计算
总结
JeecgBoot低代码平台的支付模块封装了微信和支付宝两种主流支付方式的对接逻辑，前端开发者只需调用约定的 API 接口即可完成集成。微信支付侧重二维码展示和状态轮询，支付宝侧重表单动态提交，两者的差异决定了不同的前端实现策略。
本文为 JeecgBoot AI 专题研究系列文章。
