MAPFREPAY CHECKOUT — INTERFACE DE PAGAMENTO MAPFRE

O MapfrePay Checkout é o produto que o cliente final vê ao pagar um seguro da MAPFRE. A mesma base de código serve múltiplos contextos de produto via token de sessão, adaptando fluxo, validação e UX para cinco métodos de pagamento distintos.

O que foi entregue:

• Checkout completo com 5 métodos de pagamento (cartão, PIX, boleto, débito automático e BolePix), cada um com fluxo, validação e UX próprios
• Parcelamentos dinâmicos carregados da API
• Fluxo de pré-autorização com polling e retry automático (até 3 tentativas com backoff)
• Troca de cartão em assinaturas ativas sem interrupção do contrato
• QR Code PIX com cópia via clipboard, adaptado para mobile e desktop
• Validação completa de CPF, CNPJ e CNPJ alfanumérico (algoritmo da Receita Federal)
• Criptografia RSA dos dados do cartão no browser antes do envio ao tokenizador — alinhado com PCI compliance

Decisões de engenharia:

• Sessão por token: toda rota exige /:token/*, eliminando autenticação explícita e centralizando permissões no backend
• Code splitting por rota com React.lazy() — bundle inicial mínimo, crítico em contexto mobile
• Dual-schema Zod: formulários de débito automático têm schema completo para novos pedidos e parcial para troca de método em assinaturas
• Estabilidade Android com Radix Portal: animações de saída removidas de DialogContent, SelectContent e TooltipContent; <select> nativo em touch via useIsTouchDevice — bug rastreado e documentado via Sentry

Qualidade de código:

• TypeScript strict — sem any implícito, sem atalhos de tipagem
• ESLint com regras de segurança de hooks, acessibilidade (jsx-a11y), nullish coalescing e optional chaining obrigatórios
• Husky com lint e type-check antes de cada commit
• Testes com Vitest + Testing Library cobrindo lógica crítica de pagamento
• Pipeline Jenkins parametrizado para ambientes sandbox e produção