Checkout com Cartão de Crédito

CHARGEFY_ACCESS_TOKEN=<supabase_jwt>

import { useState, FormEvent } from 'react'

interface CardFormData {
  card_number: string
  holder_name: string
  expiry_month: string
  expiry_year: string
  cvv: string
  installments: number
}

interface CardFormProps {
  amount: number // valor em centavos
  maxInstallments?: number
  onSubmit: (data: CardFormData) => Promise<void>
}

export function CardForm({ amount, maxInstallments = 12, onSubmit }: CardFormProps) {
  const [loading, setLoading] = useState(false)
  const [erro, setErro] = useState<string | null>(null)
  const [form, setForm] = useState<CardFormData>({
    card_number: '',
    holder_name: '',
    expiry_month: '',
    expiry_year: '',
    cvv: '',
    installments: 1,
  })

  function formatarNumeroCartao(valor: string): string {
    const numeros = valor.replace(/\D/g, '').slice(0, 16)
    return numeros.replace(/(\d{4})(?=\d)/g, '$1 ')
  }

  function detectarBandeira(numero: string): string {
    const num = numero.replace(/\D/g, '')
    if (/^4/.test(num)) return 'Visa'
    if (/^5[1-5]/.test(num)) return 'Mastercard'
    if (/^3[47]/.test(num)) return 'Amex'
    if (/^(636368|438935|504175|451416|509|606282|301)/.test(num)) return 'Elo'
    return ''
  }

  function gerarOpcoesParcelas() {
    const opcoes = []
    for (let i = 1; i <= maxInstallments; i++) {
      const temJuros = i > 6
      const taxa = temJuros ? 0.0199 : 0
      const total = temJuros ? amount * Math.pow(1 + taxa, i) : amount
      const parcela = Math.ceil(total / i)

      opcoes.push({
        valor: i,
        label: temJuros
          ? `${i}x de R$ ${(parcela / 100).toFixed(2)} (com juros)`
          : `${i}x de R$ ${(parcela / 100).toFixed(2)} sem juros`,
      })
    }
    return opcoes
  }

  async function handleSubmit(e: FormEvent) {
    e.preventDefault()
    setErro(null)

    // Validacoes basicas
    const numero = form.card_number.replace(/\D/g, '')
    if (numero.length < 13 || numero.length > 19) {
      setErro('Numero do cartao invalido')
      return
    }
    if (!form.holder_name.trim()) {
      setErro('Nome do titular obrigatorio')
      return
    }
    if (!form.expiry_month || !form.expiry_year) {
      setErro('Data de validade obrigatoria')
      return
    }
    if (form.cvv.length < 3) {
      setErro('CVV invalido')
      return
    }

    setLoading(true)
    try {
      await onSubmit({
        ...form,
        card_number: numero, // Enviar sem espacos
      })
    } catch (err: any) {
      setErro(err.message || 'Erro ao processar pagamento')
    } finally {
      setLoading(false)
    }
  }

  const bandeira = detectarBandeira(form.card_number)

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      {/* Numero do cartao */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Numero do cartao {bandeira && <span className="text-gray-500">({bandeira})</span>}
        </label>
        <input
          type="text"
          inputMode="numeric"
          placeholder="0000 0000 0000 0000"
          value={formatarNumeroCartao(form.card_number)}
          onChange={(e) =>
            setForm({ ...form, card_number: e.target.value })
          }
          className="w-full border rounded-lg px-3 py-2"
          autoComplete="cc-number"
          required
        />
      </div>

      {/* Nome do titular */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Nome impresso no cartao
        </label>
        <input
          type="text"
          placeholder="JOAO SILVA"
          value={form.holder_name}
          onChange={(e) =>
            setForm({ ...form, holder_name: e.target.value.toUpperCase() })
          }
          className="w-full border rounded-lg px-3 py-2"
          autoComplete="cc-name"
          required
        />
      </div>

      {/* Validade e CVV */}
      <div className="flex gap-4">
        <div className="flex-1">
          <label className="block text-sm font-medium mb-1">Validade</label>
          <div className="flex gap-2">
            <select
              value={form.expiry_month}
              onChange={(e) =>
                setForm({ ...form, expiry_month: e.target.value })
              }
              className="flex-1 border rounded-lg px-3 py-2"
              autoComplete="cc-exp-month"
              required
            >
              <option value="">Mes</option>
              {Array.from({ length: 12 }, (_, i) => (
                <option key={i + 1} value={String(i + 1).padStart(2, '0')}>
                  {String(i + 1).padStart(2, '0')}
                </option>
              ))}
            </select>
            <select
              value={form.expiry_year}
              onChange={(e) =>
                setForm({ ...form, expiry_year: e.target.value })
              }
              className="flex-1 border rounded-lg px-3 py-2"
              autoComplete="cc-exp-year"
              required
            >
              <option value="">Ano</option>
              {Array.from({ length: 10 }, (_, i) => {
                const ano = new Date().getFullYear() + i
                return (
                  <option key={ano} value={String(ano)}>
                    {ano}
                  </option>
                )
              })}
            </select>
          </div>
        </div>

        <div className="w-24">
          <label className="block text-sm font-medium mb-1">CVV</label>
          <input
            type="text"
            inputMode="numeric"
            placeholder="123"
            maxLength={4}
            value={form.cvv}
            onChange={(e) =>
              setForm({ ...form, cvv: e.target.value.replace(/\D/g, '') })
            }
            className="w-full border rounded-lg px-3 py-2"
            autoComplete="cc-csc"
            required
          />
        </div>
      </div>

      {/* Parcelas */}
      <div>
        <label className="block text-sm font-medium mb-1">Parcelas</label>
        <select
          value={form.installments}
          onChange={(e) =>
            setForm({ ...form, installments: Number(e.target.value) })
          }
          className="w-full border rounded-lg px-3 py-2"
        >
          {gerarOpcoesParcelas().map((opcao) => (
            <option key={opcao.valor} value={opcao.valor}>
              {opcao.label}
            </option>
          ))}
        </select>
      </div>

      {/* Erro */}
      {erro && (
        <div className="bg-red-50 text-red-700 px-4 py-2 rounded-lg text-sm">
          {erro}
        </div>
      )}

      {/* Botao */}
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium
                   hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {loading
          ? 'Processando...'
          : `Pagar R$ ${(amount / 100).toFixed(2)}`}
      </button>

      <p className="text-xs text-gray-500 text-center">
        Pagamento processado com seguranca pela Chargefy. Seus dados estao protegidos.
      </p>
    </form>
  )
}

import { Router } from 'express'
import { Chargefy } from '@chargefy/sdk'

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

export const cardCheckoutRouter = Router()

// 1. Criar sessao de checkout
cardCheckoutRouter.post('/create', async (req, res) => {
  try {
    const { productPriceId, customerEmail } = req.body

    const checkout = await chargefy.checkouts.create({
      product_price_id: productPriceId,
      payment_method: 'credit_card',
      success_url: `${process.env.FRONTEND_URL}/pagamento/sucesso`,
    })

    res.json({
      checkoutId: checkout.id,
      clientSecret: checkout.client_secret,
      amount: checkout.amount,
      currency: checkout.currency,
    })
  } catch (error: any) {
    console.error('Erro ao criar checkout:', error.message)
    res.status(400).json({ error: 'Falha ao criar sessao de checkout' })
  }
})

// 2. Confirmar pagamento com cartao
cardCheckoutRouter.post('/confirm', async (req, res) => {
  try {
    const {
      clientSecret,
      customerName,
      customerEmail,
      customerTaxId,
      card,
      installments,
    } = req.body

    const resultado = await chargefy.checkouts.confirm(clientSecret, {
      customer_name: customerName,
      customer_email: customerEmail,
      customer_tax_id: customerTaxId,
      payment_method: 'credit_card',
      card: {
        card_number: card.card_number,
        holder_name: card.holder_name,
        expiry_month: card.expiry_month,
        expiry_year: card.expiry_year,
        cvv: card.cvv,
      },
      installments: installments || 1,
    })

    if (resultado.status === 'succeeded') {
      res.json({
        success: true,
        transactionId: resultado.transaction_id,
        message: 'Pagamento aprovado com sucesso!',
      })
    } else if (resultado.status === 'failed') {
      res.status(402).json({
        success: false,
        error: resultado.error?.message || 'Pagamento recusado',
        code: resultado.error?.code,
      })
    } else {
      res.json({
        success: true,
        pending: true,
        transactionId: resultado.transaction_id,
        message: 'Pagamento em processamento',
      })
    }
  } catch (error: any) {
    console.error('Erro ao confirmar pagamento:', error.message)
    res.status(500).json({
      success: false,
      error: 'Erro interno ao processar pagamento',
    })
  }
})

import { useState, useEffect } from 'react'
import { CardForm } from '../components/CardForm'

export function CheckoutPage() {
  const [checkout, setCheckout] = useState<{
    clientSecret: string
    amount: number
  } | null>(null)
  const [resultado, setResultado] = useState<{
    success: boolean
    message: string
  } | null>(null)

  useEffect(() => {
    // Criar sessao de checkout ao montar a pagina
    fetch('/api/card-checkout/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productPriceId: 'price_xxx',
        customerEmail: '[email protected]',
      }),
    })
      .then((res) => res.json())
      .then(setCheckout)
  }, [])

  async function handlePayment(cardData: any) {
    const response = await fetch('/api/card-checkout/confirm', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        clientSecret: checkout!.clientSecret,
        customerName: cardData.holder_name,
        customerEmail: '[email protected]',
        customerTaxId: '123.456.789-00',
        card: cardData,
        installments: cardData.installments,
      }),
    })

    const data = await response.json()

    if (data.success) {
      setResultado({
        success: true,
        message: data.message,
      })
    } else {
      throw new Error(data.error || 'Pagamento recusado')
    }
  }

  if (resultado?.success) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold text-green-600">
          Pagamento aprovado!
        </h2>
        <p className="mt-2 text-gray-600">{resultado.message}</p>
      </div>
    )
  }

  if (!checkout) {
    return <div className="text-center py-12">Carregando checkout...</div>
  }

  return (
    <div className="max-w-lg mx-auto py-12 px-4">
      <h1 className="text-2xl font-bold mb-6">Finalizar pagamento</h1>
      <CardForm
        amount={checkout.amount}
        maxInstallments={12}
        onSubmit={handlePayment}
      />
    </div>
  )
}