O formulário de pagamento geralmente é a última etapa antes de concluir uma compra. Para maximizar as conversões, verifique se o formulário de pagamento é fácil de usar e seguro.
Garantir que os usuários saibam o que preencher
Mantenha a 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 termos autoexplicativos para os elementos <label>.
Por exemplo, use "Código de segurança" em vez de um acrônimo "CVV", usado apenas por algumas marcas.
Ajudar os usuários a inserir os detalhes da forma de pagamento
Para maximizar as conversões, garanta que os usuários possam preencher seu 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 inserir números.
Adicione os valores de autocomplete adequados aos controles do formulário de pagamento para garantir que os navegadores ofereçam o preenchimento automático.
Use autocomplete="cc-name" para 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 garantir 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 para o cartão e o 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 são exibidos nos cartões físicos.