Imagine a shopper opening a boutique’s new collection from a social post. They choose a jacket, check the size guide and head to checkout. Then the store asks them to verify their mobile number.
They switch to their messages, wait for a code and return to find that the checkout has reset. The jacket is still available, but their size selection and delivery details have disappeared.
For fashion and lifestyle retailers, this is a practical design problem: how do you confirm a customer’s number without making them rebuild the purchase? The answer starts with deciding why verification is necessary, then treating the interruption and return as part of the shopping experience.
Give Verification a Specific Job
An OTP, or one-time password, is a temporary code entered to complete a verification step. In a mobile-number check, it provides evidence that the person can access messages sent to that number at that moment.
Before adding this step, write down its purpose. “Confirm the contact number for this delivery” is a clearer requirement than “make checkout secure.”
That distinction should shape where the check appears. If the number is needed for delivery coordination, consider verifying it when the customer confirms their contact details. Requiring the same check before they can browse colours or consult a size guide needs a separate justification.
Keep account creation distinct, too. A customer who needs to confirm a delivery number should understand whether they are also creating an account. Avoid bundling verification, membership registration and promotional subscriptions into one ambiguous “Continue” button.
For a boutique, a useful proposed sequence is:
Choose item and size → enter delivery details → confirm mobile number → review order → pay.
The exact placement can vary. The important requirement is that each step has a clear purpose and preserves the work already completed.
Design the Return From the Messages App
The verification screen should help shoppers answer three questions immediately: where did the code go, what should they do next, and what happens to their order while they wait?
Use plain wording such as “Enter the code sent to your mobile number ending in …” and provide an obvious way to correct the number.
Keep the selected item, size, colour and entered checkout details when the shopper switches apps or requests another code. On return, restore the verification step rather than sending them back to the collection page.
However, preserving a basket does not necessarily mean reserving its contents. During a limited collection release, distinguish those states explicitly. If stock is only secured after payment, do not imply that waiting for verification holds the item. If the store offers a reservation, explain when it ends.
This also affects error handling. If a size becomes unavailable during verification, retain the remaining details and identify the affected item. Making the shopper restart conceals the actual problem.
Make a Missing Code Recoverable
A blank code field and a resend button are not a complete recovery experience. The shopper might have mistyped their number, received a delayed message or entered a code that has expired.
Give each situation an appropriate next action:
| Situation | Helpful response |
| Incorrect mobile number | Allow correction while retaining the basket and delivery details. |
| Message has not arrived | Show when another request becomes available. |
| Code has expired | Explain the expiry and offer a replacement. |
| Code does not match | Allow correction within the attempt limit. |
| Verification remains unavailable | Preserve progress and provide a support route. |
When a replacement invalidates the earlier code, say “Use the most recent code.” Otherwise, a delayed first message can appear to contain the right answer while the checkout rejects it.
For a Saudi-facing store evaluating SMS delivery, Tawked
is a Saudi-focused option that describes sending verification codes to customers in Saudi Arabia. Assess that fit through the actual checkout: test number entry, message wording and recovery when delivery is delayed. Choosing a provider does not resolve those interface decisions.
Do not let support become an informal bypass. Staff can help explain the process, but access to an existing account needs a defined recovery procedure. OWASP cautions that recovery mechanisms must not create a way for attackers to bypass authentication. See its account recovery guidance.
Keep the Verification Message Focused
A verification message serves an action the shopper has just requested. A marketing message invites another action, such as viewing a collection or using a discount.
Keep those purposes separate. The code message should identify the store, explain what the code is for and advise against sharing it. Promotional copy introduces another decision when the customer is trying to finish the current one.
Match the wording to the action. A delivery-number check should not unexpectedly arrive as “Your account login code.” Similarly, a store’s own verification message should not imply that it authorizes a bank payment.
For a bilingual storefront, test the Arabic and English experiences separately. Check the direction and readability of the phone number, code field and error messages. Let shoppers paste a complete code instead of requiring them to move manually between separate boxes.
Put Limits Behind the Resend Button
A smooth interface still needs controls. OWASP recommends short code lifetimes, single use, strict attempt limits and invalidation after successful verification. It also advises against logging OTP values. These controls belong in the verification system, beyond the visible countdown or button state. See OWASP’s OTP handling guidance.
Apply limits to message requests as well as incorrect entries. Review repeated requests targeting the same number and unusual bursts across many numbers. A resend button should provide a recovery path without permitting unlimited message generation.
Keep the security claim proportionate. SMS codes are susceptible to phishing and SIM swapping; they are not complete account protection. Sensitive account actions need an authentication design appropriate to their risk. OWASP explains these limitations in its SMS authentication guidance.
Measure Whether Shoppers Resume Their Purchase
Track the journey beyond the message request. Useful events include verification started, delivery status received where available, code accepted, checkout resumed and order completed.
These events answer different questions. A provider accepting a message request does not establish that the shopper received or entered the code. Successful verification does not establish that the basket survived the interruption.
Review repeated sends alongside completion. Frequent replacement requests suggest a different investigation from successful verification followed by exits at an empty checkout.
Before the next collection launch, run a purchase on a real phone: enter an incorrect number, correct it, switch apps, request a replacement and return. The acceptance criterion is concrete: a legitimate shopper can recover from the interruption, understand any change in stock availability and continue without rebuilding the order.