"use client"; /** * @author: @dorianbaffier * @description: Card Field * @version: 1.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Check, CreditCard, Lock } from "lucide-react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, } from "motion/react"; import { type ChangeEvent, type KeyboardEvent, type ReactNode, type RefObject, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const NOT_DIGIT = /\D/g; const TEST_CARD = "4242424242424242"; type Brand = "visa" | "mastercard" | "amex" | "discover" | "unknown"; interface BrandSpec { brand: Brand; match: RegExp; groups: number[]; cvc: number; } const BRANDS: BrandSpec[] = [ { brand: "amex", match: /^3[47]/, groups: [4, 6, 5], cvc: 4 }, { brand: "visa", match: /^4/, groups: [4, 4, 4, 4], cvc: 3 }, { brand: "mastercard", match: /^(5[1-5]|2[2-7])/, groups: [4, 4, 4, 4], cvc: 3, }, { brand: "discover", match: /^(6011|65|64[4-9])/, groups: [4, 4, 4, 4], cvc: 3, }, ]; const UNKNOWN: BrandSpec = { brand: "unknown", match: /^/, groups: [4, 4, 4, 4], cvc: 3, }; const BRAND_NAMES: Record = { visa: "Visa", mastercard: "Mastercard", amex: "American Express", discover: "Discover", unknown: "Card", }; export interface CardDetails { brand: Brand; last4: string; /** MM/YY */ expiry: string; } export interface CardFieldProps { /** What the button charges. */ amount?: number; currency?: string; /** Charge the card. Return a promise and the button waits for it. */ onPay?: (card: CardDetails) => Promise | void; /** Shows a "Use test card" link that types 4242… in for you. */ testMode?: boolean; className?: string; } const specFor = (digits: string) => BRANDS.find((spec) => spec.match.test(digits)) ?? UNKNOWN; const lengthOf = (spec: BrandSpec) => spec.groups.reduce((sum, size) => sum + size, 0); /** Cuts digits into the brand's groups: Amex is 4-6-5, the rest 4-4-4-4. */ function groupsOf(digits: string, spec: BrandSpec) { const out: string[] = []; let at = 0; for (const size of spec.groups) { if (at >= digits.length) { break; } out.push(digits.slice(at, at + size)); at += size; } return out; } function luhn(digits: string) { let sum = 0; for (let i = 0; i < digits.length; i++) { let d = Number(digits.at(-1 - i)); if (i % 2 === 1) { d *= 2; if (d > 9) { d -= 9; } } sum += d; } return sum % 10 === 0; } /** "1" waits for the second digit; "4" means April, so it becomes "04". */ function formatExpiry(digits: string) { let d = digits; if (d.length === 1 && Number(d) > 1) { d = `0${d}`; } if (d.length <= 2) { return d.length === 2 ? `${d} / ` : d; } return `${d.slice(0, 2)} / ${d.slice(2, 4)}`; } function expiryProblem(digits: string) { if (digits.length < 4) { return null; } const month = Number(digits.slice(0, 2)); const year = 2000 + Number(digits.slice(2, 4)); if (month < 1 || month > 12) { return "That month doesn't exist"; } const now = new Date(); const thisMonth = now.getFullYear() * 12 + now.getMonth(); if (year * 12 + month - 1 < thisMonth) { return "This card has expired"; } return null; } function BrandMark({ brand, back }: { brand: Brand; back: boolean }) { if (back) { // Where the security code lives: the back for most cards, the front for Amex. return brand === "amex" ? ( ) : ( ); } switch (brand) { case "visa": return ( ); case "mastercard": return ( ); case "amex": return ( ); case "discover": return ( ); default: return ( ); } } interface Fade { duration: number; ease: typeof EASE_OUT; } type Slide = | { duration: number } | { type: "spring"; duration: number; bounce: number }; function rowTone(error: boolean, focused: boolean) { if (error) { return "border-red-400 dark:border-red-500/70"; } return focused ? "border-zinc-400 ring-4 ring-zinc-900/5 dark:border-zinc-600 dark:ring-white/5" : "border-zinc-200 dark:border-zinc-800"; } function BrandSlot({ brand, back, fade, }: { brand: Brand; back: boolean; fade: Fade; }) { return ( {brand === "unknown" ? "" : BRAND_NAMES[brand]} ); } /** * Runs steps a keystroke apart, with a pause after `pauseAfter` so the * number has time to slide away before expiry is typed. */ function playSteps( steps: (() => void)[], timer: RefObject | undefined>, pauseAfter: number ) { const run = (i: number) => { if (i >= steps.length) { return; } steps[i](); timer.current = setTimeout(() => run(i + 1), i === pauseAfter ? 260 : 45); }; run(0); } /** What typing into the expiry field leaves, as up to four digits. */ function nextExpiry(previous: string, raw: string, inputType: string) { let digits = raw.replace(NOT_DIGIT, "").slice(0, 4); // Deleting the " / " takes the month digit with it. if ( inputType === "deleteContentBackward" && previous.length === 2 && digits.length === 2 ) { digits = digits.slice(0, 1); } if (digits.length === 1 && Number(digits) > 1) { digits = `0${digits}`; } return digits; } /** Backspace in an empty field, or ← at its start, goes to the field before. */ function stepsBack(event: KeyboardEvent, value: string) { const input = event.currentTarget; const atStart = input.selectionStart === 0 && input.selectionEnd === 0; return ( (event.key === "Backspace" && value.length === 0) || (event.key === "ArrowLeft" && atStart) ); } /** Ghost digits show what's still to type, in the brand's grouping. */ function ghostsFor(spec: BrandSpec, typedLength: number) { let typed = typedLength; return spec.groups.map((size) => { const used = Math.min(size, typed); typed -= used; return "0".repeat(size - used); }); } /** The drawn copy of the number, under a clear input, so groups can fade and slide. */ function NumberMirror({ spec, groups, typedLength, collapsed, hideGhost, shift, slide, fade, groupRefs, }: { spec: BrandSpec; groups: string[]; typedLength: number; collapsed: boolean; hideGhost: boolean; shift: number; slide: Slide; fade: Fade; groupRefs: RefObject<(HTMLSpanElement | null)[]>; }) { const ghost = ghostsFor(spec, typedLength); return ( ); } function Hint({ error, onCvc, spec, fade, }: { error: string | null; onCvc: boolean; spec: BrandSpec; fade: Fade; }) { let key = "secure"; let body: ReactNode = ( <> Encrypted end to end ); if (error) { key = error; body = error; } else if (onCvc) { key = "cvc"; body = `${spec.cvc} digits, ${spec.brand === "amex" ? "on the front" : "on the back"} of your card`; } return (

{body}

); } const PAY_TONES = { off: "bg-zinc-100 text-zinc-400 dark:bg-zinc-900 dark:text-zinc-600", ready: "bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white", paid: "bg-emerald-600 text-white dark:bg-emerald-500 dark:text-emerald-950", }; function PayButton({ ready, status, money, fade, onPay, }: { ready: boolean; status: "idle" | "paying" | "paid"; money: string; fade: Fade; onPay: () => void; }) { let payTone = ready ? PAY_TONES.ready : PAY_TONES.off; if (status === "paid") { payTone = PAY_TONES.paid; } return ( ); } /** * A one-row card input for checkout. The number groups the way the brand * prints it, and once it checks out it slides away to its last four digits, * making room for expiry and security code in the same row. */ export default function CardField({ amount = 48, currency = "$", onPay, testMode = true, className, }: CardFieldProps) { const [number, setNumber] = useState(""); const [expiry, setExpiry] = useState(""); const [cvc, setCvc] = useState(""); const [editingNumber, setEditingNumber] = useState(true); const [focus, setFocus] = useState<"number" | "expiry" | "cvc" | null>(null); const [numberError, setNumberError] = useState(false); const [status, setStatus] = useState<"idle" | "paying" | "paid">("idle"); const reduceMotion = Boolean(useReducedMotion()); const shakeX = useMotionValue(0); const numberRef = useRef(null); const expiryRef = useRef(null); const cvcRef = useRef(null); const groupRefs = useRef<(HTMLSpanElement | null)[]>([]); const caretRef = useRef(null); const fillTimer = useRef>(undefined); const resetTimer = useRef>(undefined); const [shift, setShift] = useState(0); const spec = specFor(number); const full = lengthOf(spec); const numberDone = number.length === full && luhn(number); const collapsed = numberDone && !editingNumber; const groups = groupsOf(number, spec); const expiryError = expiryProblem(expiry); const expiryDone = expiry.length === 4 && !expiryError; const cvcDone = cvc.length === spec.cvc; const ready = numberDone && expiryDone && cvcDone; const error = numberError ? "That card number doesn't look right" : expiryError; useEffect( () => () => { clearTimeout(fillTimer.current); clearTimeout(resetTimer.current); }, [] ); // Keep the caret next to the digit it was after, across the spaces that // formatting adds and removes. useLayoutEffect(() => { const input = numberRef.current; if (caretRef.current === null || !input) { return; } const want = caretRef.current; caretRef.current = null; let seen = 0; let at = 0; const value = input.value; while (at < value.length && seen < want) { if (value[at] !== " ") { seen += 1; } at += 1; } input.setSelectionRange(at, at); }); // How far to slide the number so only its last group shows. useLayoutEffect(() => { if (!collapsed) { setShift(0); return; } const last = groupRefs.current[groups.length - 1]; setShift(last ? last.offsetLeft : 0); }, [collapsed, groups.length]); const collapse = () => { setEditingNumber(false); requestAnimationFrame(() => expiryRef.current?.focus()); }; const writeNumber = (digits: string, caretDigits: number | null) => { const nextSpec = specFor(digits); const clipped = digits.slice(0, lengthOf(nextSpec)); caretRef.current = caretDigits; setNumber(clipped); setStatus("idle"); const complete = clipped.length === lengthOf(nextSpec); const bad = complete && !luhn(clipped); setNumberError(bad); if (bad && !reduceMotion) { animate(shakeX, [0, -8, 7, -4, 2, 0], { duration: 0.36, ease: "easeOut", }); } else if (complete && !bad) { collapse(); } }; const onNumber = (event: ChangeEvent) => { const raw = event.target.value; const caret = event.target.selectionStart ?? raw.length; const before = raw.slice(0, caret).replace(NOT_DIGIT, "").length; writeNumber(raw.replace(NOT_DIGIT, ""), before); }; const onExpiry = (event: ChangeEvent) => { const digits = nextExpiry( expiry, event.target.value, (event.nativeEvent as InputEvent).inputType ); setExpiry(digits); setStatus("idle"); if (digits.length === 4 && !expiryProblem(digits)) { cvcRef.current?.focus(); } }; const onCvc = (event: ChangeEvent) => { setCvc(event.target.value.replace(NOT_DIGIT, "").slice(0, spec.cvc)); setStatus("idle"); }; const editNumber = () => { setEditingNumber(true); requestAnimationFrame(() => { const input = numberRef.current; if (input) { input.focus(); input.setSelectionRange(input.value.length, input.value.length); } }); }; const onExpiryKey = (event: KeyboardEvent) => { if (stepsBack(event, expiry)) { event.preventDefault(); editNumber(); } }; const onCvcKey = (event: KeyboardEvent) => { if (stepsBack(event, cvc)) { event.preventDefault(); const target = expiryRef.current; target?.focus(); target?.setSelectionRange(target.value.length, target.value.length); } if (event.key === "Enter" && ready) { pay(); } }; const onNumberBlur = () => { setFocus(null); if (numberDone) { setEditingNumber(false); } }; // Types the test card in like a person would, so you see the brand land // and the number slide away. const fillTestCard = () => { clearTimeout(fillTimer.current); setExpiry(""); setCvc(""); setEditingNumber(true); numberRef.current?.focus(); const year = String((new Date().getFullYear() + 3) % 100).padStart(2, "0"); const steps = [ ...[...TEST_CARD].map( (_, i) => () => writeNumber(TEST_CARD.slice(0, i + 1), i + 1) ), () => setExpiry("1"), () => setExpiry("12"), () => setExpiry(`12${year[0]}`), () => { setExpiry(`12${year}`); cvcRef.current?.focus(); }, () => setCvc("1"), () => setCvc("12"), () => setCvc("123"), ]; playSteps(steps, fillTimer, TEST_CARD.length - 1); }; const pay = async () => { if (!ready || status !== "idle") { return; } setStatus("paying"); const details = { brand: spec.brand, last4: number.slice(-4), expiry: `${expiry.slice(0, 2)}/${expiry.slice(2)}`, }; await (onPay?.(details) ?? new Promise((resolve) => setTimeout(resolve, 1100))); setStatus("paid"); clearTimeout(resetTimer.current); resetTimer.current = setTimeout(() => { setNumber(""); setExpiry(""); setCvc(""); setEditingNumber(true); setStatus("idle"); }, 2400); }; const slide = reduceMotion ? { duration: 0 } : { type: "spring" as const, duration: 0.45, bounce: 0 }; const fade = { duration: reduceMotion ? 0 : 0.2, ease: EASE_OUT }; const money = `${currency}${amount.toLocaleString("en-US", { minimumFractionDigits: 2 })}`; return (

Card {testMode && ( )}

{/* The number. A clear input over a drawn copy, so the groups can fade and slide while the caret stays native. */}

{number.length === 0 && focus !== "number" && ( Card number )} { setFocus("number"); setEditingNumber(true); }} onKeyDown={(event) => { // Tab from a finished number lands in expiry, not past the row. if (event.key === "Tab" && !event.shiftKey && numberDone) { event.preventDefault(); collapse(); } }} ref={numberRef} spellCheck={false} tabIndex={collapsed ? -1 : 0} value={groups.join(" ")} /> {collapsed && (

{collapsed && ( setFocus(null)} onChange={onExpiry} onFocus={() => setFocus("expiry")} onKeyDown={onExpiryKey} placeholder="MM / YY" ref={expiryRef} value={formatExpiry(expiry)} /> setFocus(null)} onChange={onCvc} onFocus={() => setFocus("cvc")} onKeyDown={onCvcKey} placeholder={spec.cvc === 4 ? "CVV" : "CVC"} ref={cvcRef} value={cvc} /> )}

); }

Card Field

On this page