Checkout
Um checkout em quatro etapas com resumo do pedido, validação de endereço, opções de frete, dados do cartão, revisão e confirmação.
Um checkout de uma página só, que mantém o resumo do pedido à vista enquanto a pessoa passa por endereço, frete, pagamento e revisão. Preencha, erre de propósito e clique em Continuar: cada etapa confere os próprios campos antes de deixar seguir. O cartão é de demonstração; nada é enviado.
Componentes
Comportamento
- Validação por etapa. Continuar confere só os campos da etapa atual. Os erros aparecem depois da primeira tentativa e se atualizam enquanto você digita, então corrigir um campo apaga a mensagem sem outro clique.
- CEP de acordo com o país. A dica de formato e a verificação seguem o país escolhido:
01310-100no Brasil,94103nos Estados Unidos,1100-148em Portugal,M5V 2T6no Canadá. - Cartão formatado ao digitar. O número é agrupado de quatro em quatro e conferido pelo dígito de Luhn, a validade ganha a barra e não pode ter passado, e o código de segurança aceita 3 ou 4 dígitos. Os tokens de
autocomplete(cc-number,cc-exp,cc-csc) deixam o navegador e o gerenciador de senhas preencherem. - O frete muda o total. Os cards de opção são um
RadioGroupde verdade: o resumo e o botão Pagar se atualizam com o preço do frete. - Cupom.
CAMALEO10dá 10% de desconto nos itens; qualquer outro código mostra um erro abaixo do campo. - Revisar e alterar. A revisão lista o que foi preenchido, com um botão Alterar que volta para a etapa. Pagar mostra o carregamento, e a confirmação substitui o formulário.
Acessibilidade
- Depois de um Continuar com erro, o foco vai para o
ErrorSummaryno topo da etapa; cada link dele leva o foco ao campo. - Quando a etapa muda, o foco vai para o título da etapa, que é lido como "Etapa 2 de 4: Frete". O
Steppermarca a etapa atual comaria-current="step", e as etapas concluídas dizem "concluída" para leitores de tela. - Todo campo tem rótulo visível, e as dicas e os erros estão ligados a ele, então são lidos quando o campo recebe foco.
- O título da confirmação recebe o foco quando substitui o formulário, então quem usa teclado ou leitor de tela não se perde.
Use o código
A aba Código mostra a tela inteira em um arquivo. Ela só precisa de @camaleo/react e lucide-react: a validação é uma função simples, que você pode trocar pela sua biblioteca de schema. Troque o carrinho e os preços fixos pelos seus dados, e mande os dados do cartão para os componentes do seu provedor de pagamento (Stripe Elements, Adyen, Pagar.me), não para o seu servidor: número de cartão nunca deve passar por ele.