As formas de pagamento são a parte mais importante do processo de finalização da compra. Um design ruim do formulário de pagamento é uma causa comum de abandono do carrinho de compras.
Crie um formulário que facilite ao máximo a inserção de detalhes de pagamento em computadores e dispositivos móveis. Verifique se o formulário aproveita ao máximo os recursos integrados do navegador para preenchimento automático, validação e restrições de entrada de dados.
Como fazer a implementação
Confira abaixo as diretrizes mais importantes para criar formulários de pagamento de sucesso.
Use um HTML significativo e válido
Aproveite ao máximo os elementos e atributos criados para criar formulários:
<form>,<input>,<label>e<button>type,autocompleteeinputmode
Eles ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à marcação.
Use o elemento <label> para rotular campos de formulário para entrada de dados
Para rotular um <input>, <select> ou <textarea>, use um <label>. Associe um rótulo a uma entrada atribuindo ao atributo for do rótulo o mesmo valor do id da entrada.
Aproveite ao máximo os atributos HTML
Facilite a inserção de dados pelos usuários usando o atributo <type> do elemento <input> adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação básica integrada pelo navegador.
Sempre use type="email" para endereços de e-mail e type="tel" para números de telefone.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Cada elemento <input>, <select> e <textarea> PRECISA ter um atributo autocomplete apropriado para melhorar a acessibilidade e ajudar os usuários a evitar a reinserção de dados.
Criar botões úteis
Use <button> para botões. Você também pode usar <input type="submit">, mas não use um div ou outro elemento aleatório como botão. Os elementos de botão oferecem comportamento acessível, funcionalidade integrada de envio de formulários e podem ser estilizados com facilidade.
Dê a cada botão de envio de formulário um valor que descreva o que ele faz. Para cada etapa da finalização da compra, use uma call-to-action descritiva que mostre o progresso e deixe claro qual é o próximo passo. Por exemplo, rotule o botão de envio no formulário de endereço de entrega como Ir para o pagamento em vez de Continuar ou Salvar.
Use uma única entrada de nome sempre que possível
Permita que os usuários insiram o nome usando uma única entrada, a menos que você tenha um bom motivo para armazenar separadamente nomes, sobrenomes, títulos ou outras partes do nome. Usar uma única entrada de nome torna os formulários menos complexos, permite recortar e colar e simplifica o preenchimento automático.
Permitir nomes internacionais. Para validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. A opção "Somente latim" exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Em vez disso, permita a correspondência de letras Unicode e garanta que seu back-end seja compatível com Unicode de forma segura como entrada e saída. O Unicode em expressões regulares é bem aceito pelos navegadores mais recentes.
Permitir vários formatos de endereço
Ao adicionar campos de endereço em um formulário de pagamento, considere a variedade de formatos de endereço, mesmo em um único país. Não faça suposições sobre endereços "normais".
Se possível, de acordo com seus requisitos de dados, use um único elemento <textarea> para o endereço. Essa é a opção mais flexível para uma variedade de formatos de endereço locais e internacionais.
Usar o preenchimento automático para o endereço de faturamento
Por padrão, o endereço de faturamento é o mesmo que o endereço de entrega. Reduza a poluição visual fornecendo um link para editar o endereço de faturamento (ou use elementos de resumo e detalhes) em vez de exibir o endereço de faturamento em um formulário.
Use valores de preenchimento automático adequados para o endereço de faturamento, assim como você faz para o endereço de entrega, para que o usuário não precise inserir dados mais de uma vez. Adicione um prefixo aos atributos de preenchimento automático se você tiver valores diferentes para entradas com o mesmo nome em seções diferentes. Exemplo:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Mostrar progresso da finalização da compra
Para cada etapa do pagamento, use títulos de página e valores de botão descritivos que deixem claro o que precisa ser feito agora e qual é a próxima etapa da finalização da compra.
Use o atributo enterkeyhint nas entradas de formulário para definir o rótulo da tecla Enter do teclado de dispositivos móveis. Por exemplo, use enterkeyhint="previous" e enterkeyhint="next" em um formulário de várias páginas, enterkeyhint="done" para a entrada final no formulário e enterkeyhint="search" para uma entrada de pesquisa.
Ajudar os usuários a evitar a reinserção de dados de pagamento
Adicione os valores de autocomplete adequados nos formulários de cartão de pagamento. Sem o preenchimento automático, os usuários podem manter um registro físico dos detalhes do cartão de pagamento ou armazená-los de forma insegura.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Mostrar dicas de formato acima da entrada
Quando um campo tem um formato obrigatório (por exemplo, a data de validade do MM/YY), coloque a dica em um elemento visível acima da entrada e vincule os dois com aria-describedby, como no exemplo de cc-exp acima. As dicas que ficam abaixo de uma entrada são facilmente ocultadas pelo teclado do dispositivo móvel ou pelo popover de preenchimento automático no momento em que o usuário precisa delas.
Não use o atributo placeholder como a única dica de formato e nunca o use em vez de um <label>: o texto de preenchimento é ocultado assim que o usuário começa a digitar, então não é possível verificá-lo durante a edição. Um marcador de posição é uma boa dica extra, além do rótulo e da dica persistente.
Não mascarar o código de segurança
Use type="text" com inputmode="numeric" para o código de segurança do cartão, não type="password". Os usuários não podem verificar se há erros de digitação em um código mascarado de três ou quatro dígitos. Portanto, um dígito digitado incorretamente não é detectado até que o pagamento seja recusado, e a máscara adiciona pouca proteção porque o código é impresso no cartão que o usuário está segurando.
Usar uma única entrada para números de telefone e de cartão de pagamento
Para números de telefone e de cartão de pagamento, use uma única entrada: não divida o número em partes. Isso facilita a inserção de dados pelos usuários, simplifica a validação e permite que os navegadores preencham automaticamente. Faça o mesmo com outros dados numéricos, como PINs e códigos de banco.
Valide com cuidado
É preciso validar a entrada de dados em tempo real e antes do envio do formulário. Uma maneira de fazer isso é adicionar um atributo de padrão a uma entrada de cartão de pagamento. Se o usuário tentar enviar o formulário de pagamento com um valor inválido, o navegador vai mostrar uma mensagem de aviso e focar na entrada.
No entanto, a expressão regular do padrão precisa ser flexível o suficiente para lidar com o intervalo de comprimentos de números de cartão de pagamento: de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Os códigos de segurança do cartão (também conhecidos como CSC, CVC, CVV ou outros nomes) têm 3 ou 4 dígitos.
Permita que os usuários incluam espaços ao inserir um novo número de cartão de pagamento, já que é assim que os números são exibidos nos cartões físicos. Isso é mais amigável para o usuário (você não precisará dizer que ele "fez algo errado"), tem menos probabilidade de interromper o fluxo de conversão e é simples remover espaços em números antes do processamento.
Evitar que os usuários percam campos de dados acidentalmente
Adicione o atributo required aos campos obrigatórios. Os navegadores mais recentes solicitam e definem automaticamente o foco para dados ausentes.
Estratégias de fallback
O preenchimento automático é um aprimoramento progressivo. Em navegadores que não oferecem suporte ao preenchimento automático, os usuários precisam inserir manualmente os detalhes de pagamento. As restrições semânticas de HTML (como type, inputmode, pattern e required) ainda vão funcionar adequadamente para validar a entrada do usuário e fornecer os teclados virtuais corretos.