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

Sam Dutton

Para seguir 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. Ela 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 na Web.

Etapa 1: usar HTML conforme planejado

Use elementos criados para o trabalho:

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

Como você verá, esses elementos ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionar significado a sua marcação.

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

Confira 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 nele, data de validade e código de segurança. Elas são todas encapsulados em elementos <section>, cada um com um rótulo. O botão Concluir pagamento é um botão HTML <button> Mais adiante neste codelab, você aprenderá sobre os recursos do navegador que podem ser acessados usando o esses elementos.

Observação : os elementos <input> não têm tags de fechamento. Isso ocorre porque eles são elementos vazios (vazios): eles não têm conteúdo. Um "/" no final de um elemento vazio é opcional: <input> ou <input /> estão corretos.

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

• O formulário funciona bem o suficiente como está?
• Você mudaria alguma coisa para que ela funcione melhor?
• E no dispositivo móvel?

Clique em Exibir código-fonte para retornar ao código-fonte.

Etapa 2: projetar para dispositivos móveis e computadores

O HTML que você adicionou é válido, mas o estilo padrão do navegador torna o formulário difícil de usar, especialmente em dispositivos móveis. Também não parece muito bom.

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

Copie todo o CSS abaixo e cole-o no 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 dependendo do tamanho da janela de visualização.

Quando estiver tudo pronto, clique em Ver app para conferir o formulário estilizado. Você também notará que as bordas têm foi ajustado, e display: block; é usado para rótulos, então eles vão em uma linha por conta própria; podem ser de largura total. Práticas recomendadas para o formulário de login explica os benefícios dessa abordagem com mais detalhes.

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

O CSS prioriza dispositivos móveis:

• O CSS padrão é para janelas de visualização com menos de 400px de largura.
• As consultas de mídia são usada para substituir o padrão para janelas de visualização com pelo menos 400px de largura e novamente para janelas de visualização com pelo menos 500px de largura. Isso funcionará bem para celulares menores e dispositivos móveis, em telas maiores e em computadores.

Sempre que você criar para a Web, será necessário testar em diferentes dispositivos e tamanhos de janela de visualização. Esse é especialmente para formulários, porque uma pequena falha pode inutilizá-los. Sempre ajuste Pontos de interrupção CSS para garantir que eles funcionem bem com seu conteúdo e seus dispositivos de destino.

• O formulário inteiro está visível?
• As entradas de 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 Device Mode no Chrome DevTools?
• Você precisou ajustar os pontos de interrupção?

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

• Usar o Modo dispositivo do Chrome DevTools para simular dispositivos móveis.
• Envie o URL do computador para o smartphone.
• Usar um serviço como o BrowserStack para testar em um intervalo de dispositivos e navegadores.

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

Permitir que o navegador armazene e preencha valores de entrada automaticamente, além de conceder acesso a controles pagamento e validação.

Adicione atributos ao formulário no seu 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>

Visualize seu app novamente e toque ou clique no campo Número do cartão. Dependendo do dispositivo e plataforma, poderá aparecer 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ê selecionar uma forma de pagamento e inserir o código de segurança, o navegador preencherá o formulário automaticamente usando os valores autocomplete do cartão de pagamento que você adicionou ao formulário:

• 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 assuste. Seu navegador pode conseguir preencher automaticamente o formulário com dados de cartão de pagamento armazenados, mas nenhum pagamento pode ser feito e nenhum dado é transferido ou salvo.

Em um dispositivo móvel, você também perceberá um teclado numérico assim que toca no Campo Número do cartão. Isso ocorre porque você usou inputmode="numeric". Para campos numéricos, isso torna fica mais fácil inserir números e impossível inserir caracteres não numéricos, além de indicar aos usuários lembrar o tipo de dados que estão inserindo.

É muito importante adicionar corretamente todos os valores de autocomplete disponíveis aos formulários de pagamento. Está É bastante comum que os sites percam o valor de autocomplete na data de validade do cartão e outros campos. Se um único valor autofill estiver errado ou ausente, os usuários precisarão recuperar o valor real para inserir manualmente os dados do cartão e você poderá perder uma venda. Se o preenchimento automático for aplicado 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 celular ou computador, o que é altamente inseguro.

Observação : pesquisas mostram que pode ser melhor usar elementos selecionados separados para mês e ano em vez de uma única entrada. Você decide qual é a melhor opção. Teste isso remixando e editando 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.

Envie o formulário de pagamento com um campo vazio. O navegador solicita a conclusão dados. Agora adicione uma letra ao valor no campo Número do cartão e tente enviar o formulário. A 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 outros restrições de validação Não é necessário JavaScript.

Seu formulário de pagamento deve ter esta aparência:

• Remova autocomplete valores e preencha o formulário de pagamento. Que dificuldades você encontrar?
• Teste os formulários de pagamento em lojas on-line. Considere o que funciona bem e o que dá 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 assim que o usuário tocar ou clicar nele, especialmente quando se o usuário está fazendo o pagamento. Muitos usuários tocam ou clicam em botões repetidamente, mesmo se estiverem funcionando bem. Isso pode causar problemas no processamento do pagamento e adicionar carga 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 tenha preenchido corretamente todos os campos do formulário. É melhor não fazer isso, já que os usuários podem acidentalmente omitir um valor obrigatório ou usar um valor inválido, depois tocar ou clicar no botão "Enviar" desativado e presumir que seu site não está funcionando. Mesmo que você marque os valores dos formulários como inválidos ou ausentes, os usuários podem não ver os avisos, principalmente em formulários mais longos e em dispositivos móveis. É melhor validar inline enquanto o usuário insere dados e quando ele tenta enviar o formulário.

Seu código ficará assim neste momento, com a adição de alguns comentários e uma Função validate():

• Você notará que o JavaScript inclui o código comentado para validação de dados. Esse código usa a API Constraint Validation (com amplo suporte) para adicionar de eventos, acessando a interface integrada do navegador para definir o foco e exibir solicitações. Remova a marca de comentário do código e experimente. Você precisa definir valores adequados para someregex e message e um valor para someField

• O que são dados analíticos e de monitoramento de usuários reais você monitoraria para identificar formas de melhorar seus formulários?

Seu formulário de pagamento completo deve ter esta aparência:

• Teste o formulário em diferentes dispositivos. Em quais dispositivos e navegadores você segmentação? Como o formulário poderia ser melhorado?

Indo mais longe

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

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

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

• Análise e monitoramento de usuários reais: permitem que o desempenho e a usabilidade do design de seu formulário sejam testados e monitorados para usuários reais.