AI摘要
北海のAI

今天想给我之前的项目添加一个支付功能，这里想到了之前用的支付宝沙箱，索性再做个笔记，把自己踩过的坑，还有一些细微的配置，以及前后端 + 支付宝第三方是如何实现真正的联调的，废话不多说，先上个泳道图，让大家先了解一下这里我的逻辑，注意：暂时不考虑到高并发、性能问题

%%{init: {'theme': 'base', 'themeVariables': { 'actorBorder': '#D86613', 'actorBkg': '#EBF3FB', 'signalColor': '#333', 'signalTextColor': '#333'}}}%%
sequenceDiagram
    autonumber
    
    %% 定义角色和图标
    actor U as 🦸 用户
    participant F as 📱 前端(App/Web)
    participant B as 🖥️ 后端服务
    participant A as 🔷 支付宝

    %% 阶段一：下单流程
    rect rgb(230, 242, 255)
    note right of U: 🛒 阶段一：创建订单
    U->>F: 点击“购买VIP”
    F->>B: 🚀 发起创建订单请求
    B->>B: ⚙️ 生成订单号 & 记录(Pending)
    end

    %% 阶段二：支付交互
    rect rgb(255, 248, 225)
    note right of U: 💳 阶段二：调用支付
    B->>A: 请求支付参数/预下单
    A-->>B: 返回支付URL 或 HTML表单
    B-->>F: 透传支付信息
    F->>F: 唤起收银台/打开新窗口
    F->>U: 🖼️ 显示支付宝支付页
    U->>A: 💸 确认支付(密码/指纹)
    end

    %% 阶段三：回调与确认
    rect rgb(235, 250, 235)
    note right of U: 🏁 阶段三：结果确认
    
    par 并发处理：异步通知与同步跳转
        A->>B: 🔔 POST 异步通知支付结果
        B->>B: 💾 校验签名并更新订单状态
    and
        A->>U: 🔄 支付成功，跳转同步回调页
        U->>F: 🔙 返回商户前端页面
    end

    loop ⏳ 轮询查单(防止回调延迟)
        F->>B: 🔍 查询订单最新状态
        B-->>F: ✅ 返回状态: [已支付]
    end

    F->>U: 🎉 展示“购买成功”及VIP权益
    end

当前端用户点击购买时候会将jwt令牌以及我这里VIP信息即月卡名称vip_monthly所携带过去，后端接收到这些请求时会根据这些信息生成一张订单表存在数据库中，然后会调用AliPay的SDK，在自己设定参数比如商品名称、价格等之后拼装成一个<form>表单，然后传给前端，前端会根据该表单请求支付宝的沙箱网关生成一个html给前端，然后用户就可以进行扫码或账户+密码进行支付了，在支付完成之后首先支付宝一端会有两个消息，其一：异步回调，会一直发送给公网IP下的一个接口，这个接口是自定义的我在这里直接对订单表进行了修改，修改了订单状态和支付状态都是已支付；其二：同步回调，即这里return-url可以传递本地接口直接跳转到一个新的页面。在整个流程中其实前端只需要使用websocket间隔多少秒去调用查询订单状态的接口即可。

1
2
3
4
5
6
7
alipay:
  app-id:   # 沙箱应用ID
  gatewayUrl: https://openapi-sandbox.dl.alipaydev.com/gateway.do
  private-key:   # 沙箱私钥
  public-key:   # 支付宝公钥
  notify-url: https://5506793a.r39.cpolar.top/vip/payment/alipay/notify
  return-url: http://localhost:8081/payment/success
graph TB
    A[用户前端] --> B[VIP购买弹窗]
    B --> C[创建订单API]
    C --> D[后端订单服务]
    D --> E[支付宝SDK]
    E --> F[支付宝服务器]
    F --> G[支付页面]
    G --> H[用户支付]
    H --> I[支付宝回调]
    I --> J[后端处理]
    J --> K[状态更新]
    K --> L[前端状态检查]
    L --> M[VIP开通]
sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant B as 后端
    participant A as 支付宝

    U->>F: 点击购买VIP
    F->>B: 创建订单请求
    B->>B: 生成订单号和订单记录
    B->>A: 调用支付宝支付接口
    A-->>B: 返回支付页面URL/HTML
    B-->>F: 返回支付信息
    F->>F: 打开支付窗口
    F->>U: 显示支付宝支付页面
    U->>A: 完成支付操作
    A->>B: 异步通知支付结果
    A->>U: 跳转到同步回调页面
    U->>F: 跳转到支付结果页面
    F->>F: 开始状态检查
    F->>B: 定期查询支付状态
    B-->>F: 返回最终支付状态
    F->>U: 显示支付结果