How to Add Alipay Payments to a SpringBoot‑Vue Mall Project in Minutes

In the Mall project—a SpringBoot 3 + Vue e‑commerce system with micro‑service architecture, Docker and K8S deployment—Alipay sandbox payment can be added with minimal code changes.

Mall Project Overview

The backend is built on SpringBoot 3, the front‑end on Vue, and the repository (https://github.com/macrozheng/mall) has over 60K stars. It includes modules for products, orders, carts, permissions, coupons, members, and payments.

Boot project: https://github.com/macrozheng/mall

Cloud project: https://github.com/macrozheng/mall-swarm

Video tutorials: https://www.macrozheng.com/video/

Payment Process

The existing order workflow only needs three additional steps to support Alipay:

Add Alipay logic at the

Confirm Payment

stage.

Query Alipay for the result on the

Payment Result Page

.

Invoke the original success logic in Alipay's

Asynchronous Callback

.

Payment Flow Demonstration

The demo shows adding a product to the cart, creating an order, clicking

Submit Order

, choosing

Go to Pay

, selecting

Alipay

, confirming payment, completing the sandbox checkout, and finally viewing the order status as

Waiting for Shipment

.

Payment Configuration

Only two configuration steps are required.

Mall Portal Configuration

Edit

mall-portal/src/main/resources/application-dev.yml

to add your Alipay credentials.

<code>alipay:
  # Alipay gateway
  gatewayUrl: https://openapi-sandbox.dl.alipaydev.com/gateway.do
  # Application ID
  appId: your appId
  # Application private key
  appPrivateKey: your appPrivateKey
  # Alipay public key
  alipayPublicKey: your alipayPublicKey
  # Return URL after user confirms payment
  returnUrl: http://localhost:8060/#/pages/money/paySuccess
  # Asynchronous notification URL (must be publicly reachable)
  notifyUrl: http://localhost:8085/alipay/notify
</code>

Obtain the gateway URL, APPID, and keys from the Alipay sandbox developer console (https://open.alipay.com/develop/sandbox/app).

Mall‑App‑Web Configuration

Enable Alipay in the front‑end by setting

USE_ALIPAY

to

true

in

appConfig.js

.

Video Tutorial

A complete video series covers the entire order flow, cart, payment, confirmation, order cancellation, and callback handling. Scan the QR code in the original article to access the tutorials.

Conclusion

Integrating Alipay into the Mall project is straightforward once the order system is in place; you can clone the latest code from GitHub and try the payment feature yourself.

Source Code

https://github.com/macrozheng/mall