Codelab de práticas recomendadas para formulários de pagamento

Sam Dutton

Para continuar este codelab, abra este Glitch em uma segunda guia.

Este codelab mostra como criar uma forma de pagamento segura, acessível e fácil de usar.

Atenção : este artigo aborda as práticas recomendadas de front-end para formulários de pagamento. Ele não explica como implementar transações no seu site. Para saber mais sobre como adicionar a funcionalidade de pagamento ao seu site, consulte Pagamentos on-line.

Etapa 1: use HTML conforme desejado

Use elementos criados para o trabalho:

• <form>
• <section>
• <label>
• <input>, <select>, <textarea>
• <button>

Esses elementos ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e agregam significado à marcação.

• Clique em Remixar para editar para tornar o projeto editável.

Observe o HTML do seu formulário em index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Há <input> elementos para o número do cartão, nome no cartão, data de validade e código de segurança. Elas são todas encapsuladas em elementos <section>, e cada um tem um rótulo. O botão Concluir pagamento é um <button> HTML. Mais adiante neste codelab, você vai aprender sobre os recursos do navegador que podem ser acessados usando esses elementos.

Observação : os elementos <input> não têm tags de fechamento. Isso ocorre porque eles são elementos void, ou seja, não têm conteúdo. Um caractere "/" no final de um elemento vazio é opcional: <input> ou <input /> é aceitável.

Clique em Ver aplicativo para visualizar o formulário de pagamento.

• O formulário funciona bem como está?
• Há algo que você mudaria para que funcione melhor?
• Que tal um dispositivo móvel?

Clique em View Source para retornar ao seu código-fonte.

Etapa 2: projetar para dispositivos móveis e computadores

O HTML adicionado é válido, mas o estilo padrão do navegador dificulta o uso do formulário, especialmente em dispositivos móveis. Também não fica muito boa.

Você precisa garantir que seus formulários funcionem bem em vários dispositivos ajustando o padding, as margens e os tamanhos de fonte.

Copie todo o CSS abaixo e cole-o em seu próprio arquivo css/main.css.

É muito CSS! As principais coisas a serem observadas são as mudanças nos tamanhos:

• padding e margin são adicionados às entradas.
• font-size e outros valores são diferentes para os diferentes tamanhos da janela de visualização.

Quando estiver tudo pronto, clique em View App para ver o formulário estilizado. Você também vai notar que as bordas foram ajustadas e que display: block; é usado para rótulos, de modo que eles fiquem em uma linha por conta própria, e as entradas podem ser de largura total. As práticas recomendadas do formulário de login explicam os benefícios dessa abordagem em mais detalhes.

O seletor :invalid é usado para indicar quando uma entrada tem um valor inválido. Você vai usar isso posteriormente no codelab.

O CSS prioriza dispositivos móveis:

• O CSS padrão é destinado a janelas de visualização com menos de 400px de largura.
• As consultas de mídia são usadas para substituir o padrão de janelas de visualização com pelo menos 400px de largura e, novamente, para janelas de visualização com pelo menos 500px de largura. Isso funciona bem para celulares menores, dispositivos móveis com telas maiores e no computador.

Ao criar apps para a Web, é necessário fazer testes em diferentes dispositivos e tamanhos de janela de visualização. Isso é especialmente verdadeiro para os formulários, porque uma pequena falha pode torná-los inutilizáveis. Sempre ajuste os pontos de interrupção CSS para garantir que eles funcionem bem com o conteúdo e os dispositivos de destino.

• Todo o formulário está visível?
• As entradas do formulário são grandes o suficiente?
• Todo o texto está legível?
• Você notou alguma diferença entre usar um dispositivo móvel real e visualizar o formulário no Modo dispositivo no Chrome DevTools?
• Você precisou ajustar os pontos de interrupção?

Há várias maneiras de testar seu formulário em diferentes dispositivos:

• Use o Device Mode do Chrome DevTools para simular dispositivos móveis.
• Envie o URL do computador para o smartphone.
• Use um serviço como o BrowserStack para testar em uma variedade de dispositivos e navegadores.

Etapa 3: adicionar atributos para ajudar os usuários a inserir dados

Ative o navegador para armazenar e preencher valores de entrada automaticamente e fornecer acesso a recursos seguros de pagamento e validação integrados.

Adicione atributos ao formulário no arquivo index.html para que ele fique assim:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Confira o app novamente e toque ou clique no campo Número do cartão. Dependendo do dispositivo e da plataforma, você verá um seletor mostrando as formas de pagamento armazenadas no navegador, como o mostrado abaixo.

Seletor de pagamento e preenchimento automático do navegador integrados

.

Depois que você seleciona uma forma de pagamento e digita o código de segurança, o navegador preenche automaticamente o formulário usando os valores autocomplete do cartão de pagamento adicionados:

• cc-number
• cc-name
• cc-exp
• cc-csc

Muitos navegadores também verificam e confirmam a validade de números de cartão de crédito e códigos de segurança.

Observação : não se preocupe. Seu navegador pode preencher automaticamente o formulário com dados armazenados do cartão de pagamento, mas nenhum pagamento pode ser feito e nenhum dado é transferido ou salvo.

Em um dispositivo móvel, você também notará que terá um teclado numérico assim que tocar no campo Número do cartão. Isso ocorreu porque você usou inputmode="numeric". Para campos numéricos, isso facilita a inserção de números e a impossibilidade de inserir caracteres não numéricos, além de incentivar os usuários a se lembrarem o tipo de dados que estão inserindo.

É extremamente importante adicionar corretamente todos os valores de autocomplete disponíveis aos formulários de pagamento. É bastante comum que os sites percam o valor autocomplete da data de validade do cartão e de outros campos. Se um único valor de autofill estiver errado ou ausente, os usuários precisarão recuperar o cartão real para inserir manualmente os dados do cartão, e você pode perder uma venda. Se o preenchimento automático em formulários de pagamento não funcionar corretamente, os usuários também poderão manter um registro dos detalhes do cartão de pagamento no smartphone ou computador, o que é altamente inseguro.

Observação : pesquisas mostram que é melhor usar elementos selecionados separados para mês e ano em vez de uma única entrada. Você decide o que achar melhor. Para testar, remixe e edite o HTML da nossa demonstração do formulário de pagamento completa, que inclui código para os dois tipos de campo de data de validade.

Tente enviar o formulário de pagamento com um campo vazio. O navegador solicita a conclusão dos dados ausentes. Agora adicione uma letra ao valor no campo Número do cartão e tente enviar o formulário. O navegador avisará que o valor é inválido. Isso acontece porque você usou o atributo pattern para especificar valores válidos para um campo. O mesmo funciona para maxlength e outras restrições de validação. O JavaScript não é necessário.

Seu formulário de pagamento deve ficar assim:

• Tente remover os valores autocomplete e preencher o formulário de pagamento. Que dificuldades você encontra?
• Teste formas de pagamento em lojas on-line. Pense no que funciona bem e no que deu errado. Há algum problema comum ou prática recomendada que você deve seguir?

Etapa 4: desative o botão de pagamento depois que o formulário for enviado

Considere desativar um botão de envio depois que o usuário tocar ou clicar nele, especialmente quando o usuário estiver fazendo o pagamento. Muitos usuários tocam ou clicam nos botões repetidamente, mesmo que eles estejam funcionando bem. Isso pode causar problemas no processamento de pagamentos e no carregamento do servidor.

Adicione o seguinte JavaScript ao seu arquivo js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Tente enviar o formulário de pagamento e veja o que acontece.

Atenção : alguns sites deixam os botões de envio de formulário desativados até que o usuário preencha corretamente todos os campos do formulário. Recomendamos não fazer isso, já que os usuários podem deixar acidentalmente um valor obrigatório de fora ou usar um valor inválido e depois tocar ou clicar no botão de envio desativado e presumir que o site não funciona. Mesmo que os valores do formulário sejam marcados como inválidos ou ausentes, talvez o usuário não veja os avisos (principalmente em formulários mais longos e em dispositivos móveis). É melhor validar in-line enquanto o usuário insere dados e quando tenta enviar o formulário.

Confira como seu código vai ficar nesse ponto, com a adição de alguns comentários e uma função validate():

• Você perceberá que o JavaScript inclui código comentado para validação de dados. Esse código usa a API Constraint Validation (que tem ampla compatibilidade) para adicionar validação personalizada, acessando a interface integrada do navegador para definir o foco e exibir solicitações. Remova a marca de comentário do código e teste-o. Você precisará definir valores apropriados para someregex e message e um valor para someField.

• Quais dados de análise e monitoramento de usuários reais você monitoraria para identificar formas de melhorar seus formulários?

Seu formulário de pagamento completo deve ficar assim:

• Teste o formulário em diferentes dispositivos. Quais dispositivos e navegadores você está segmentando? Como melhorar o formulário?

Mais informações

Considere os seguintes recursos cruciais de formulário que não são abordados neste codelab:

• Link para os documentos dos Termos de Serviço e da Política de Privacidade: deixe claro para os usuários como você protege os dados deles.

• Estilo e marca: verifique se eles combinam com o restante do seu site. Ao inserir nomes e endereços e fazer o pagamento, os usuários precisam se sentir à vontade, confiantes de que ainda estão no lugar certo.

• Monitoramento de análises e usuários reais: permite testar e monitorar o desempenho e a usabilidade do design do formulário para usuários reais.