Adyen Custom Card component in React

Use it in Next.js

app/pay/checkout.tsx

"use client";
import { useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import { AdyenCheckout, CustomCard, type PaymentCompletedData, type PaymentFailedData } from "@adyen/adyen-web";
import "@adyen/adyen-web/styles/adyen.css";
import CardCheckout, { type CardFieldsSlot } from "@/components/CardCheckout";

type Session = { id: string; sessionData: string };
type Outcome = { ok: true } | { ok: false; message: string };

// Adyen says "mc", the card says "mastercard". The card draws Visa and Mastercard.
const brandOf = (brand: string) => (brand === "mc" ? "mastercard" : brand === "visa" ? "visa" : null);

function AdyenFields({ slot, session, onReady, onResult }: {
  slot: CardFieldsSlot;
  session: Session;
  onReady: (card: CustomCard | null) => void;
  onResult: (o: Outcome) => void;
}) {
  const root = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let card: CustomCard | undefined;
    let gone = false;
    (async () => {
      const checkout = await AdyenCheckout({
        environment: "test",
        clientKey: process.env.NEXT_PUBLIC_ADYEN_CLIENT_KEY,
        session,
        onPaymentCompleted: (r: PaymentCompletedData) =>
          onResult(r.resultCode === "Authorised" ? { ok: true } : { ok: false, message: "That card didn't go through." }),
        onPaymentFailed: (r?: PaymentFailedData) =>
          onResult({ ok: false, message: r?.resultCode === "Refused" ? "Your bank refused the card." : "That card didn't go through." }),
        onError: (e) => onResult({ ok: false, message: e.message || "Something went wrong. Try again." }),
      });
      if (gone || !root.current) return;
      card = new CustomCard(checkout, {
        brands: ["visa", "mc", "amex"],
        styles: {
          base: { color: "#F4F4F6", fontSize: "19px", fontFamily: "monospace" },
          placeholder: { color: "#4a4f61" },
          error: { color: "#ff6b6b" },
        },
        placeholders: { cardNumber: "1234 5678 9012 3456", expiryDate: "MM/YY", securityCodeThreeDigits: "123", securityCodeFourDigits: "1234" },
        onConfigSuccess: () => onReady(card ?? null),
        onBrand: (e) => slot.onChange({ brand: brandOf(e.brand) }),
        onAllValid: (e) => slot.onChange({ complete: e.allValid }),
        onFocus: (e) => slot.onChange({ focus: e.focus && e.fieldType === "encryptedSecurityCode" ? "cvc" : null }),
      });
      card.mount(root.current);
    })();
    return () => {
      gone = true;
      onReady(null);
      card?.unmount();
    };
  }, [session, slot, onReady, onResult]);

  // Adyen finds each field by its data-cse name inside the mounted node and puts its iframe there.
  return (
    <div ref={root} className="grid gap-[15px]">
      <div>
        <label className={slot.labelClassName}>Card number</label>
        <span data-cse="encryptedCardNumber" className={slot.fieldClassName} />
      </div>
      <div className="flex gap-[14px]">
        <div className="flex-1">
          <label className={slot.labelClassName}>Expiry</label>
          <span data-cse="encryptedExpiryDate" className={slot.fieldClassName} />
        </div>
        <div className="flex-1">
          <label className={slot.labelClassName}>CVC</label>
          <span data-cse="encryptedSecurityCode" className={slot.fieldClassName} />
        </div>
      </div>
    </div>
  );
}

export default function AdyenCardCheckout({ session, amount }: { session: Session; amount: number }) {
  const router = useRouter();
  const card = useRef<CustomCard | null>(null);
  const waiting = useRef<((o: Outcome) => void) | null>(null);
  const setCard = useRef((c: CustomCard | null) => (card.current = c)).current;
  const onResult = useRef((o: Outcome) => {
    waiting.current?.(o);
    waiting.current = null;
  }).current;

  return (
    <CardCheckout
      amount={amount}
      currency="EUR"
      resetAfter={null}
      renderCardFields={(slot) => <AdyenFields slot={slot} session={session} onReady={setCard} onResult={onResult} />}
      onConfirm={async () => {
        if (!card.current) throw new Error("The card fields haven't loaded yet.");
        const outcome = await new Promise<Outcome>((resolve) => {
          waiting.current = resolve;
          card.current!.submit(); // encrypts the fields and sends the payment through your session
        });
        if (!outcome.ok) throw new Error(outcome.message);
        router.push("/thanks");
      }}
    />
  );
}

import { createSession } from "@/lib/adyen";
import AdyenCardCheckout from "./checkout";

export const dynamic = "force-dynamic";

export default async function PayPage() {
  // The amount is set here on the server. A new session for every visit.
  const session = await createSession(1000, "EUR");
  return <AdyenCardCheckout session={session} amount={10} />;
}

// Server only. Your API key never reaches the browser.
const BASE = process.env.ADYEN_CHECKOUT_URL ?? "https://checkout-test.adyen.com/v72";

export async function createSession(value: number, currency: string) {
  const res = await fetch(`${BASE}/sessions`, {
    method: "POST",
    headers: { "X-API-Key": process.env.ADYEN_API_KEY!, "Content-Type": "application/json" },
    body: JSON.stringify({
      merchantAccount: process.env.ADYEN_MERCHANT_ACCOUNT,
      amount: { value, currency }, // minor units: 1000 is 10.00
      reference: crypto.randomUUID(),
      returnUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/pay`,
      countryCode: "NL",
    }),
    cache: "no-store",
  });
  if (!res.ok) throw new Error(`Adyen session failed (${res.status})`);
  const { id, sessionData } = (await res.json()) as { id: string; sessionData: string };
  return { id, sessionData };
}