Modal de Pagamento

Visão Geral

Modal para processamento de pagamento do pedido na filial.

Localização

frontend-react/src/views/pdv/PaymentModal.tsx

Funcionalidades

Informações do Pedido

• Lista de itens
• Total
• Desconto (se aplicado)

Formas de Pagamento

• Dinheiro (com cálculo de troco)
• Cartão de crédito
• Cartão de débito
• PIX (QR Code gerado automaticamente)
• Voucher
• Misto

Cálculo

• Valor recebido
• Troco calculado

PIX QR Code

Quando o método PIX é selecionado e o pedido é confirmado, o modal exibe automaticamente a tela de QR code PIX:

• Imagem do QR code (Base64 PNG)
• Campo "PIX Copia e Cola" com botão de copiar
• Botão "Pagamento Confirmado" para fechar após confirmação

Pré-requisito

O tenant precisa ter pixKey e pixMerchantName configurados em Configurações → PIX.

Props do componente

interface PaymentModalProps {
  total: number;
  onConfirm: (method: PaymentMethod, amountReceived?: number) => void;
  onCancel: () => void;
  pixData?: { payload: string; qrCodeBase64: string } | null;
  onPixClose?: () => void;
  terminalSerial?: string; // Serial da maquininha Stone — quando presente, habilita fluxo Stone para cartão
}

O pixData é populado pelo PdvTerminalView quando a API de criação de pedido retorna pixPayload e pixQrCodeBase64.

O terminalSerial é lido de activePdv.stoneTerminalSerial; quando presente, o fluxo de cartão usa o gateway Stone.

Campos

Campo	Tipo	Descrição
method	string	Forma de pagamento selecionada
amountReceived	number	Valor recebido (para dinheiro)
change	number	Troco calculado automaticamente

Fluxo

Dinheiro

1. Atendente seleciona Dinheiro
2. Insere valor recebido
3. Sistema calcula troco
4. Confirma pagamento

PIX

1. Atendente seleciona PIX
2. Confirma
3. Sistema cria pedido na API → retorna QR code
4. Modal exibe QR code e payload "Copia e Cola"
5. Cliente escaneia e paga
6. Atendente clica "Pagamento Confirmado"

Cartão (sem maquininha Stone)

1. Atendente seleciona Crédito/Débito
2. Confirma
3. Prossegue com a maquininha física manualmente

Cartão via Terminal Stone

Ativado quando activePdv.stoneTerminalSerial está configurado.

1. Atendente seleciona Crédito/Débito
2. Confirma — o modal entra no estado processing
3. Sistema chama POST /t/:slug/orders/:id/process-payment com { gateway: "stone", stoneTerminalSerial }
4. API responde com { status: "processing", intentId: "..." } — o pagamento foi enviado à maquininha
5. Modal exibe spinner + serial do terminal + mensagem "Aguardando na maquininha..."
6. Resolução assíncrona: PdvTerminalView escuta o evento WebSocket paymentUpdate no namespace /kitchen
   • paymentStatus: "approved" → modal fecha e pedido é concluído
   • paymentStatus: "declined" → exibe mensagem de recusa com opção de tentar novamente
7. Timeout de 60 s sem resposta → exibe alerta e permite nova tentativa

Relacionados

• PdvTerminalView
• SplitBillModal
• Modo Offline
• Configurações — PIX