An order confirmation screen gives users clear feedback that their purchase was successful and guides them to the next step. Without this screen, users may be unsure whether their payment went through
Why an Order Confirmation Screen Matters
After a user taps Pay, they expect immediate feedback. If nothing happens, users may wonder:
Did my order go through?
Was my payment successful?
What should I do next?
An order confirmation screen solves this by:
Confirming the purchase was successful
Reassuring the user
Providing clear next actions (such as tracking the order or placing another one)
Overview of the Flow
User completes checkout
User taps Pay
App navigates to an Order Confirmation screen
User sees confirmation messaging and next-step options
Step 1: Create the Order Confirmation Screen
In the Adalo Editor, create a new screen
Name the screen something clear, such as:
Order Confirmation
Order Placed
Order Success
This screen does not need to be complex. Simplicity improves clarity and performance.
Step 2: Add Confirmation Content
Add a Visual Element (Optional but Recommended)
Add an Image component to the screen
Use:
A static image, or
A lightweight GIF with subtle animation
Best practices
Avoid large or complex Lottie animations
If using animation, ensure the file size is small and optimized
The visual should reinforce success (for example: checkmark, confetti, or celebration)
Add Confirmation Text
Include clear, reassuring messaging such as:
“Order Confirmed”
“Thank you for your purchase”
You may optionally personalize the message using Magic Text, such as:
The user’s name
The order number
Example:
“Thanks, {Logged in User → First Name}! Your order has been placed.”
Step 3: Add Action Buttons
Add two buttons to guide the user’s next steps.
Button 1: Order More
Purpose
Allows the user to continue shopping.
Button Action
Navigate → Go to Screen
Destination: Menu or Product List screen
Button 2: Track Order
Purpose
Allows the user to view the status of their order.
Button Action
Navigate → Go to Screen
Destination: Order Tracking screen
Note: The tracking screen can be built later. You can still link to it now or add the action once the screen exists. See this tutorial for how to build a tracking screen.
Step 4: Link the Pay Button to the Confirmation Screen
Select the Pay button on your checkout screen
Add the appropriate payment or order-creation actions
As the final action, add:
Navigate → Go to Screen
Destination: Order Confirmation screen
This ensures the user always sees confirmation after completing payment.
Example: User Experience Comparison
Without an Order Confirmation Screen
User taps Pay
Nothing happens or the screen stays the same
User is unsure if the order was successful
With an Order Confirmation Screen
User taps Pay
Confirmation screen appears immediately
User sees success messaging and clear next steps
This small change significantly improves usability and trust.
Best Practices
Keep the confirmation screen simple and fast-loading
Avoid heavy animations or large media files
Always provide at least one clear next action
Use friendly, reassuring language
Treat this screen as part of your conversion experience
Summary
An order confirmation screen is a small but critical part of any checkout flow. In Adalo, creating one is as simple as:
Creating a new screen
Linking the Pay button to it
Adding confirmation messaging and navigation buttons
This simple step can greatly improve clarity, confidence, and overall user experience in your app.
