Format a credit card number input in React: 4-4-4-4 spacing, brand detection and a Luhn check

A card field should add the spaces as you type, keep the caret where you were editing, know Amex from Visa before the fourth digit, and catch a typo before the payment call. This page is the code: one formatter that knows each brand's grouping and length, a Luhn check, a React input that puts the caret back after reformatting, and the expiry and CVC rules that go with it.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: one formatter that knows each brand

lib/card.ts

export type Brand = "visa" | "mastercard" | "amex" | "discover" | "diners" | "jcb" | "unionpay" | "unknown";

type Rule = { brand: Exclude<Brand, "unknown">; test: RegExp; gaps: number[]; lengths: number[]; cvc: number };

// Order matters: the first rule whose prefix test matches wins.
const RULES: Rule[] = [
  { brand: "amex", test: /^3[47]/, gaps: [4, 10], lengths: [15], cvc: 4 },
  { brand: "diners", test: /^3(0[0-5]|[689])/, gaps: [4, 10], lengths: [14, 16, 19], cvc: 3 },
  { brand: "jcb", test: /^35(2[89]|[3-8])/, gaps: [4, 8, 12], lengths: [16, 17, 18, 19], cvc: 3 },
  { brand: "visa", test: /^4/, gaps: [4, 8, 12], lengths: [13, 16, 19], cvc: 3 },
  { brand: "mastercard", test: /^(5[1-5]|222[1-9]|22[3-9]|2[3-6]|27[01]|2720)/, gaps: [4, 8, 12], lengths: [16], cvc: 3 },
  { brand: "discover", test: /^(6011|64[4-9]|65)/, gaps: [4, 8, 12], lengths: [16, 19], cvc: 3 },
  { brand: "unionpay", test: /^62/, gaps: [4, 8, 12], lengths: [16, 17, 18, 19], cvc: 3 },
];

const FALLBACK = { gaps: [4, 8, 12], lengths: [16, 19], cvc: 3 };

export const digitsOnly = (s: string) => s.replace(/\D/g, "");

export function cardInfo(digits: string) {
  const rule = RULES.find((r) => r.test.test(digits));
  return rule ? { ...rule } : { brand: "unknown" as const, ...FALLBACK };
}

// "378282246310005" -> "3782 822463 10005" (Amex 4-6-5); everything else in groups of 4.
export function formatCard(raw: string) {
  const info = cardInfo(digitsOnly(raw));
  const digits = digitsOnly(raw).slice(0, Math.max(...info.lengths));
  // Diners is 4-6-4 at 14 digits; its 16-digit cards group like Visa.
  const gaps = info.brand === "diners" && digits.length > 14 ? [4, 8, 12] : info.gaps;
  let out = "";
  for (let i = 0; i < digits.length; i++) {
    if (gaps.includes(i)) out += " ";
    out += digits[i];
  }
  return { value: out, digits, brand: info.brand, maxDigits: Math.max(...info.lengths) };
}

// Luhn: double every second digit from the right, subtract 9 when it goes over 9.
export function luhn(digits: string) {
  if (!/^\d+$/.test(digits)) return false;
  let sum = 0;
  for (let i = 0; i < digits.length; i++) {
    let d = Number(digits[digits.length - 1 - i]);
    if (i % 2 === 1) {
      d *= 2;
      if (d > 9) d -= 9;
    }
    sum += d;
  }
  return sum % 10 === 0;
}

export function isCompleteCard(digits: string) {
  const info = cardInfo(digits);
  return info.lengths.includes(digits.length) && luhn(digits);
}

Good to know

Brand comes from the first digits (the IIN prefix), so the field can switch to Amex grouping after "34" or "37". Mastercard also owns 2221 to 2720, which older snippets miss.
The formatter cuts the number at the brand's longest length. An Amex field stops at 15 digits, so a pasted 16-digit number can't overflow it.
Luhn only catches typos like one wrong digit or two swapped ones. A number that passes can still be declined, so the bank's answer is the only real check.
inputMode="numeric" gives phones the number pad. Don't use type="number": it drops the spaces, shows spinner arrows and can turn long numbers into exponents.
autoComplete="cc-number" lets the browser and password managers fill the card. The formatter runs on their value too, so filled numbers get the same spacing.
If raw card numbers reach your own server, your PCI scope grows a lot. For real payments, keep these rules for the look and let your processor's hosted fields (Stripe Elements, for example) take the number.
What we ran on October 27, 2026: every file on this page type-checks with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28 in strict mode, and giving CardNumberInput a number for id fails that check. formatCard, luhn and isCompleteCard ran in Node on test numbers for Visa, Mastercard (5 and 2 series), Amex, Discover, Diners, JCB and UnionPay, plus a Visa with its last digit changed, which failed Luhn as it should. We didn't render the input in a browser for this page.

Step 2: the input that keeps the caret in place

Reformatting a controlled input moves the caret to the end. Delete a digit in the middle of "4242 4242" and the next keystroke lands in the wrong place. The fix is to count how many digits sat left of the caret before the change, then walk the new value and put the caret after the same number of digits.
useLayoutEffect runs that before the browser paints, so the caret never flickers. The brand label sits inside the field on the right, and the error only shows after blur, so nobody gets a red field after the first digit.

components/card-number-input.tsx

"use client";

import { useLayoutEffect, useRef, useState, type ChangeEvent } from "react";
import { formatCard, isCompleteCard, type Brand } from "@/lib/card";

type Props = {
  id?: string;
  name?: string;
  onCardChange?: (card: { digits: string; brand: Brand; complete: boolean }) => void;
};

export function CardNumberInput({ id = "cc-number", name = "cardNumber", onCardChange }: Props) {
  const ref = useRef<HTMLInputElement>(null);
  const [value, setValue] = useState("");
  const [brand, setBrand] = useState<Brand>("unknown");
  const [touched, setTouched] = useState(false);
  // How many digits sat left of the caret before we reformatted.
  const caretDigits = useRef<number | null>(null);

  function onChange(e: ChangeEvent<HTMLInputElement>) {
    const el = e.target;
    const before = el.value.slice(0, el.selectionStart ?? el.value.length);
    caretDigits.current = before.replace(/\D/g, "").length;
    const next = formatCard(el.value);
    setValue(next.value);
    setBrand(next.brand);
    onCardChange?.({ digits: next.digits, brand: next.brand, complete: isCompleteCard(next.digits) });
  }

  // Put the caret back after the same number of digits, so editing the
  // middle of the number doesn't throw the cursor to the end.
  useLayoutEffect(() => {
    const el = ref.current;
    const n = caretDigits.current;
    if (!el || n === null || document.activeElement !== el) return;
    let pos = 0;
    let seen = 0;
    while (pos < value.length && seen < n) {
      if (/\d/.test(value[pos])) seen++;
      pos++;
    }
    el.setSelectionRange(pos, pos);
    caretDigits.current = null;
  }, [value]);

  const digits = value.replace(/\D/g, "");
  const invalid = touched && digits.length > 0 && !isCompleteCard(digits);

  return (
    <div className="space-y-1.5">
      <label htmlFor={id} className="text-sm font-medium">
        Card number
      </label>
      <div className="relative">
        <input
          ref={ref}
          id={id}
          name={name}
          value={value}
          onChange={onChange}
          onBlur={() => setTouched(true)}
          inputMode="numeric"
          autoComplete="cc-number"
          autoCorrect="off"
          spellCheck={false}
          placeholder="1234 1234 1234 1234"
          aria-invalid={invalid || undefined}
          aria-describedby={invalid ? `${id}-error` : undefined}
          className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2.5 pr-20 font-mono tabular-nums tracking-wide outline-none focus:border-zinc-900 aria-[invalid]:border-rose-500 dark:border-zinc-700 dark:bg-zinc-950"
        />
        <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs uppercase text-zinc-500">
          {brand === "unknown" ? "" : brand}
        </span>
      </div>
      {invalid ? (
        <p id={`${id}-error`} role="alert" className="text-sm text-rose-600">
          Check the card number. It looks incomplete or has a typo.
        </p>
      ) : null}
    </div>
  );
}

Step 3: expiry and CVC

Expiry reads best as "MM / YY". Typing 4 becomes "04 / " because no month starts with 4, and a pasted or autofilled "12/2026" keeps the last two year digits. Pass deleting=true from your onChange when the new value is shorter, so Backspace can remove the slash.
A card works through the last day of its expiry month, so the check compares against the first day of the next month. The CVC is 4 digits for Amex and 3 for the rest: pass cardInfo(digits).cvc as the length.

lib/expiry.ts

// "4" -> "04 / ", "1226" -> "12 / 26". Months 2-9 typed alone get a leading zero.
export function formatExpiry(raw: string, deleting = false) {
  // Autofill and paste can bring "12/2026": keep the last two year digits.
  const long = /^(\d{1,2})\s*\/\s*(\d{4})$/.exec(raw.trim());
  let d = long ? long[1].padStart(2, "0") + long[2].slice(2) : raw.replace(/\D/g, "").slice(0, 4);
  if (d.length === 1 && Number(d) > 1) d = "0" + d;
  if (d.length < 2) return d;
  if (d.length === 2 && deleting) return d;
  return `${d.slice(0, 2)} / ${d.slice(2)}`;
}

// A card is good through the last day of its expiry month.
export function expiryOk(value: string, now = new Date()) {
  const m = /^(\d{2}) \/ (\d{2})$/.exec(value);
  if (!m) return false;
  const month = Number(m[1]);
  const year = 2000 + Number(m[2]);
  if (month < 1 || month > 12) return false;
  const firstOfNext = new Date(year, month, 1);
  return firstOfNext > now && year <= now.getFullYear() + 20;
}

export const cvcOk = (cvc: string, length: number) => new RegExp(`^\\d{${length}}$`).test(cvc);

Where Credit Card Checkout V1 fits

Credit Card Checkout V1 is the animated version: a 3D card that flips to the back when the CVC field gets focus and follows the brand and the digits as you type. In demo mode it runs the same Luhn, brand, expiry and CVC checks as this page.
For real payments it has a renderCardFields slot, so Stripe Elements sit inside the design and the card number goes straight to Stripe.

Stripe Elements card form in Next.js, with the same card design

Install

Copy from the zipPut react/src/components into src/, then none for this page. The paid piece uses framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

amount / currency: price and format
renderCardFields: Stripe Elements inside the design
onConfirm: confirm with Stripe, return a promise
cardColors: front gradient

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Credit Card Input in React: Spacing, Brand and Luhn

From the blog: Stripe Elements With a Custom Card Design in React and Next.js

Questions

How do I add spaces to a card number input in React?

Strip everything but digits, then add a space at the brand's group breaks: 4-4-4-4 for most cards, 4-6-5 for Amex. Keep the caret in place by counting digits before it, as on this page.

How do I detect the card brand from the number?

Match the first digits: 4 is Visa, 51 to 55 and 2221 to 2720 are Mastercard, 34 and 37 are Amex, 6011 and 65 are Discover. Check the more specific prefixes first.

Does a Luhn check mean the card is valid?

No. It catches typos only. The card can still be expired, blocked or out of funds, and only the payment call tells you that.

Should I use type="number" for the card field?

No. Use a text input with inputMode="numeric" and autoComplete="cc-number". Number inputs drop spaces and leading zeros and show spinner arrows.

Does the card form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.