Overseas Food Delivery Proxy Payment System Setup Guide: UniApp Frontend Custom Products Multi-language Platform Deployment

I recently helped a client targeting the Southeast Asian market set up an overseas food delivery proxy payment system. The frontend uses uniapp and the backend is fully open source PHP. The biggest highlight of this system is that products can be customized and configured, and the order flow is highly flexible. The entire process from environment configuration to going live took about three days, and I ran into a few small pitfalls along the way. I am organizing and sharing this for anyone who needs it.

One, System Feature Overview

The core functional modules of this overseas food delivery proxy payment system are as follows:

  1. Custom Product Configuration: The backend can flexibly add products, set prices, inventory, and descriptions, and supports multi-specification combinations. New products can be listed without changing the code.
  2. Order Management System: Complete order lifecycle management, from placing an order, payment, delivery to completion. Each node has a status marker for easy operational tracking.
  3. Proxy Payment Function: After users place an order, the platform统一 pays on their behalf, lowering the user payment threshold. This is especially suitable for markets with low credit card coverage.
  4. Multi-language Support: Currently built-in English, Simplified Chinese, and Traditional Chinese. Other languages can be expanded as needed.
  5. UniApp Frontend: One set of code simultaneously generates H5, Android, and iOS versions. The maintenance cost is low, and updates only need to be made once.
  6. Payment Interface Reserved: The system architecture reserves a payment interface module, but the payment channel needs to be integrated by yourself. It supports mainstream overseas payment gateways.

Two, Preparation Before Deployment

Before deploying this system, check the following checklist:

  • Server: Linux environment, recommended CentOS 7.6+ or Ubuntu 20.04+, minimum configuration 2-core 4G.
  • Runtime Environment: Nginx 1.18+, PHP 7.4+, MySQL 5.7+. It is recommended to use the Baota panel for one-click installation.
  • Development Tools: HBuilderX (for compiling uniapp frontend), Node.js 14+ (for frontend dependencies).
  • Domain and SSL: HTTPS configuration is recommended. Overseas domains do not require registration, but SSL certificates must be configured.
  • Payment Channels: Prepare overseas payment interfaces in advance, such as Stripe, PayPal, or other local payment methods.
  • Source Code Integrity: Confirm that the source package includes the backend API, frontend uniapp project, and database .sql files.

Three, Common Issues and Pitfall Records

3.1 Frontend Routing Fails in H5 Mode

UniApp’s vue-router in H5 mode needs to configure history mode. The default hash mode will cause some pages to return 404 after refreshing. Modify the router configuration in manifest.json, change the mode to history, and configure the try_files rule in Nginx.

3.2 Product Images Show Blank After Upload

This issue is usually caused by the PHP GD library not being installed or insufficient upload directory permissions. Check the PHP extensions in the Baota panel to confirm that gd, fileinfo, and exif are all installed. Then check whether the uploads directory permissions are 755.

3.3 Multi-language Switching Does Not Take Effect

Language pack files are placed in the static/i18n directory. If the page does not refresh when switching languages, it may be a caching issue. In uniapp’s App.vue, listen for the language switch event and force the current page data to refresh.

Four, Customization and Expansion Suggestions

If the standard version functions are not enough, consider the following expansion directions:

  • Add a rider-side APP, support real-time positioning and order grabbing, making it a complete food delivery closed loop.
  • Integrate map API to achieve delivery route planning and estimated delivery time calculation.
  • Add a coupon system supporting full reduction, discount codes, new user gift packages, and other marketing玩法.
  • Add a membership level system that automatically upgrades based on consumption amount to enjoy different discounts.
  • Add a data analysis backend to统计 core indicators such as order volume, average order value, and repurchase rate.

Tip: Overseas operations must pay attention to data compliance, especially user privacy and payment data. It is recommended to place the server in the target market locally or choose a compliant cloud service provider to avoid subsequent legal risks.

Five, FAQ

Q1: What payment methods does this system support?
A: The system itself does not bind to a payment channel. It reserves a payment interface and can integrate with any payment gateway that supports HTTP callbacks. Stripe, PayPal, and local bank transfers can all be integrated.

Q2: Can it be made into a pure APP?
A: Yes. The uniapp project supports packaging into Android APK and iOS IPA, and can also generate WeChat mini-programs and H5 pages. One set of code covers multiple platforms.

Q3: Does custom product configuration require programming skills?
A: No. All product configurations are visual operations in the backend. Uploading images, filling in prices, and setting inventory are all click-and-select operations with zero coding门槛.

Q4: Does the system support multi-language switching?
A: Yes. Currently built-in English, Simplified Chinese, and Traditional Chinese. The backend can freely enable or disable them. If you need to add a new language, you only need to translate the language pack file.

Q5: Is the source code fully open source?
A: Yes. The backend PHP is fully open source, and the frontend uniapp project is also complete source code. There are no encrypted files, and it can be freely二次 developed.


Source Reference: This article is organized based on source code demonstration content, for technical learning and exchange purposes only.

#Overseas Food Delivery System #Proxy Payment Platform #UniApp Frontend #Multi-language Mall #Custom Products