Checkout PIX

import { Chargefy } from '@chargefy/sdk'

export const chargefy = new Chargefy({
  accessToken: process.env.CHARGEFY_ACCESS_TOKEN!,
  // Para sandbox:
  // server: 'sandbox'
})

import { useState, useEffect, useCallback } from 'react'

interface PixData {
  pixQrCode: string
  pixQrCodeBase64: string
  pixCopyPaste: string
  expiresAt: string
}

interface PixPaymentProps {
  pixData: PixData
  clientSecret: string
  onPaymentConfirmed: () => void
}

export function PixPayment({
  pixData,
  clientSecret,
  onPaymentConfirmed,
}: PixPaymentProps) {
  const [copied, setCopied] = useState(false)
  const [status, setStatus] = useState<'pending' | 'succeeded' | 'expired'>('pending')
  const [timeLeft, setTimeLeft] = useState('')

  // Calcular tempo restante
  useEffect(() => {
    const expiresAt = new Date(pixData.expiresAt).getTime()

    const timer = setInterval(() => {
      const now = Date.now()
      const diff = expiresAt - now

      if (diff <= 0) {
        setStatus('expired')
        setTimeLeft('Expirado')
        clearInterval(timer)
        return
      }

      const minutes = Math.floor(diff / 60000)
      const seconds = Math.floor((diff % 60000) / 1000)
      setTimeLeft(`${minutes}:${seconds.toString().padStart(2, '0')}`)
    }, 1000)

    return () => clearInterval(timer)
  }, [pixData.expiresAt])

  // Polling para verificar pagamento (a cada 3 segundos)
  useEffect(() => {
    if (status !== 'pending') return

    const poll = setInterval(async () => {
      try {
        const res = await fetch(`/api/checkout/sessions/${clientSecret}/status`)
        const data = await res.json()

        if (data.status === 'succeeded') {
          setStatus('succeeded')
          clearInterval(poll)
          onPaymentConfirmed()
        }
      } catch (err) {
        console.error('Erro ao verificar status:', err)
      }
    }, 3000)

    return () => clearInterval(poll)
  }, [clientSecret, status, onPaymentConfirmed])

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(pixData.pixCopyPaste)
      setCopied(true)
      setTimeout(() => setCopied(false), 3000)
    } catch {
      // Fallback para navegadores sem suporte a clipboard API
      const textarea = document.createElement('textarea')
      textarea.value = pixData.pixCopyPaste
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      setCopied(true)
      setTimeout(() => setCopied(false), 3000)
    }
  }, [pixData.pixCopyPaste])

  if (status === 'succeeded') {
    return (
      <div className="text-center p-8">
        <div className="text-green-500 text-5xl mb-4">✓</div>
        <h2 className="text-2xl font-bold text-green-700">
          Pagamento confirmado!
        </h2>
        <p className="text-gray-600 mt-2">
          Seu pagamento via PIX foi recebido com sucesso.
        </p>
      </div>
    )
  }

  if (status === 'expired') {
    return (
      <div className="text-center p-8">
        <h2 className="text-xl font-bold text-red-600">QR Code expirado</h2>
        <p className="text-gray-600 mt-2">
          O prazo para pagamento expirou. Por favor, gere um novo QR Code.
        </p>
        <button
          onClick={() => window.location.reload()}
          className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg"
        >
          Tentar novamente
        </button>
      </div>
    )
  }

  return (
    <div className="max-w-md mx-auto p-6">
      <h2 className="text-xl font-bold text-center mb-2">
        Pague com PIX
      </h2>
      <p className="text-gray-500 text-center text-sm mb-6">
        Escaneie o QR Code ou copie o codigo abaixo
      </p>

      {/* QR Code */}
      <div className="flex justify-center mb-6">
        <img
          src={pixData.pixQrCodeBase64 || pixData.pixQrCode}
          alt="QR Code PIX"
          className="w-64 h-64 border rounded-lg"
        />
      </div>

      {/* Tempo restante */}
      <div className="text-center text-sm text-gray-500 mb-4">
        Expira em: <span className="font-mono font-bold">{timeLeft}</span>
      </div>

      {/* Codigo copia e cola */}
      <div className="bg-gray-50 rounded-lg p-4 mb-4">
        <p className="text-xs text-gray-500 mb-2">PIX Copia e Cola:</p>
        <div className="flex items-center gap-2">
          <code className="flex-1 text-xs break-all bg-white p-2 rounded border">
            {pixData.pixCopyPaste}
          </code>
          <button
            onClick={handleCopy}
            className="shrink-0 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
          >
            {copied ? 'Copiado!' : 'Copiar'}
          </button>
        </div>
      </div>

      {/* Instrucoes */}
      <div className="text-sm text-gray-600 space-y-2">
        <p>1. Abra o app do seu banco</p>
        <p>2. Escolha pagar com PIX</p>
        <p>3. Escaneie o QR Code ou cole o codigo</p>
        <p>4. Confirme o pagamento</p>
      </div>

      {/* Indicador de aguardando */}
      <div className="flex items-center justify-center gap-2 mt-6 text-blue-600">
        <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
          <circle
            className="opacity-25"
            cx="12" cy="12" r="10"
            stroke="currentColor"
            strokeWidth="4"
            fill="none"
          />
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
          />
        </svg>
        <span className="text-sm">Aguardando pagamento...</span>
      </div>
    </div>
  )
}

import { Router, raw } from 'express'
import crypto from 'crypto'

export const pixWebhooksRouter = Router()

pixWebhooksRouter.use(raw({ type: 'application/json' }))

function verifySignature(payload: Buffer, signature: string, secret: string): boolean {
  const expected = crypto.createHmac('sha256', secret).update(payload).digest('hex')
  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
}

pixWebhooksRouter.post('/', (req, res) => {
  const signature = req.headers['webhook-signature'] as string
  const secret = process.env.CHARGEFY_WEBHOOK_SECRET!

  if (!signature || !verifySignature(req.body, signature, secret)) {
    return res.status(401).json({ error: 'Assinatura invalida' })
  }

  const event = JSON.parse(req.body.toString())

  switch (event.type) {
    case 'checkout.updated': {
      const checkout = event.data

      if (checkout.status === 'succeeded' && checkout.paymentMethod === 'pix') {
        console.log(`PIX confirmado! Checkout: ${checkout.id}`)
        console.log(`Valor: R$ ${(checkout.amount / 100).toFixed(2)}`)
        console.log(`Cliente: ${checkout.customerEmail}`)

        // Liberar acesso, enviar email de confirmacao, etc.
        handlePixPaymentConfirmed(checkout)
      }

      if (checkout.status === 'expired') {
        console.log(`PIX expirado. Checkout: ${checkout.id}`)
        handlePixPaymentExpired(checkout)
      }
      break
    }

    case 'subscription.active': {
      const subscription = event.data
      console.log(`Assinatura ativa: ${subscription.id}`)
      // Processar entrega do produto/servico
      break
    }
  }

  res.status(200).json({ received: true })
})

async function handlePixPaymentConfirmed(checkout: any) {
  // Exemplo: atualizar cobranca no banco de dados
  // await db.sales.update({
  //   where: { checkoutId: checkout.id },
  //   data: { status: 'paid', paidAt: new Date() },
  // })

  // Exemplo: enviar email de confirmacao
  // await sendEmail({
  //   to: checkout.customerEmail,
  //   subject: 'Pagamento PIX confirmado!',
  //   template: 'pix-confirmed',
  // })
}

async function handlePixPaymentExpired(checkout: any) {
  // Limpar recursos reservados, notificar cliente, etc.
}

import { Router } from 'express'
import { chargefy } from '../lib/chargefy.js'

export const statusRouter = Router()

// Endpoint para o frontend fazer polling
statusRouter.get('/sessions/:clientSecret/status', async (req, res) => {
  try {
    const checkout = await chargefy.checkouts.getByClientSecret(
      req.params.clientSecret
    )

    res.json({
      status: checkout.status,
      paymentMethod: checkout.paymentMethod,
      amount: checkout.amount,
      paidAt: checkout.paidAt,
    })
  } catch (error) {
    res.status(404).json({ error: 'Checkout nao encontrado' })
  }
})

async function pollPixStatus(clientSecret: string): Promise<string> {
  const MAX_ATTEMPTS = 200      // ~10 minutos com intervalo de 3s
  const INTERVAL_MS = 3000

  for (let i = 0; i < MAX_ATTEMPTS; i++) {
    const res = await fetch(`/api/checkout/sessions/${clientSecret}/status`)
    const data = await res.json()

    if (data.status === 'succeeded') {
      return 'succeeded'
    }

    if (data.status === 'expired' || data.status === 'failed') {
      return data.status
    }

    await new Promise(resolve => setTimeout(resolve, INTERVAL_MS))
  }

  return 'timeout'
}

import 'dotenv/config'
import express from 'express'
import { Chargefy } from '@chargefy/sdk'
import crypto from 'crypto'

const app = express()
const PORT = process.env.PORT || 3001

const chargefy = new Chargefy({
  accessToken: process.env.CHARGEFY_ACCESS_TOKEN!,
})

// ─── Webhook (ANTES do express.json) ────────────────────────────
app.post('/webhooks', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['webhook-signature'] as string
  const secret = process.env.CHARGEFY_WEBHOOK_SECRET!

  if (!signature) {
    return res.status(401).json({ error: 'Assinatura ausente' })
  }

  const expected = crypto.createHmac('sha256', secret).update(req.body).digest('hex')
  const isValid = crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))

  if (!isValid) {
    return res.status(401).json({ error: 'Assinatura invalida' })
  }

  const event = JSON.parse(req.body.toString())

  if (event.type === 'checkout.updated' && event.data.status === 'succeeded') {
    console.log(`Pagamento PIX confirmado: ${event.data.id}`)
    console.log(`Valor: R$ ${(event.data.amount / 100).toFixed(2)}`)
    // TODO: liberar acesso, enviar email, etc.
  }

  res.status(200).json({ received: true })
})

// ─── JSON parser ────────────────────────────────────────────────
app.use(express.json())
app.use(express.static('public'))

// ─── Criar checkout PIX ─────────────────────────────────────────
app.post('/api/pix/create', async (req, res) => {
  try {
    const { productPriceId, customerEmail, customerName } = req.body

    // 1. Criar sessao de checkout
    const checkout = await chargefy.checkouts.create({
      productPriceId,
      customerEmail,
      successUrl: `${req.headers.origin}/sucesso`,
    })

    // 2. Confirmar com PIX
    const result = await chargefy.checkouts.confirm(checkout.clientSecret, {
      customerEmail,
      customerName,
      paymentMethod: 'pix',
    })

    // 3. Retornar dados do PIX para o frontend
    res.json({
      clientSecret: checkout.clientSecret,
      pixQrCode: result.paymentDetails?.pixQrCode,
      pixQrCodeBase64: result.paymentDetails?.pixQrCodeBase64,
      pixCopyPaste: result.paymentDetails?.pixCopyPaste,
      expiresAt: result.paymentDetails?.expiresAt,
      amount: checkout.amount,
    })
  } catch (error) {
    console.error('Erro ao criar PIX:', error)
    res.status(400).json({ error: 'Falha ao gerar pagamento PIX' })
  }
})

// ─── Consultar status ───────────────────────────────────────────
app.get('/api/pix/status/:clientSecret', async (req, res) => {
  try {
    const checkout = await chargefy.checkouts.getByClientSecret(
      req.params.clientSecret
    )

    res.json({
      status: checkout.status,
      amount: checkout.amount,
      paidAt: checkout.paidAt,
    })
  } catch (error) {
    res.status(404).json({ error: 'Checkout nao encontrado' })
  }
})

app.listen(PORT, () => {
  console.log(`Servidor PIX rodando em http://localhost:${PORT}`)
})

import { useState } from 'react'
import { PixPayment } from './components/PixPayment'

interface PixResponse {
  clientSecret: string
  pixQrCode: string
  pixQrCodeBase64: string
  pixCopyPaste: string
  expiresAt: string
  amount: number
}

export default function App() {
  const [pixData, setPixData] = useState<PixResponse | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleBuyWithPix() {
    setLoading(true)
    setError(null)

    try {
      const res = await fetch('/api/pix/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          productPriceId: 'price_xxxx',
          customerEmail: '[email protected]',
          customerName: 'Maria Silva',
        }),
      })

      if (!res.ok) {
        throw new Error('Falha ao gerar PIX')
      }

      const data: PixResponse = await res.json()
      setPixData(data)
    } catch (err) {
      setError('Erro ao gerar pagamento PIX. Tente novamente.')
    } finally {
      setLoading(false)
    }
  }

  if (pixData) {
    return (
      <PixPayment
        pixData={pixData}
        clientSecret={pixData.clientSecret}
        onPaymentConfirmed={() => {
          // Redirecionar para pagina de sucesso
          window.location.href = '/sucesso'
        }}
      />
    )
  }

  return (
    <div className="max-w-md mx-auto p-8 text-center">
      <h1 className="text-2xl font-bold mb-2">Plano Pro</h1>
      <p className="text-3xl font-bold text-green-600 mb-6">R$ 99,90</p>

      {error && (
        <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-4 text-sm">
          {error}
        </div>
      )}

      <button
        onClick={handleBuyWithPix}
        disabled={loading}
        className="w-full py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 transition-colors"
      >
        {loading ? 'Gerando PIX...' : 'Pagar com PIX'}
      </button>
    </div>
  )
}