O formulário de pagamento costuma ser a última etapa antes da conclusão de uma compra. Para maximizar as conversões, seu formulário de pagamento precisa ser fácil de usar e seguro.
Garantir que os usuários saibam o que preencher
Mantenha sua forma de pagamento o mais simples possível mostrando apenas os campos obrigatórios.
Indique o valor do pagamento. O botão Enviar é ideal para isso.
<button>Pay $300.00</button>
Use textos autoexplicativos para seus elementos <label>.
Por exemplo, use "Código de segurança",
em vez de um acrônimo, como "CVV", que só é usado por algumas marcas.
Ajude os usuários a inserir os detalhes de pagamento
Para maximizar as conversões, garanta que os usuários possam preencher o formulário de pagamento o mais rápido possível.
Use inputmode="numeric" nos campos de número do cartão e código de segurança
para mostrar um teclado na tela otimizado para a inserção de números.
Adicione valores de autocomplete adequados aos controles do formulário de pagamento para garantir que os navegadores ofereçam preenchimento automático.
Use autocomplete="cc-name" como o nome.
autocomplete="cc-number" para o número do cartão e autocomplete="cc-exp" para a data de validade.
Garantir que os usuários insiram os dados no formato correto
Use o atributo required para cada <input> para que os usuários preencham o formulário completo.
Os códigos de segurança do cartão de pagamento podem ter três ou quatro dígitos.
Use minlength="3" e maxlength="4" para permitir apenas três e quatro dígitos.
Garanta que os usuários insiram apenas números do cartão e do código de segurança.
Use pattern="[0-9 ]+" para permitir que os usuários incluam espaços ao inserir um número de cartão.
já que é assim que os números aparecem nos cartões físicos.