Pagamentos & Checkout
Claude 3.5 Sonnet
Formulário de Checkout Transparente com Validação de Cartão
Checkout de cartão neobrutalista com detecção de bandeira, validação de Luhn e máscara dinâmica.
0cópias
0joinhas
0favoritos
O prompt
Crie um formulário de Checkout Transparente neobrutalista em HTML, CSS e Vanilla JS da loja {{nome_loja}} para captura segura de dados de cartão de crédito.
Parâmetros:
- Nome da Loja: {{nome_loja}}
- Moeda: {{moeda}}
Funcionalidades da Interface:
1. Cartão de crédito visual interativo que reflete em tempo real o número digitado, nome do titular, data de validade e vira para mostrar o CVV no foco, exibindo também o valor da compra em {{moeda}}.
2. Identificação automática da bandeira do cartão (Visa, Mastercard, Elo, Hipercard, Amex) exibindo o ícone correspondente.
3. Máscaras automáticas nos inputs de número (0000 0000 0000 0000), validade (MM/AA) e CVV (3 ou 4 dígitos).
4. Algoritmo de Luhn embutido para validar a integridade do número antes do envio.
5. Mensagens amigáveis de erro com foco automático nos campos inválidos.
Como usar
- Substitua {{nome_loja}} e {{moeda}}.
- Cole no Claude; salve os arquivos retornados (HTML/CSS/JS) e abra no navegador para testar.
- Experimente cartões de diferentes bandeiras — os ícones Visa, Mastercard, Elo, Hipercard e Amex aparecem automaticamente.
- A validação Luhn roda antes do envio: teste com 4111 1111 1111 1111 (válido) e 4111 1111 1111 1112 (inválido).
Exemplo de saída
Checkout (~300 linhas): cartão visual interativo refletindo número/nome/validade em tempo real e virando para o CVV no foco, detecção automática de bandeira com ícone, máscaras dinâmicas (0000 0000 0000 0000, MM/AA, CVV 3-4 dígitos), algoritmo Luhn embutido e mensagens de erro amigáveis com foco automático no campo inválido.