跨境三方支付系统
全链路作品演示

本支付系统基于传统收卡体系,聚焦印度市场,面向商户及第三方平台,以标准化支付接口实现无缝接入,一站式承载批量资金收付等规模化交易场景,覆盖交易撮合、虚拟账户、自动对账与智能风控的全链路能力。

STACKReact + Tailwind v4 MARKET印度 INR / UPI DOCSV3.6 / V1.4
SYSTEM · ARCHITECTURE · 五层架构 角色层 ACTORS H5 用户 终端钱包 商户 接入方 运营 · 交易员 平台人员 接入层 ACCESS 管理后台 React · TS 钱包 H5 原生 · core.js API 网关 鉴权 · 限流 业务引擎 ENGINE 订单 代收/代付 钱包 余额/明细 撮合 三池分流 结算 清算/通知 代理 团队佣金 支付通道 RAILS UPI 印度主通道 银行清算 INR 入账 三方支付 聚合备援 基础设施 INFRA 数据库 MySQL 缓存 Redis 消息队列 异步通知 实时推送 WebSocket ↓ DATA FLOW · 数据下行 · 指令上行 ↑
数据下行 · 通道回执 指令上行 · 商户请求 实时状态 · 心跳同步
5 层架构 · 18 个核心组件
STG · 实时同步
Project Overview

一套产品,两端联动

同一个跨境支付业务,分别服务「平台运营方」与「终端用户」,后台与钱包通过订单与账户数据实时打通。

Backend · Admin

管理后台

面向平台运营人员的管理控制台,覆盖用户、商户、钱包、订单、代理等核心业务数据的全闭环操作。

  • 多角色权限:管理员 / 业务员 / 交易员 / 商户 / 运营
  • 代收 / 代付订单全生命周期管理(含补单、通知)
  • 实时账户明细、余额调整与统计数据
  • 关键操作二次确认,全程可追溯
Frontend · H5 App

交易员下单系统

面向终端用户的 UPI 代收代付钱包 App,集成五大模块与游戏中心、视频课堂等增长能力。

  • 五大 Tab:首页 / 订单 / 钱包 / 团队 / 我的
  • 交易数据三维筛选、收益摘要、UPI 卡片链路
  • 代理返佣、团队佣金与邀请体系
  • 自研游戏中心(Crash / Dice / Mines / Teen Patti 等)

双端关系 · 一笔代收代付的完整旅程

01
H5 用户下单发起代收 / 代付
02
后台接单交易员处理 / 审核
03
UPI 清算银行 / 交易员侧
04
回执入账通知商户
05
钱包同步H5 实时余额
Live Prototype

原型实时交互

下方为真实可操作的产品原型,直接嵌入运行。切换标签查看「管理后台(桌面)」与「H5 App(移动)」。

管理后台 · 桌面
钱包 H5 · 移动
交互预览 ↗ 在新标签打开
后台系统 / index.html · 管理后台
提示:H5 原型为移动端布局,建议在窄屏或手机框内体验交互。
Core Features

核心功能亮点

覆盖交易撮合、账户账务、风控到清结算的全链路核心能力。

💸

交易撮合引擎

代收订单智能撮合,多通道实时比价选路,最大化成交率与到账速度;失败订单自动重试与补单挽回。

01
🏦

虚拟账户体系

多层级虚拟账户 + 资金隔离,余额实时归集,支持多币种钱包与可用/冻结额度精细化管理。

02
⚖️

自动对账引擎

钱包流水 ↔ 订单 ↔ 通道回执三方自动匹配,差异自动挂账、秒级平账,告别人工对账。

03
🛡️

智能风控系统

限额 / 频次 / 设备指纹 / 行为多维风控,可疑交易实时拦截,全链路守护资金与账户安全。

04
🏧

资金清结算

代收代付 T+0 / T+1 清算,代理佣金自动计提与下发,结算零人工、到账可追溯。

05
🤝

商户代理中台

商户入驻审核 + 多级代理分润,邀请返佣驱动渠道裂变,一个中台管理全渠道增长与佣金发放。

06
📊

实时数据驾驶舱

UPI 在线率 / 成交漏斗 / 佣金环比秒级观测,运营 → 决策 → 风控实时数据闭环。

07
🔐

合规权限底座

五级角色隔离 + 全量操作审计,满足印度 RBI 合规报备与反洗钱(AML)监管要求。

08
🧩

功能模块化自定义

商户可按业务场景灵活启用 / 关闭 / 组合功能模块;运营通过配置中心实时下发 App 配置、活动配置、收银台配置、APP 版本与字典项,无需发版即生效,支持灰度发布与一键回滚。

09
Business Flow · 全链路可视化

代收交易撮合 全链路

交互式业务流图:商户请求进入 → 硬门槛过滤 → 三池比例分流 → 池内 UPI 收款账户选择 → 锁定、展示、结果回写。支持三种视图切换。

↗ 全屏查看互动图

提示:页面内可切换「订单撮合处理顺序 / 校验分支全链路 / 动态链路演示」三个视图,点击节点查看明细。

Architecture

技术架构与模块结构

后台采用 React 工程化栈,H5 采用原生架构并自研轻量游戏引擎;两端共享同一套业务模型与状态逻辑。

管理后台

工程化前端 · 组件化 · 可维护
React 18.3.1 React Router 7.13 Radix UI Tailwind v4 Lucide React Hook Form Vite 6.3.5 自定义 Store
01登录 · 仪表板 Dashboard
02账号 / 交易员 / 商户 / 代理管理
03钱包管理 · UPI 管理
04代收订单 · 代付订单
05交易员 / 商户账户明细

钱包 H5

原生 H5 · 自研游戏引擎 · 轻量
原生 H5 / JS 自研引擎 core.js 8 款游戏 Hash 路由 Bridge 桥接
01首页 · 交易数据三维筛选
02订单 · 钱包 · UPI 卡片
03团队 · 代理返佣 / 佣金
04我的 · 账户明细
05游戏中心 · 视频课堂
Signals & Rules

数据 · 角色 · 业务规则

产品规模、系统角色与一笔订单的生命周期可视化。

2
产品端(后台 + H5)
12
后台功能模块
5
系统角色
8
游戏中心
1
目标市场 · 印度
订单状态流转
A

管理员

最高权限,可操作全部模块

B

业务员

订单管理、商户管理

C

交易员

负责实际收款 / 付款操作

D

商户

接入平台的支付商户

E

运营

统计报表、代理管理

核心业务规则 · 订单状态流转(代收 / 代付通用)

1
创建订单用户 / 商户发起
2
待支付等待付款
3
支付中交易员处理
4
清算UPI / 银行
5
通知商户回执推送
✓ 成功 → 账户入账 ✕ 失败 → 补单 / 状态调整
Requirement Docs

需求设计文档

以下为产品需求设计文档(已渲染),可在页面内直接阅读,含目录导航与表格。

文档: 管理后台 V3.6(一期) 管理后台 V1.1(二期) 钱包 H5 V1.4 ↗ 全屏阅读