Integrate Alipay Sandbox Payments into a SpringBoot + Vue E‑Commerce App

In projects that need online payment, integrating Alipay is common. Alipay offers a sandbox environment that can be used with just an Alipay account, without complex commercial procedures.

Mall Project Overview

The mall project is an open‑source e‑commerce system built with SpringBoot 3 and Vue (GitHub ★60K). The backend supports multiple modules and the latest 2024 micro‑service architecture, deployed with Docker and Kubernetes. It includes front‑end shop and back‑office management, supporting full order processes such as products, orders, cart, permissions, coupons, members, and payment.

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

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

Tutorial site: https://www.macrozheng.com

Payment Process

The order and payment flow can be implemented in three steps:

Add Alipay functionality at the Confirm Payment stage.

Query the payment result on the payment result page.

Invoke the existing success logic in Alipay’s asynchronous callback.

Payment Flow Demonstration

First add a product to the cart and create an order.

Click Submit Order, then in the dialog choose Go to Pay, select Alipay, and click Confirm Payment.

On the Alipay page choose Continue Browser Payment.

Log in with a sandbox buyer account and click Confirm Payment.

After successful payment, click Finish to return to the configured result page.

View the order status and click View Order to see the order details, which should be in Waiting for Shipment state.

Payment Configuration

Only two configuration steps are required to enable Alipay in the mall project.

Mall Project Configuration

Add Alipay settings to the mall-portal module’s application-dev.yml file, replacing the placeholders with your own Alipay credentials.

alipay:
  # Alipay gateway
  gatewayUrl: https://openapi-sandbox.dl.alipaydev.com/gateway.do
  # Application ID
  appId: yourAppId
  # Application private key
  appPrivateKey: yourAppPrivateKey
  # Alipay public key
  alipayPublicKey: yourAlipayPublicKey
  # Return URL after user confirms payment (development)
  returnUrl: http://localhost:8060/#/pages/money/paySuccess
  # Asynchronous notification URL (development)
  notifyUrl: http://localhost:8085/alipay/notify

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

In the Alipay key management page you will find three keys; use the application private key and Alipay public key.

mall‑app‑web Configuration

The front‑end mall‑app‑web project disables Alipay by default. Enable it by setting the USE_ALIPAY property to true in the appConfig.js file.

Video Tutorial

A complete video tutorial covering the entire order process, shopping cart, payment, confirmation, order creation, cancellation, and payment‑success callbacks is available. Scan the QR code below to access the tutorial.

Conclusion

The mall project’s payment feature can be added with minimal code changes and a simple two‑step configuration, leveraging Alipay’s sandbox for testing. Interested developers can clone the latest code from GitHub and try the payment flow themselves.

Project Source Code

https://github.com/macrozheng/mall