Autenticação 3D Secure (3DS)

var config = await client.getConfig();
// config.capabilities.threeDS = {
//   enabled: true   // ou false
// }

var client = LegacyPay.init({ publicKey: "pk_live_...", apiBaseUrl: "..." });

try {
  var prepared = await client.prepareCardPayment({
    amount: 9900,
    referenceId: "pedido-123",
    installments: 1,
    card: { holderName, number, expirationMonth, expirationYear, cvv },
    customer: { name, email, document, phone, address }
  });

  // prepared = {
  //   payinCard: {
  //     token: "cvt_live_...",             // PAN nunca sai do SDK
  //     installments: 1,
  //     // fluxo pre-order por sessão: o id da sessão (operation_session_id). Outros fluxos
  //     // podem trazer { cavv, eci }. Repasse o que vier — não dependa de cavv/eci no browser.
  //     threeDSecure: { referenceId: "..." }
  //   },
  //   antifraud: { skipped: false, sessionId: "mfp-..." },
  //   card: { token: "cvt_live_...", brand: "visa", last4: "1111" },
  //   threeDS: { skipped: false, status: "authenticated" }
  // }

  // buildPayinPayload() mescla os campos base com prepared.payinCard e antifraud.
  var payload = client.buildPayinPayload({
    amount: 9900,
    referenceId: "pedido-123",
    payerIp: ipDoComprador,
    isPhysicalProduct: false,
    customer: { name, email, document, phone, address },
    items: [{ title: "Produto", quantity: 1, unitPrice: 9900 }]
  }, prepared);

  // payload = {
  //   paymentMethod: "CREDIT_CARD",
  //   amount: 9900,
  //   referenceId: "pedido-123",
  //   payerIp: "...",
  //   isPhysicalProduct: false,
  //   customer: { ... },
  //   items: [ ... ],
  //   card: {
  //     token: "cvt_live_...",
  //     installments: 1,
  //     threeDSecure: { referenceId: "..." }  // o backend resolve cavv/eci a partir do referenceId
  //   },
  //   antifraud: { sessionId: "mfp-..." }  // omitido se antifraude não rodou
  // }

  // Envie payload para o SEU backend — substitua a URL pelo seu endpoint real.
  // Nunca chame /payin direto do browser (exige sk_live).
  await fetch("/api/pagamento", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });
} catch (err) {
  if (err.code === "THREEDS_FAILED") {
    // Mostre uma mensagem amigável e peça outro cartão.
  }
}

var client = LegacyPay.init({ publicKey: "pk_live_...", apiBaseUrl: "..." });

// Você coleta o cartão no SEU formulário e passa tudo numa única chamada:
var prepared = await client.prepareCardPaymentHosted({
  amount: 9900,
  installments: 1,
  referenceId: "pedido-123",
  card: { holderName, number, expirationMonth, expirationYear, cvv },
  customer: { name, email, document, phone, address }
});

// Daqui pra frente é idêntico ao fluxo normal:
var payload = client.buildPayinPayload({ amount: 9900, referenceId: "pedido-123", payerIp, isPhysicalProduct: false, customer, items }, prepared);
// Envie payload pro SEU backend → ele chama /payin.

<script src="https://api.legacyecom.com.br/checkout/sdk/legacy-pay.js"></script>
<div id="card-container"></div>
<button id="pay">Pagar</button>
<script>
  var client = LegacyPay.init({ publicKey: "pk_live_xxx", apiBaseUrl: "https://api.legacyecom.com.br" });

  var element = client.mountCardElement("#card-container", {
    amount: 9900,                 // em centavos
    installments: 1,
    referenceId: "pedido-123",
    maxInstallments: 12,
    customer: { name, email, document, phone, address },
    onResult: function (r) {
      // r = { payinCard, antifraud }. Envie pro SEU backend → ele chama /payin com sk_live.
      fetch("/api/pagamento", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ card: r.payinCard, antifraud: r.antifraud })
      });
    },
    onError: function (err) {
      // err.code / err.details. Em falha de 3DS, mostre erro e peça outro cartão.
    }
  });

  // Dispare a tokenização + 3DS pelo SEU botão:
  document.getElementById("pay").addEventListener("click", function () { element.submit(); });
</script>

"use client";
import { useEffect, useRef, useState } from "react";

const API_BASE = "https://api.legacyecom.com.br";
const PUBLIC_KEY = "pk_live_xxx";

// Carrega o legacy-pay.js uma vez. O legacy-pay.js injeta o SDK 3DS do provider quando
// necessário — garanta o CSP (script-src/connect-src) para o host do sdkUrl de getConfig().
function loadLegacyPay(): Promise<any> {
  return new Promise((resolve, reject) => {
    if ((window as any).LegacyPay) return resolve((window as any).LegacyPay);
    const s = document.createElement("script");
    s.src = `${API_BASE}/checkout/sdk/legacy-pay.js`;
    s.onload = () => resolve((window as any).LegacyPay);
    s.onerror = () => reject(new Error("Falha ao carregar legacy-pay.js"));
    document.head.appendChild(s);
  });
}

export function CheckoutCard({ amount, referenceId, customer }: {
  amount: number; referenceId: string; customer: any;
}) {
  const clientRef = useRef<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let active = true;
    loadLegacyPay()
      .then((LegacyPay) => { if (active) clientRef.current = LegacyPay.init({ publicKey: PUBLIC_KEY, apiBaseUrl: API_BASE }); })
      .catch((e) => active && setError(e.message));
    return () => { active = false; };
  }, []);

  async function pay(card: { holderName: string; number: string; expiry: string; cvv: string }, installments = 1) {
    setError(null);
    setLoading(true);
    try {
      const client = clientRef.current;
      if (!client) throw new Error("Checkout não inicializado. Recarregue a página.");

      // prepareCardPayment roda antifraude + tokenização + 3DS pré-order.
      // Quando há SDK 3DS de provider, isto abre o desafio e devolve payinCard.threeDSecure (ex.: referenceId).
      const prepared = await client.prepareCardPayment({
        amount,                                  // em centavos
        installments,
        referenceId,
        card: {
          holderName: card.holderName,
          number: card.number.replace(/\D/g, ""),
          expiry: card.expiry,                   // "MM/AA" (ou expirationMonth/expirationYear)
          cvv: card.cvv,
          installments,
        },
        customer,
      });

      // buildPayinPayload mescla os campos base com prepared.payinCard (token + threeDSecure) e antifraud.
      const payload = client.buildPayinPayload(
        { amount, referenceId, payerIp: "", isPhysicalProduct: false, customer, items: [] },
        prepared,
      );

      // Envie pro SEU backend — ele chama /payin com sk_live. NUNCA chame /payin do browser.
      const res = await fetch("/api/pagamento", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      }).then((r) => r.json());

      // Sucesso do SDK ≠ venda aprovada — confirme via webhook ou GET /payin/{id}.
      return res;
    } catch (err: any) {
      // 3DS falhou/expirou/cancelado, ou cartão sem suporte a 3DS.
      // NÃO faça fallback sem 3DS — peça outro cartão.
      if (err?.code === "THREEDS_FAILED") setError("Não foi possível autenticar o cartão. Tente outro cartão.");
      else setError(err?.message || "Falha no pagamento. Tente novamente.");
      console.error("[checkout] prepareCardPayment", err?.code, err?.message);
      return null;
    } finally {
      setLoading(false);
    }
  }

  // ...render do formulário, chamando pay(...) no submit; exibir `error` e `loading`.
}