Pagamento via Carteira Digital

Visão Geral

Tela dedicada ao pagamento com Apple Pay ou Google Pay via Mercado Pago Checkout Bricks. Só é acessada quando o cliente escolhe "📱 Carteira" no CheckoutView.

Localização

frontend-react/src/views/customer/WalletPaymentView.tsx

Rotas

Rota	Contexto
/t/:slug/wallet-pay	Checkout direto (cardápio digital)
/t/:slug/b/:pdvSlug/wallet-pay	Checkout via kiosk de PDV

Navigation State

A view espera receber dados via useLocation().state (React Router):

{
  orderData: {
    customerName: string;
    customerPhone: string;
    customerEmail?: string;
    type: 'dine_in' | 'takeout';
    notes?: string;
    items: Array<{ menuItemId: string; quantity: number; notes?: string }>;
    paymentMethod: 'wallet';
  };
  total: number;
}

Se state estiver ausente (acesso direto à URL), a view redireciona para /t/:slug/checkout.

Dependência: SDK Mercado Pago

npm install @mercadopago/sdk-react

import { initMercadoPago, Payment } from '@mercadopago/sdk-react';

Fluxo de Estados

1. Carregando config
   GET /t/:slug/checkout/config → { mpPublicKey }
   │
   ▼
2. Brick visível
   initMercadoPago(mpPublicKey, { locale: 'pt-BR' })
   <Payment> brick renderiza Apple Pay / Google Pay / cartão online
   │
   ▼
3. Cliente autentica (biometria ou dados de cartão)
   onSubmit(formData) chamado pelo brick
   │
   ▼
4. Processando
   POST /t/:slug/checkout/wallet-payment
   { ...orderData, token, payment_method_id, issuer_id, payer }
   │
   ├── approved → OrderConfirmation (número do pedido)
   └── rejected → mensagem de erro, brick reaparece para retry

Endpoints

GET /t/:slug/checkout/config

Retorna a chave pública do MP para inicializar o brick no frontend.

• Rota pública (sem autenticação)
• Resposta: { mpPublicKey: string | null }

POST /t/:slug/checkout/wallet-payment

Cria o pedido após aprovação do pagamento.

• Rota pública (sem autenticação)
• Corpo: WalletPaymentDto (dados do cliente + itens do carrinho + token gerado pelo brick)
• Resposta em sucesso: { orderNumber: string, status: 'approved' }
• Resposta em falha: { status: 'rejected', message: string }

Detecção de Wallet

O brick do Mercado Pago chama canMakePayment() internamente:

• iPhone / Safari com Apple Pay configurado → botão Apple Pay
• Android / Chrome com Google Pay configurado → botão Google Pay
• Desktop ou kiosk sem wallet → formulário de cartão online

O componente não precisa verificar a disponibilidade manualmente — o brick cuida disso.

Fallback

Se mpPublicKey for null (tenant sem configuração), a view exibe um aviso e redireciona automaticamente para /t/:slug/checkout após 3 segundos.

Relacionados

• CheckoutView
• OrderTrackingView
• Gateways de Pagamento
• Configurações