In this step example, your App asks the Merchant to enter their credentials (Email and Password). We will validate two fields: email and password.The Validation Logic#
1.
Fields Validation:
Ensure the merchant has entered a valid email and password.
2.
Logic Constraint:
If the merchant enters an invalid email or password, prompt them to re-enter the incorrect field.
Implementation Example#
In the following sections we provided a step-by-step guide to add an onboarding step to get the Merchant credentials upon installation.Prerequisites#
Before you begin, make sure you have:1
Create a Salla Partner Account
Partners Portal#
In the Partners Portal, open the App Details page, scroll down to the App Onboarding section, and click Create Onboarding Step.Then fill in the details. In this example, we will add a welcome step requesting the merchant’s email address and password.After adding the step, click the three dots next to the step and select Edit Form Settings.Then select the required fields as shown below.The unique id for each field is critical and will be used to show error messages or get the form data
The onboarding step checks user input in real time. If something is invalid, an error message appears directly under the field with clear instructions on how to fix it.Validation should run quickly to keep the process smooth and prevent delays or long loading states.
Edit Function Code#
The function code below allows you to validate the email and password and return appropriate error or success messages.Technical Breakdown of Personalization Fields#
| Field Key | UX Purpose | Validation Focus |
|---|
| Email | Serves as the unique user identifier for account creation, login, and personalized content retrieval (e.g., saved dashboards, templates, preferences). | Format validation (valid email structure), presence check (not empty), and uniqueness check (not already registered). |
| Password | Secures user access to personalized data and settings within the app. | Strength validation (minimum length, character requirements), presence check, and secure storage compliance (hashed & encrypted). |
UX Enhancements#
Contextual Feedback: By using .setFields(), the error message appears directly under the relevant field, making it clear and actionable for the merchant.
Immediate Value: The success() block can trigger a personalized dashboard experience — creating an “Aha!” moment that demonstrates the value of completing onboarding.
Merchant Preview#
To view the onboarding steps from the Merchant side, install the app on a demo store linked to your partner account.On the App Details page, scroll down to the App Testing section and click Install App next to the demo store.You will then be redirected to the onboarding page.Success Response Example#
After the merchant enter the email and password correctly, a success message will appear and the App will be installed.
Error Response Example#
In the case where the Merchants leaves the Email field blank an error message (Which we set in the function code) will appear on the upper right corner. 
