Booking Mini-Program SaaS System Source Code Setup: VUE Frontend + WeChat Pay Deployment Notes

Disclaimer: This article is for technical education and demonstration only. It is not professional or financial advice. Any real-world deployment must comply with applicable laws and regulations.

I recently helped a venue operations client deploy an open-source booking mini-program SaaS system. It took about two days of back-and-forth, and I’m writing down all the pitfalls I hit. The frontend of this source code is written in VUE and supports compiling to WeChat Mini-Program, Alipay Mini-Program, and H5 — three platforms in total. The backend is a PHP-based admin management system. Overall, the completion quality is solid, and it’s well suited for launching a booking-type SaaS service directly.

Feature Testing: The Core Booking Logic Works

Let’s talk features first. The booking module in this system is fairly detailed — not the kind of demo that’s just for show:

Four Booking Modes

The backend lets you configure booking rules by venue, by staff member, by time reel simulation, or by headcount limit. I tested venue booking in practice: I set one venue with 8 daily time slots, each capped at 3 groups. In the mini-program frontend, remaining slots display in real time, and once a reel simulation fills up it automatically grays out. That logic checks out with no issues.

Payment Interface

The system integrates WeChat Pay in service provider mode plus Alipay. The service provider mode configuration is the key part — the sub_mchid needs to be bound to each merchant one by one in the backend. When testing, remember to run a 0.01-yuan order through the callback first. The callback URL must be reachable from the public internet; at first I couldn’t receive notifications while testing locally, and everything worked once I moved it to the server.

Supporting Features

It supports cloud printer interfaces — once an order is confirmed, a receipt prints automatically. The client used Fei’e cloud printing and the integration went smoothly. SMS reminders use the Alibaba Cloud SMS channel; once your template is approved, booking confirmation notifications can go out. The backend also includes a static website you can edit with your own copy and use as a landing page, saving the cost of building a separate site.

Deployment Essentials: Pitfalls to Avoid

Environment Requirements

PHP 7.4+, MySQL 5.7, and Nginx will do. The frontend is a uni-app style VUE project — compile it to a WeChat Mini-Program with HBuilderX, and remember to fill in your own appid in manifest.json. Backend deployment is the usual routine: upload the source code, import the database, update the connection info in the config, and use the thinkphp rewrite rules for pseudo-static URLs.

Mini-Program Configuration

In the mini-program console, you must add your API domain to the list of valid request domains — otherwise real-device testing just shows a white screen. Don’t mix up the association between the payment merchant ID and the appid. Under service provider mode, check the onboarding status of each sub-merchant in the WeChat merchant platform; if onboarding hasn’t been approved, payments will definitely throw errors.

Highlight: This source code is the open-source version — the code isn’t encrypted or obfuscated, so secondary development like changing templates or adding fields is easy. The booking rules table structure is clean; if you want to add a custom booking type, just model it after the venue module.

Multi-Platform Compilation Testing

With the same frontend codebase, switching via conditional compilation to the Alipay Mini-Program and H5 both worked. The H5 version can be linked directly from an official account menu, skipping the review process. Payments on the Alipay side go through the system’s built-in alipay channel — when configuring keys, make sure to generate them in PKCS8 format with the key tool. Using the wrong format will waste half a day for nothing.

Who Is This For

This system suits teams building booking-type SaaS products, developers doing mini-program outsourcing for offline stores, and businesses with venue or store booking needs that want to build their own. It’s a multi-merchant SaaS architecture: the platform can open merchant accounts, each merchant manages their own booking items and check-ins, and there’s platform commission logic built in too. If you plan to do secondary development, a VUE frontend is easier to maintain than a native mini-program and much faster to modify.

FAQ

Q: Will the mini-program review get rejected?
A: Booking-type categories normally pass review, but make sure you pick the right category — for example, venue booking falls under sports/lifestyle services. With complete credentials, it usually passes on the first try.

Q: Can I deploy it without knowing VUE?
A: Deploying the backend and APIs requires no VUE knowledge — only modifying frontend pages does. If you don’t change the styling, a one-click compile in HBuilderX produces the mini-program package.

Q: Does it support multiple languages?
A: The source code defaults to Chinese, but the language pack structure follows the standard multilingual file format. Adding an English pack isn’t much work, and API response strings are centrally managed too.

Q: What server specs do I need?
A: 2 cores and 4GB of RAM is enough for the early stage with a few dozen merchants. Keep the database backed up regularly. During booking peaks, the main load comes from SMS and print callbacks — an async queue handles that fine.

One last note: I’ve been running this deployment for half a month now, and it’s been stable with no surprises. This article is for technical education only — when using the system, please comply with applicable laws and regulations, and never use it for any unlawful purposes.

Disclaimer: This article is for technical education and demonstration only. It is not professional or financial advice. Any real-world deployment must comply with applicable laws and regulations.

#Booking Mini-Program #SaaS System #Source Code Setup #VUE Frontend #WeChat Pay