The code entry screen: the field, a countdown, attempts left and clear messages

The short answer: the code screen is where verification either works or loses the customer. It needs four things: a field that is easy to fill in on a phone, the number the code went to (masked), an honest countdown and messages that say exactly what happened. The API gives you the data for all of this in every response.

The code field

1	One numeric field. With inputmode="numeric" the phone opens the number keypad, and with autocomplete="one-time-code" many phones suggest the code that just arrived by SMS.

2	The right size. If you asked for length 6, the field takes 6 digits. If you prefer six separate boxes, let people paste the whole code at once.

3	Allow pasting and do not worry about spaces. Spaces do not count when checking: “482 913” and “482913” are the same code.

4	It can check on its own when the last digit goes in, as long as the customer can see what is happening.

What to show around the field

Element	Where it comes from	Example
Where the code went	The to field, already masked	“We sent a code by SMS to the number ending in 567.”
Fixing the number	Your form	“Not your number? Fix it.”
Time left	expires_at minus the current time	“The code is valid for another 4:12.”
Attempts left	attempts_left	“Wrong code. 2 attempts left.”
Requesting another code	The wait between resends you set	“You can request another in 45 seconds.”

A message for each situation

Situation	What the API says	What the customer reads
Right	valid: true	“Number confirmed.” and carry on
Wrong, attempts remain	valid: false, pending	“Wrong code. 2 attempts left.”
Expired	valid: false, expired	“The code has expired. Request a new one.”
No attempts left	valid: false, failed	“No attempts left. Request a new code.”
Old code	valid: false, cancelled	“Use the code from the latest SMS.”
Too many requests	429	“Too many codes requested. Please try again shortly.”

Do not hide the resend button for ever, and do not show it straight away. A customer who sees no way out gives up; one who presses “Resend” five times gets five SMS and only the last works. Show it with a countdown and always say “use the code from the latest SMS”.

Remind the customer not to reply to the SMS. Named senders cannot receive replies, and some people try. One line on screen, “Type the code you received by SMS here”, sorts it out. All the statuses are in verification code statuses.

Want to build a clear verification screen with our API? See Verification SMS.

See Verification SMS

Categories

Categories