A tela do código: o campo, a contagem decrescente, as tentativas que restam e mensagens claras

A resposta curta: a tela do código é onde a verificação corre bem ou se perde o cliente. Precisa de quatro coisas: um campo fácil de preencher no celular, o número para onde o código foi (tapado), uma contagem decrescente honesta e mensagens que digam exatamente o que aconteceu. A API dá-lhe os dados para tudo isto em cada resposta.

O campo do código

1	Um só campo, numérico. Com inputmode="numeric" o celular abre o teclado de algarismos, e com autocomplete="one-time-code" muitos celulares sugerem o código que acabou de chegar por SMS.

2	Do tamanho certo. Se pediu length 6, o campo aceita 6 algarismos. Se preferir seis caixas separadas, deixe colar o código inteiro de uma vez.

3	Deixe colar e não se preocupe com espaços. Na conferência os espaços não contam: «482 913» e «482913» são o mesmo código.

4	Pode conferir sozinho quando o último algarismo entra, desde que o cliente veja o que está acontecendo.

O que mostrar à volta do campo

Elemento	De onde vem	Exemplo
Para onde foi o código	O campo to, já tapado	«Enviámos um código por SMS para o número terminado em 567.»
Corrigir o número	O seu formulário	«Não é o seu número? Corrija-o.»
Tempo que falta	expires_at menos a hora atual	«O código vale mais 4:12.»
Tentativas que restam	attempts_left	«Código errado. Restam 2 tentativas.»
Pedir outro código	A espera entre reenvios que definiu	«Pode pedir outro daqui a 45 segundos.»

Uma mensagem para cada situação

Situação	O que a API diz	O que o cliente lê
Certo	valid: true	«Número confirmado.» e segue em frente
Errado, ainda há tentativas	valid: false, pending	«Código errado. Restam 2 tentativas.»
Expirado	valid: false, expired	«O código expirou. Peça um novo.»
Sem tentativas	valid: false, failed	«Esgotou as tentativas. Peça um código novo.»
Código antigo	valid: false, cancelled	«Use o código do SMS mais recente.»
Excessivos pedidos	429	«Pediu excessivos códigos. Tente daqui a pouco.»

Não esconda o botão de reenviar para sempre, nem o mostre logo. Um cliente que não vê saída abandona; um que clica em «Reenviar» cinco vezes recebe cinco SMS e só o último vale. Mostre-o com contagem e diga sempre «use o código do SMS mais recente».

Lembre o cliente de que não responde ao SMS. Os remetentes com nome não recebem respostas, e há quem tente. Uma linha na tela, «Escreva aqui o código que recebeu por SMS», resolve. Os estados todos estão em estados de um código de verificação.

Quer montar uma tela de verificação claro com a nossa API? Veja o SMS de Verificação.

Ver o SMS de Verificação

VEJA TAMBÉM

Estados de um código de verificação: pending, verified, expired, failed e cancelled

Reenviar, cancelar e substituir um código de verificação: o que acontece ao anterior

Confirmar o número de celular no registro com um código por SMS, passo a passo

Ler as respostas da API de verificação: valid false, 409, 422 e 429

O código de verificação por SMS não chegou: o que conferir, do seu lado e do lado do cliente

Escrever o SMS de verificação: o lugar do código, o seu Sender ID e caber numa só parte

PRODUTO RECOMENDADO

Hospedagem de sites com cPanel

Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde R$ 36,30/mês (plano de 3 anos, com cupom)

Ver planos

Categorias

Categorias