Mercado Pago React card form: the Brick first, then Secure Fields in a 3D card

Use it in Next.js

app/pay/checkout.tsx

"use client";
import { useCallback, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
  initMercadoPago,
  CardNumber,
  ExpirationDate,
  SecurityCode,
  createCardToken,
  getPaymentMethods,
} from "@mercadopago/sdk-react";
import CardCheckout, { type CardFieldsSlot } from "@/components/CardCheckout";
import PayerFields, { type Payer } from "./payer-fields";

initMercadoPago(process.env.NEXT_PUBLIC_MP_PUBLIC_KEY!, { locale: "pt-BR" });

// Module level on purpose: sdk-react re-creates a Secure Field whenever one of
// its props changes, so styles and callbacks must keep the same identity.
const fieldStyle = { color: "#F4F4F6", fontSize: "19px", fontFamily: "monospace", placeholderColor: "#4a4f61" };

// Mercado Pago ids: "visa", "master", "debvisa", "debmaster", "amex"...
// The card draws Visa and Mastercard, so the rest show no logo.
const brandOf = (id: string) =>
  id === "visa" || id === "debvisa" ? "visa" : id === "master" || id === "debmaster" ? "mastercard" : null;

export type CardMeta = { bin: string; paymentMethodId: string; issuerId: string };

function MercadoPagoFields({ slot, onCard }: { slot: CardFieldsSlot; onCard: (card: CardMeta | null) => void }) {
  const ok = useRef({ cardNumber: false, expirationDate: false, securityCode: false, bin: false }).current;
  const report = useCallback(
    () => slot.onChange({ complete: ok.cardNumber && ok.expirationDate && ok.securityCode && ok.bin }),
    [slot, ok],
  );
  const onValidity = useCallback(
    (e: { field: string; errorMessages: unknown[] }) => {
      if (e.field === "cardNumber" || e.field === "expirationDate" || e.field === "securityCode") ok[e.field] = e.errorMessages.length === 0;
      report();
    },
    [ok, report],
  );
  const onBinChange = useCallback(
    async ({ bin }: { bin?: string }) => {
      ok.bin = false;
      onCard(null);
      slot.onChange({ brand: null });
      report();
      if (!bin) return;
      const methods = await getPaymentMethods({ bin });
      const pm = methods?.results[0];
      if (!pm) return;
      ok.bin = true;
      onCard({ bin, paymentMethodId: pm.id, issuerId: String(pm.issuer.id) });
      slot.onChange({ brand: brandOf(pm.id) });
      report();
    },
    [ok, onCard, slot, report],
  );
  const onFocus = useCallback((e: { field: string }) => slot.onChange({ focus: e.field === "securityCode" ? "cvc" : null }), [slot]);
  const onBlur = useCallback(() => slot.onChange({ focus: null }), [slot]);

  return (
    <div className="grid gap-[15px]">
      <div>
        <label className={slot.labelClassName}>Card number</label>
        <div className={slot.fieldClassName}>
          <CardNumber placeholder="1234 5678 9012 3456" style={fieldStyle} onValidityChange={onValidity} onBinChange={onBinChange} onFocus={onFocus} onBlur={onBlur} />
        </div>
      </div>
      <div className="flex gap-[14px]">
        <div className="flex-1">
          <label className={slot.labelClassName}>Expiry</label>
          <div className={slot.fieldClassName}>
            <ExpirationDate placeholder="MM/YY" mode="short" style={fieldStyle} onValidityChange={onValidity} onFocus={onFocus} onBlur={onBlur} />
          </div>
        </div>
        <div className="flex-1">
          <label className={slot.labelClassName}>CVC</label>
          <div className={slot.fieldClassName}>
            <SecurityCode placeholder="123" style={fieldStyle} onValidityChange={onValidity} onFocus={onFocus} onBlur={onBlur} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default function MercadoPagoCardCheckout({ amount }: { amount: number }) {
  const router = useRouter();
  const card = useRef<CardMeta | null>(null);
  const [bin, setBin] = useState<string | null>(null);
  const [payer, setPayer] = useState<Payer>({ email: "", docType: "", docNumber: "", installments: 1 });
  const onCard = useCallback((c: CardMeta | null) => {
    card.current = c;
    setBin(c?.bin ?? null);
  }, []);

  return (
    <div className="grid gap-6">
      <PayerFields amount={amount} bin={bin} value={payer} onChange={setPayer} />
      <CardCheckout
        amount={amount}
        currency="BRL"
        locale="pt-BR"
        resetAfter={null}
        renderCardFields={(slot) => <MercadoPagoFields slot={slot} onCard={onCard} />}
        onConfirm={async ({ name }) => {
          if (!card.current) throw new Error("Check the card number.");
          if (!payer.email || !payer.docType || !payer.docNumber) throw new Error("Fill in your email and document first.");
          const token = await createCardToken({
            cardholderName: name,
            identificationType: payer.docType,
            identificationNumber: payer.docNumber,
          });
          if (!token) throw new Error("The card fields haven't loaded yet.");
          const res = await fetch("/api/mercado-pago/pay", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              token: token.id,
              payment_method_id: card.current.paymentMethodId,
              issuer_id: card.current.issuerId,
              installments: payer.installments,
              payer: { email: payer.email, identification: { type: payer.docType, number: payer.docNumber } },
            }),
          });
          const { status } = (await res.json()) as { status?: string };
          if (status === "approved") return router.push("/thanks");
          if (status === "in_process" || status === "pending") return router.push("/thanks?pending=1");
          throw new Error("The payment was not approved. Try another card.");
        }}
      />
    </div>
  );
}

"use client";
import { useEffect, useState } from "react";
import { getIdentificationTypes, getInstallments } from "@mercadopago/sdk-react";

export type Payer = { email: string; docType: string; docNumber: string; installments: number };
type Option = { value: string; label: string };

const box = "h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900";

// Email, document and installments sit outside the card: Mercado Pago needs
// them in several countries, and the 3D card has no room for them.
export default function PayerFields({ amount, bin, value, onChange }: {
  amount: number;
  bin: string | null;
  value: Payer;
  onChange: (p: Payer) => void;
}) {
  const [docTypes, setDocTypes] = useState<Option[]>([]);
  const [plans, setPlans] = useState<Option[]>([{ value: "1", label: "1x" }]);
  const set = (patch: Partial<Payer>) => onChange({ ...value, ...patch });

  useEffect(() => {
    getIdentificationTypes().then((types) => setDocTypes((types ?? []).map((t) => ({ value: t.id, label: t.name }))));
  }, []);

  useEffect(() => {
    if (!bin) return;
    getInstallments({ amount: String(amount), bin, locale: "pt-BR" }).then((r) => {
      const costs = r?.[0]?.payer_costs ?? [];
      if (costs.length) setPlans(costs.map((c) => ({ value: String(c.installments), label: c.recommended_message })));
    });
  }, [amount, bin]);

  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <input className={box} type="email" placeholder="Email" value={value.email} onChange={(e) => set({ email: e.target.value })} />
      <div className="flex gap-2">
        <select className={`${box} w-28`} value={value.docType} onChange={(e) => set({ docType: e.target.value })}>
          <option value="">Doc</option>
          {docTypes.map((d) => (
            <option key={d.value} value={d.value}>{d.label}</option>
          ))}
        </select>
        <input className={box} placeholder="Document number" value={value.docNumber} onChange={(e) => set({ docNumber: e.target.value })} />
      </div>
      <select className={`${box} sm:col-span-2`} value={String(value.installments)} onChange={(e) => set({ installments: Number(e.target.value) })}>
        {plans.map((p) => (
          <option key={p.value} value={p.value}>{p.label}</option>
        ))}
      </select>
    </div>
  );
}

import MercadoPagoCardCheckout from "./checkout";

export default function PayPage() {
  return (
    <main className="mx-auto grid max-w-[1000px] gap-6 p-6">
      <h1 className="text-2xl font-semibold">Pagamento</h1>
      <MercadoPagoCardCheckout amount={49.9} />
    </main>
  );
}

// Server only. The access token never reaches the browser, and the amount is set here.
import { NextResponse } from "next/server";

const AMOUNT = 49.9; // look the order up instead of trusting the browser

type Body = {
  token: string;
  payment_method_id: string;
  issuer_id?: string;
  installments: number;
  payer: { email: string; identification?: { type: string; number: string } };
};

export async function POST(req: Request) {
  const b = (await req.json()) as Body;
  const res = await fetch("https://api.mercadopago.com/v1/payments", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.MP_ACCESS_TOKEN}`,
      "Content-Type": "application/json",
      "X-Idempotency-Key": crypto.randomUUID(),
    },
    body: JSON.stringify({
      transaction_amount: AMOUNT,
      token: b.token,
      installments: b.installments,
      payment_method_id: b.payment_method_id,
      issuer_id: b.issuer_id ? Number(b.issuer_id) : undefined,
      payer: b.payer,
      description: "Order 1042",
    }),
    cache: "no-store",
  });
  const payment = (await res.json()) as { status?: string; status_detail?: string };
  return NextResponse.json({ status: payment.status, detail: payment.status_detail }, { status: res.ok ? 200 : 402 });
}