Frontend - Gateway de Pagamento

Este diretório contém a interface do usuário para o gateway de pagamento.

Estrutura

Components (/components)

• Objetivo: Componentes reutilizáveis da interface

• Arquivos necessários:

  • PaymentForm.js - Formulário principal de pagamento

  • CreditCardInput.js - Componente para dados do cartão

  • PaymentMethods.js - Seleção de métodos de pagamento

  • SecurityBadge.js - Badge de segurança SSL/PCI

  • LoadingSpinner.js - Indicador de carregamento

  • ErrorMessage.js - Componente de mensagens de erro

  • SuccessMessage.js - Componente de sucesso

  • PaymentSummary.js - Resumo do pagamento

Pages (/pages)

• Objetivo: Páginas principais da aplicação

• Arquivos necessários:

  • CheckoutPage.js - Página de checkout

  • PaymentSuccessPage.js - Página de pagamento confirmado

  • PaymentErrorPage.js - Página de erro no pagamento

  • DashboardPage.js - Dashboard do comerciante

  • TransactionsPage.js - Histórico de transações

  • SettingsPage.js - Configurações da conta

Assets (/assets)

• Objetivo: Recursos estáticos (imagens, ícones, etc.)

• Arquivos necessários:

  • logos/ - Logos das bandeiras de cartão

  • icons/ - Ícones da interface

  • images/ - Imagens promocionais e ilustrações

  • fonts/ - Fontes customizadas se necessário

Styles (/styles)

• Objetivo: Estilos e temas da aplicação

• Arquivos necessários:

  • global.css - Estilos globais

  • payment-form.css - Estilos do formulário de pagamento

  • components.css - Estilos dos componentes

  • themes.css - Temas claros/escuros

  • responsive.css - Responsividade mobile

Funcionalidades Principais

Segurança na Interface

• Validação em tempo real dos dados do cartão

• Mascaramento de dados sensíveis

• Indicadores visuais de segurança

• Prevenção de ataques XSS

Experiência do Usuário

• Interface responsiva (mobile-first)

• Feedback visual em tempo real

• Suporte a múltiplos idiomas

• Acessibilidade (WCAG 2.1)

Integração

• Comunicação segura com a API

• Tokens para dados sensíveis

• Tratamento de erros elegante

• Estados de carregamento

Tecnologias Sugeridas

Quick start (local, sem build)

Coloque os arquivos estáticos em public/frontend e abra:

• http://localhost:3000/frontend/

Arquivos criados para teste: public/frontend/index.html, public/frontend/app.js, public/frontend/styles.css.

On-chain demo (REOWN + Ethers)

Este frontend contém um exemplo simples OnchainDemo que demonstra como conectar uma carteira (MetaMask) usando Ethers e assinar mensagens.

Passos para usar:

1. No terminal, instale dependências dentro do diretório frontend:

cd frontend
pnpm install
pnpm dev

1. Abra o Vite dev server (por padrão http://localhost:5173). Clique em "Connect Wallet" para conectar MetaMask.

2. Use o botão "Sign Message" para assinar uma mensagem com a carteira conectada. Para integrar com REOWN AppKit, substitua a função wallet.connect por chamadas ao SDK do AppKit e passe o signer resultante aos endpoints de backend.