Development Overview
This document guides you through the entire development process. Follow the steps below to develop and publish your own Mini App.
ONBOARDING
1. Create a MoMo for Business account
A MoMo for Business account is required to use services that the MoMo platform provides. You can create an account on the MoMo for Business website. For more details, follow the Mini App Registration guide.
You can skip this step if you already have a MoMo for Business account.
2. Login to Mini App Center
Use the account registered on MoMo for Business to log in to the Mini App Center. If you do not have one, you can register directly on the Mini App Center page.
3. Register Mini App Plan
You need to register for the Mini App Plan to be able to add your Mini App.
SETUP
1. Create Mini App
You must go to the Mini App List, click the Add Mini App button, and fill in your Mini App's information. Select Add New to submit the request to add a new Mini App. After submitting, MoMo will contact you in 02-05 days to proceed with the cooperation process. For more details, follow the Create Mini App guide.
2. Set NPM Configuration
NPM Configuration is used for authentication with MoMo Packages, which contains Mini CLI and Mini API used during Mini App development. Go to Mini App Dashboard > Overview, copy and run the NPM Configuration codes in the terminal of your development tool. For more details, follow the NPM Configuration guide.
3. Install Mini App CLI (For React Native)
Install Mini App CLI to create Mini App source code, Debug, and Build Mini App.
4. Create Mini App source code (For React Native)
You must develop the Mini App inside a source code folder provided by MoMo. For details on initializing the source code folder, follow the Create Mini App source code guide in the Mini CLI Installation document.
5. Install Mini API
Mini API provides APIs for Mini App to interact with the MoMo App Platform.
Mini API is installed automatically when you complete creating the Mini App source code in the previous step (for React Native app) or run the "install new Mini App" command in the Installation guide (for Web app). For more details, please refer to the Mini API Installation document.
START DEVELOPMENT
1. Download Mini App Configuration (For React Native)
Get the app.json file and replace it with the current one in the source code folder so that Mini App can authenticate with Mini App Center and MoMo Platform. For more details, follow the Setup Mini App Configuration guide.
2. Start Mini App Debug Server (For React Native)
Start the Debug Server, which allows you to run the Mini App and functions in debugging mode to test the app while developing. You can refer to the Start Mini App Server section in the Mini CLI Installation document.
3. Download MoMo Platform
You must download and install the MoMo Platform to test the Mini App on devices. Mini App will be hosted and run on the MoMo Platform.
4. Debug Mini App
Debugging the Mini App helps you to discover errors and causes to fix them during development and testing. To debug the Mini App, you must use Devtool. For more details, follow the Mini App Debug guide.
INTEGRATE FEATURES (OPTIONAL)
User Authentication
User Authentication allows the Mini App to trust the user while they are using the Mini App. Use the User authentication API and follow the User Authentication guide to authenticate the user.
User Data Permission
You can request users to provide personal information such as name, phone number, etc., and use them for a specific function of the Mini App. For more details, you can follow the User Data Sharing guide.
Device Permission
You can request users to provide device permissions such as Photo, Location, and Camera and use them for a specific function of the Mini App. For more details, you can follow the User Data Sharing guide.
MoMo In-App Payment SDK (One-time Payment)
If the Mini App has a payment feature, you must integrate the In-App Payment SDK to use the Payment feature on MoMo. For more details, you can follow the Payment SDK guide.
UI Component
Using the UI components provided by MoMo can accelerate the development process and ensures UI consistency. For more details, you can follow the MoMo Component Kits guide.
FOLLOW DESIGN GUIDELINE & REVIEW CHECKLIST
1. Follow Design Guideline
Follow the Design Guideline to ensure the Mini App's visual design is up to the standard of MoMo. We will review the app design and compare it with the Design Checklists. If your app fails to meet our requirements, your rollout request will be rejected.
2. Follow Branding Guidelines
Follow the Branding Guidelines to ensure the MoMo logo's design is displayed correctly inside the Mini App. If your app fails to meet our requirements, your rollout request will be rejected.
3. Follow Product Review Checklist
Product Review Checklist lists down all the product requirements of a Mini App. Before rolling out a Mini App, you must ensure the Mini App applies all the rules. If your app fails to meet our requirements, your rollout request will be rejected.
BUILD MINI APP (FOR REACT NATIVE)
1. Link Mini App to Source Code
Connecting the source code lets the Mini App Center's build system clone the repository while building the Mini App. For more details, follow the Connect To Source guide.
2. Build Mini App
Building a Mini App creates a Beta Version of the Mini App. You can send the Beta Version to other people for testing or to MoMo Reviewer for processing the production rollout. For more details, follow the Using Mini App Center guide or Using Mini App CLI guide.
TEST MINI APP (BETA VERSION)
Scan Beta QR Code
For React Native app:
You can use the Devtool and scan the Beta QR Code displayed in a Build Mini App result to open the Beta version of a React Native Mini App. For more details, follow the Mini App Beta Testing section in the Mini App Beta document.
For Web app:
You can use the Devtool and scan the Beta QR Code displayed on the Mini App Links page to open the Beta version of a Webview Mini App. For more details, follow the Scan Beta QR Code section Mini App Web document.
Sync Beta QR Code Automatically (For React Native)
You can authenticate Devtool with Mini App Center to sync the Beta QR Code automatically. This allows you to test new Mini App builds without scanning the Beta QR each time. For more details, follow the Connect Devtool Mini App Center guide.
Manually Config WebApp Links (For Web App)
When you want to test any URLs of a Webapp but do not want to deploy them on the MoMo App Platform, you can input the Webapp URLs into the Devtool to open the test Mini App. For more details, follow the Webapp Config section in the Mini App Web document.
ROLLOUT TO PRODUCTION
1. Create Rollout Request
Before sending your Mini App to MoMo Reviewer, you must follow the Design Guideline, Branding Guidelines, and Product Review Checklist.
Then, you can create the first rollout version by following these guidelines accordingly: Mini App Info and Mini App Version section (for React Native app) or WebView App Links section (for Web app) in the Rollout Mini App document.
2. Follow Rollout Request
MoMo Reviewers will process your Rollout Request in 02-05 working days. You can check the Rollout Request Status in the Rollout Request List on the Mini App Center.
If the request is Rejected, please check the feedback from MoMo, fix the issues, and create a new Rollout Request.
APP LAUNCHING
Now that your Mini App has been launched on MoMo App. You can the Mini App's follow activity on Mini App Center.
UPDATE MINI APP
Update Mini App Information:
You can update the Name, Service Icon, Short Description, CS Email, or CS Phone number by following the Change Mini App Info guide in the Rollout Mini App document.
Update Mini App Versions:
You can update Android & iOS versions, new features, or bug fixes of the Mini App by following the Rollout A New Versions guide in the Rollout Mini App document.