Visible title

“Welcome to Iretipay! Please enter your phone number to continue.”

Objective

Authenticate / register the user using their phone number to start the registration or login process.

1) Context & Scope

• Platform: Mobile application (Android/iOS).
• Default country: Côte d’Ivoire (country code +225).
• Journey stage: First app launch / Reconnection.

Visible UI Components

Country selector + dialing code

• Flag:
• Pre-filled dialing code: +225
• Change option: Dropdown list of countries/dialing codes (optional at launch).

Phone number input field

• Placeholder: xx xx xx xx (Ivory Coast 10‑digit format).
• On-screen numeric keypad (0–9) with delete button.

Primary button

• Label: “Continue”
• State: Disabled until the phone number is valid.

Functional Rules & Validations

Phone Number Format & Validation (Côte d’Ivoire)

• Length: 10 digits (excluding country code).
• Allowed characters: Numbers only (0–9).
• Masking / spacing: Displayed in grouped format (XX XX XX XX), stored without spaces.

Valid examples:
0701020304, 0102030405

Invalid examples:
Too short/too long, letters/symbols, 0000000000.

“Continue” Button States

• Disabled if:
  • Field is empty
  • Length ≠ 10
  • Non-numeric characters
• Enabled if:
  • Number is valid
  • Country/dialing code is defined

Errors & Messages

• Invalid format:
  “Invalid number. Please enter a 10-digit Ivorian phone number.”
• Number already used (existing account):
  “This number is already associated with an account. Continue to log in.”
• Service unavailable:
  “Service temporarily unavailable. Please try again later.”
• Too many attempts (rate limiting):
  “Too many attempts. Please try again in 10 minutes.”

Localization & Languages

• Default language: French (Côte d’Ivoire).
• Translatable text: Titles, help messages, errors, button labels.
• Handling of different formats if the user changes country (e.g., +233, +234…).