Na primeira parte deste artigo, apontamos as principais formas de validação e a importância de cada uma delas ao citar seus prós e contras. Nesta segunda parte, vamos abordar a validação dos dados independentemente do método (server side ou cliente side). Ou seja, as informações a seguir atendem esses dois modelos.

O que validar?

Campos como número do cartão de crédito, CVV e data de expiração são importantíssimos, seguidos de CPF, endereços e telefones. A seguir, mostramos a melhor forma de realizar essas verificações.

Número do cartão: As instituições financeiras possuem um número de identificação, mais conhecido como BIN (Bank Identification Number). Em qualquer cartão de crédito, os seis primeiros dígitos são a identificação do BIN. Utilize o algoritmo de Luhn para fazer a validação dos dígitos restantes.

Eventualmente, novos BINs são disponibilizados. É importante manter-se atualizado para que futuras validações não venham a falhar.

Código de segurança (CVV): Limite a quantidade de caracteres para evitar erros de digitação. As bandeiras citadas utilizam apenas três dígitos que estão normalmente localizados na parte de trás do cartão. No entanto, lembre-se de que algumas bandeiras podem conter o número de dígitos CVV maior que três caracteres.

Veja na imagem abaixo o reconhecimento da bandeira após a validação do cartão de crédito. Observe que o campo “número do cartão” está mascarado e o CVV limitado a três caracteres.

Data de expiração do cartão: Utilize o dropdown menu, pois ele impede que datas inválidas sejam inseridas. Use mês + ano = mês + ano atual.

Empresas adquirentes já fazem a validação em seu webservice (server side), garantindo assim a integridade dos dados do cartão de crédito dos seus clientes.

Campos obrigatórios: Os campos obrigatórios devem ser claramente identificados a fim de informar os usuários sobre as informações que devem ser preenchidas.

Uma forma comum de marcar campos obrigatórios é com sinal de asterisco (*). No entanto, usuários iniciantes podem não entender o que significa o asterisco. Por essa razão, uma boa prática é colocar uma nota no canto superior do formulário, indicando que todos os campos marcados com asterisco são de preenchimento obrigatório.

Validação de CEP e autopreenchimento: Boa parte dos browsers possui a opção de preenchimento automático de informações em apenas um clique, quando o usuário permite guardar tais informações. Mas quando se trata de preenchimento automático do endereço de entrega, por exemplo, é necessário que o usuário insira o número do CEP. Uma boa dica é utilizar a API de consultas dos Correios.

Alguns usuários podem não lembrar ou saber o número do CEP. Para agilizar e facilitar o preenchimento, é importante sempre exibir uma opção de ajuda (Não sabe seu CEP?), na qual o usuário possa fazer uma busca utilizando o nome da rua e do Estado.

Formatação automática (máscaras): Incluir máscaras nos campos para orientar o limite de caracteres ou formato também ajuda a mitigar o preenchimento de informações erradas. Exemplos: marcação de CPF, número de telefone com DDD e inclusão do 9º digito (em caso de aparelhos móveis), de data de nascimento DD/MM/AAAA, entre outros.

Conclusão

A validação de campos é um recurso de extrema importância e deve estar sempre presente em um formulário de checkout. O intuito é garantir que a captura dos dados seja feita de forma correta e enviada ao servidor sem gerar nenhum tipo de transtorno ao comprador. Vale lembrar que o processo de finalização de compra deve oferecer uma experiência prazerosa ao comprador, evitando que ele fique preenchendo formulários extensos e cansativos.