{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-checkout", "type": "registry:component", "title": "Morphing Checkout Flow", "description": "A three-step card payment with a height:auto illusion, caret-safe masking, a 3D flip, and a FLIP pay button.", "dependencies": [ "motion" ], "files": [ { "path": "registry/lab/morphing-checkout/morphing-checkout.tsx", "type": "registry:component", "target": "@components/lab/morphing-checkout.tsx", "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { MotionConfig, motion, useReducedMotion } from \"motion/react\";\n\n// Morphing checkout flow - a three-step card payment (card → billing → confirm)\n// where ONE container appears to animate `height: auto` between steps.\n//\n// The body's height is always an explicit px measured off the active panel\n// (useLayoutEffect + ResizeObserver); motion eases it. Everything else is\n// transform/opacity: the outgoing step exits softly while the incoming one's\n// fields cascade in, direction-aware. The other hard constraints:\n//\n// · CARET-PRESERVING MASK. The number re-formats every keystroke (4-4-4-4, or\n// 4-6-5 for an Amex); the caret is put back by counting the DIGITS before it\n// (the only characters the user owns), so it never jumps.\n// · LUHN. The checksum validated live - a full number that fails shakes; one\n// that passes gets a quiet green check.\n// · 3D FLIP. Two stacked faces under perspective/preserve-3d/backface-hidden;\n// focusing the CVC rotates the card 180° (Amex prints its code on the FRONT,\n// so an Amex never flips - the detection is real).\n// · PAY MORPH. Paying FLIPs the button's width to a circle (measured px → rem,\n// imperative) while label → spinner → drawn check cross-fade. A decline\n// lands a red drawn ✕ with one shake, then eases back for another try.\n//\n// Pass `onPay` to run the real charge. Animation via motion/react; honours\n// prefers-reduced-motion. Plain Tailwind only - no theme tokens or custom\n// classes required.\n\nconst EASE = [0.22, 1, 0.36, 1] as const;\nconst EASE_ICON = [0.2, 0, 0, 1] as const;\nconst STEP_NAMES = [\"card\", \"billing\", \"confirm\", \"paid\"];\n\nconst BRANDS: Record = {\n visa: { label: \"Visa\", length: 16, cvc: 3, cvcName: \"CVC\", groups: [4, 4, 4, 4] },\n mastercard: { label: \"Mastercard\", length: 16, cvc: 3, cvcName: \"CVC\", groups: [4, 4, 4, 4] },\n amex: { label: \"Amex\", length: 15, cvc: 4, cvcName: \"CID\", groups: [4, 6, 5] },\n unknown: { label: \"Card\", length: 16, cvc: 3, cvcName: \"CVC\", groups: [4, 4, 4, 4] },\n};\n\nexport interface CheckoutState {\n step: string;\n brand: string;\n number: string;\n side: string;\n status: string;\n height: number | null;\n}\n\nconst detectBrand = (d: string) => (/^3[47]/.test(d) ? \"amex\" : /^4/.test(d) ? \"visa\" : /^(5[1-5]|2[2-7])/.test(d) ? \"mastercard\" : \"unknown\");\n\nfunction luhnValid(digits: string) {\n let sum = 0;\n for (let i = 0; i < digits.length; i++) {\n let d = +digits[digits.length - 1 - i];\n if (i % 2 === 1) {\n d *= 2;\n if (d > 9) d -= 9;\n }\n sum += d;\n }\n return digits.length > 0 && sum % 10 === 0;\n}\n\nfunction formatGroups(digits: string, groups: number[]) {\n const out: string[] = [];\n let i = 0;\n for (const size of groups) {\n if (i >= digits.length) break;\n out.push(digits.slice(i, i + size));\n i += size;\n }\n return out.join(\" \");\n}\n\nconst formatExpiry = (d: string) => (d.length <= 1 ? d : `${d.slice(0, 2)}/${d.slice(2)}`);\n\nfunction caretAfterDigit(masked: string, n: number) {\n if (n <= 0) return 0;\n let seen = 0;\n for (let i = 0; i < masked.length; i++) {\n if (/\\d/.test(masked[i])) {\n seen += 1;\n if (seen === n) return i + 1;\n }\n }\n return masked.length;\n}\n\nfunction hopSeparators(event: React.KeyboardEvent) {\n const el = event.currentTarget;\n const { selectionStart, selectionEnd, value } = el;\n if (selectionStart == null || selectionStart !== selectionEnd) return;\n if (event.key === \"Backspace\" && /\\D/.test(value[selectionStart - 1] ?? \"\")) el.setSelectionRange(selectionStart - 1, selectionStart - 1);\n else if (event.key === \"Delete\" && /\\D/.test(value[selectionStart] ?? \"\")) el.setSelectionRange(selectionStart + 1, selectionStart + 1);\n}\n\nconst reducedMotion = () => typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst INPUT =\n \"w-full h-10 px-3 rounded-lg bg-background text-foreground text-sm shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_-1px_rgba(0,0,0,0.06),0_2px_4px_0_rgba(0,0,0,0.04)] [transition:box-shadow_200ms_ease] placeholder:text-muted-foreground/70 hover:shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_1px_2px_-1px_rgba(0,0,0,0.08),0_2px_4px_0_rgba(0,0,0,0.06)] focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-ring aria-[invalid=true]:ring aria-[invalid=true]:ring-destructive/40 aria-[invalid=true]:shadow-[0_1px_2px_-1px_rgba(220,38,38,0.12)] aria-[invalid=true]:focus:outline-destructive\";\nconst LABEL = \"text-[0.6875rem] font-medium tracking-[0.02em] text-muted-foreground\";\n\nexport default function MorphingCheckout({\n price = \"$149.00\",\n morph = true,\n inspect = false,\n prefill = null,\n outcome = \"success\",\n indicator = \"tabs\",\n onPay,\n onStateChange,\n}: {\n price?: string;\n morph?: boolean;\n inspect?: boolean;\n prefill?: { key: number; number: string } | null;\n /** \"success\" | \"decline\" - or return it from onPay. */\n outcome?: \"success\" | \"decline\";\n indicator?: \"tabs\" | \"bar\";\n /** Your real charge. Return \"decline\" to fail; anything else succeeds. */\n onPay?: (details: { number: string; expiry: string; cvc: string; name: string }) => Promise<\"success\" | \"decline\"> | void;\n onStateChange?: (state: CheckoutState) => void;\n}) {\n const [step, setStep] = useState(0);\n const [leaving, setLeaving] = useState<{ step: number; dir: number } | null>(null);\n const [dir, setDir] = useState(1);\n const [animate, setAnimate] = useState(false);\n const [maxStep, setMaxStep] = useState(0);\n\n const [number, setNumber] = useState(\"\");\n const [expiry, setExpiry] = useState(\"\");\n const [cvcRaw, setCvcRaw] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [address, setAddress] = useState(\"\");\n const [city, setCity] = useState(\"\");\n const [zip, setZip] = useState(\"\");\n\n const [cvcFocus, setCvcFocus] = useState(false);\n const [status, setStatus] = useState<\"idle\" | \"processing\" | \"failed\" | \"paid\">(\"idle\");\n const [payError, setPayError] = useState(null);\n const [errors, setErrors] = useState>({});\n const [navShake, setNavShake] = useState(false); // primary button shakes on failed validation, resets when done\n const [numShake, setNumShake] = useState(false); // number field shakes on a failed checksum, resets when done\n const [bodyH, setBodyH] = useState(null);\n\n const panelRef = useRef(null);\n const payRef = useRef(null);\n const payIdleW = useRef(0);\n const caretRef = useRef<{ node: HTMLInputElement; pos: number } | null>(null);\n const leaveTimer = useRef(0);\n const timersRef = useRef([]);\n const bodyFirstRef = useRef(true);\n const reduced = useReducedMotion();\n\n const brand = detectBrand(number);\n const spec = BRANDS[brand];\n const cvc = cvcRaw.slice(0, spec.cvc);\n const last4 = number.slice(-4);\n const numberComplete = number.length === spec.length;\n const numberValid = numberComplete && luhnValid(number);\n const numberState = number.length === 0 ? \"empty\" : numberValid ? \"valid\" : numberComplete ? \"fails Luhn\" : \"incomplete\";\n const expiryValid = (() => {\n if (expiry.length !== 4) return false;\n const mm = +expiry.slice(0, 2);\n if (mm < 1 || mm > 12) return false;\n const now = new Date();\n const year = 2000 + +expiry.slice(2);\n return year > now.getFullYear() || (year === now.getFullYear() && mm >= now.getMonth() + 1);\n })();\n const flipped = cvcFocus && brand !== \"amex\" && status === \"idle\";\n const cascade = { animate, dir, reduced };\n\n const clearError = (key: string) => setErrors((prev) => (prev[key] ? { ...prev, [key]: null } : prev));\n\n function navigate(next: number, { force = false } = {}) {\n if (next === step) return;\n if (!force && status !== \"idle\") return;\n const d = next > step ? 1 : -1;\n if (morph && !reducedMotion()) {\n setLeaving({ step, dir: d });\n window.clearTimeout(leaveTimer.current);\n leaveTimer.current = window.setTimeout(() => setLeaving(null), 240);\n setAnimate(true);\n } else {\n setLeaving(null);\n setAnimate(false);\n }\n setDir(d);\n setStep(next);\n setMaxStep((m) => Math.max(m, next));\n requestAnimationFrame(() => panelRef.current?.querySelector(\"input\")?.focus({ preventScroll: true }));\n }\n const navigateRef = useRef(navigate);\n navigateRef.current = navigate;\n\n useLayoutEffect(() => {\n const panel = panelRef.current;\n if (!panel) return undefined;\n const measure = () => setBodyH(panel.offsetHeight);\n measure();\n requestAnimationFrame(() => {\n bodyFirstRef.current = false;\n });\n const observer = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(measure) : null;\n observer?.observe(panel);\n return () => observer?.disconnect();\n }, [step]);\n\n useLayoutEffect(() => {\n const pending = caretRef.current;\n if (!pending) return;\n caretRef.current = null;\n if (pending.node && document.activeElement === pending.node) pending.node.setSelectionRange(pending.pos, pending.pos);\n });\n\n function handleNumberChange(event: React.ChangeEvent) {\n const el = event.target;\n const digitsBefore = el.value.slice(0, el.selectionStart ?? 0).replace(/\\D/g, \"\").length;\n let digits = el.value.replace(/\\D/g, \"\");\n const nextBrand = detectBrand(digits);\n digits = digits.slice(0, BRANDS[nextBrand].length);\n const masked = formatGroups(digits, BRANDS[nextBrand].groups);\n caretRef.current = { node: el, pos: caretAfterDigit(masked, Math.min(digitsBefore, digits.length)) };\n setNumber(digits);\n clearError(\"number\");\n }\n\n function handleExpiryChange(event: React.ChangeEvent) {\n const el = event.target;\n let digitsBefore = el.value.slice(0, el.selectionStart ?? 0).replace(/\\D/g, \"\").length;\n let digits = el.value.replace(/\\D/g, \"\").slice(0, 4);\n if (digits.length === 1 && digits > \"1\") {\n digits = `0${digits}`;\n digitsBefore += 1;\n }\n const masked = formatExpiry(digits);\n caretRef.current = { node: el, pos: caretAfterDigit(masked, Math.min(digitsBefore, digits.length)) };\n setExpiry(digits);\n clearError(\"expiry\");\n }\n\n useEffect(() => {\n if (numberComplete && !numberValid) {\n setErrors((prev) => ({ ...prev, number: \"This number fails\" }));\n setNumShake(true);\n }\n }, [numberComplete, numberValid]);\n\n function validateStep(current: number) {\n const errs: Record = {};\n if (current === 0) {\n if (!numberValid) errs.number = numberComplete ? \"This number fails\" : \"Enter the full card number\";\n if (!expiryValid) errs.expiry = \"Enter a valid future date\";\n if (cvc.length !== spec.cvc) errs.cvc = `Enter the ${spec.cvc}-digit ${spec.cvcName}`;\n }\n if (current === 1) {\n if (!name.trim()) errs.name = \"Required\";\n if (!address.trim()) errs.address = \"Required\";\n if (!city.trim()) errs.city = \"Required\";\n if (!zip.trim()) errs.zip = \"Required\";\n }\n return errs;\n }\n\n function handlePrimary() {\n if (status !== \"idle\") return;\n if (step === 2) {\n pay();\n return;\n }\n const errs = validateStep(step);\n if (Object.values(errs).some(Boolean)) {\n setErrors((prev) => ({ ...prev, ...errs }));\n setNavShake(true);\n requestAnimationFrame(() => panelRef.current?.querySelector('[aria-invalid=\"true\"]')?.focus({ preventScroll: true }));\n return;\n }\n navigate(step + 1);\n }\n\n async function pay() {\n const btn = payRef.current;\n if (btn) {\n payIdleW.current = btn.getBoundingClientRect().width;\n btn.style.width = `${payIdleW.current}px`;\n void btn.offsetWidth;\n btn.style.width = \"2.75rem\";\n }\n setPayError(null);\n setStatus(\"processing\");\n const verdict = (await Promise.resolve(onPay?.({ number, expiry, cvc, name }))) ?? outcome;\n timersRef.current.push(\n window.setTimeout(() => {\n if (verdict === \"decline\") {\n setStatus(\"failed\");\n timersRef.current.push(\n window.setTimeout(() => {\n if (payRef.current) payRef.current.style.width = `${payIdleW.current}px`;\n setStatus(\"idle\");\n setPayError(\"Your card was declined. Try a different card.\");\n timersRef.current.push(\n window.setTimeout(() => {\n if (payRef.current) payRef.current.style.width = \"\";\n }, 450),\n );\n }, 1400),\n );\n return;\n }\n setStatus(\"paid\");\n timersRef.current.push(window.setTimeout(() => navigateRef.current(3, { force: true }), 1000));\n }, 1500),\n );\n }\n\n function reset() {\n timersRef.current.forEach(window.clearTimeout);\n timersRef.current = [];\n if (payRef.current) payRef.current.style.width = \"\";\n setStatus(\"idle\");\n setPayError(null);\n setNumber(\"\");\n setExpiry(\"\");\n setCvcRaw(\"\");\n setName(\"\");\n setAddress(\"\");\n setCity(\"\");\n setZip(\"\");\n setErrors({});\n setMaxStep(0);\n navigate(0, { force: true });\n }\n\n useEffect(() => {\n if (!prefill?.key) return;\n timersRef.current.forEach(window.clearTimeout);\n timersRef.current = [];\n if (payRef.current) payRef.current.style.width = \"\";\n const digits = String(prefill.number ?? \"\").replace(/\\D/g, \"\");\n const b = detectBrand(digits);\n setStatus(\"idle\");\n setPayError(null);\n setNumber(digits.slice(0, BRANDS[b].length));\n setExpiry(\"1229\");\n setCvcRaw(b === \"amex\" ? \"4424\" : \"442\");\n setErrors({});\n navigateRef.current(0, { force: true });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [prefill?.key]);\n\n useEffect(\n () => () => {\n timersRef.current.forEach(window.clearTimeout);\n window.clearTimeout(leaveTimer.current);\n },\n [],\n );\n\n useEffect(() => {\n onStateChange?.({\n step: STEP_NAMES[step],\n brand,\n number: numberState,\n side: flipped ? \"back\" : \"front\",\n status,\n height: bodyH == null ? null : Math.round(bodyH),\n });\n }, [step, brand, numberState, flipped, status, bodyH, onStateChange]);\n\n function renderStep(s: number, ghost = false) {\n const id = (base: string) => (ghost ? `${base}-ghost` : base);\n if (s === 0) {\n return (\n <>\n \n \n { if (numShake && !ghost) setNumShake(false); }}>\n \n \n \n \n {inspect && !ghost && groups {spec.groups.join(\"-\")} · caret by digit index}\n \n {errors.number && {errors.number}}\n \n \n
\n \n \n {errors.expiry && {errors.expiry}}\n
\n
\n \n { setCvcRaw(e.target.value.replace(/\\D/g, \"\").slice(0, spec.cvc)); clearError(\"cvc\"); }} onFocus={() => setCvcFocus(true)} onBlur={() => setCvcFocus(false)} placeholder={\"•\".repeat(spec.cvc)} inputMode=\"numeric\" autoComplete=\"cc-csc\" spellCheck={false} aria-invalid={errors.cvc ? \"true\" : undefined} aria-describedby={errors.cvc ? id(\"mc-cvc-err\") : undefined} />\n {errors.cvc && {errors.cvc}}\n
\n \n \n );\n }\n if (s === 1) {\n const field = (i: number, key: string, label: string, val: string, set: (v: string) => void, placeholder: string, ac: string, numeric = false) => (\n \n \n { set(e.target.value); clearError(key); }} placeholder={placeholder} autoComplete={ac} spellCheck={false} aria-invalid={errors[key] ? \"true\" : undefined} />\n {errors[key] && {errors[key]}}\n \n );\n return (\n <>\n {field(0, \"name\", \"Name on card\", name, setName, \"Ada Lovelace\", \"cc-name\")}\n {field(1, \"address\", \"Street address\", address, setAddress, \"42 Analytical Engine Way\", \"street-address\")}\n \n
\n \n { setCity(e.target.value); clearError(\"city\"); }} placeholder=\"London\" autoComplete=\"address-level2\" spellCheck={false} aria-invalid={errors.city ? \"true\" : undefined} />\n {errors.city && {errors.city}}\n
\n
\n \n { setZip(e.target.value); clearError(\"zip\"); }} placeholder=\"10118\" autoComplete=\"postal-code\" spellCheck={false} aria-invalid={errors.zip ? \"true\" : undefined} />\n {errors.zip && {errors.zip}}\n
\n \n \n );\n }\n if (s === 2) {\n return (\n <>\n \n
\n {spec.label} •••• {last4}\n {formatExpiry(expiry)}\n {name.trim()}\n {address.trim()}, {city.trim()} {zip.trim()}\n {price}\n
\n \n

Demo checkout - nothing is charged.

\n \n );\n }\n return (\n <>\n \n
\n

Payment complete

\n

Charged {price} to {spec.label} •••• {last4}

\n
\n \n

A receipt is on its way to your inbox. Probably.

\n \n );\n }\n\n const tabs = [\"Card\", \"Billing\", \"Confirm\"];\n const p = (Math.min(step, 2) + 1) / 3;\n\n return (\n \n
\n
\n {/* Live preview - presentational, hidden from AT. */}\n
\n \n
\n
\n \n \n \n VISA\n \n AMEX\n \n
\n {brand === \"amex\" && (\n
\n CID\n \n
\n )}\n
\n {(() => {\n let consumed = 0;\n return spec.groups.map((size, gi) => {\n const chunk = number.slice(consumed, consumed + size).padEnd(size, \"•\");\n consumed += size;\n return ;\n });\n })()}\n
\n
\n \n \n Valid thru\n \n \n
\n
\n
\n
\n
\n \n
\n

Security code

\n
\n \n {inspect && (\n <>\n \n rotateY({flipped ? \"180\" : \"0\"}deg) · preserve-3d\n \n )}\n
\n\n {/* Step indicator */}\n {indicator === \"bar\" ? (\n \n ) : (\n \n )}\n\n \n {leaving && (\n \n {renderStep(leaving.step, true)}\n \n )}\n
\n {renderStep(step)}\n
\n {inspect && (\n <>\n \n height: {bodyH == null ? \"auto\" : `${Math.round(bodyH)}px`} · measured → eased\n \n )}\n \n\n
\n (step === 3 ? reset() : navigate(step - 1))}\n >\n {step === 3 ? \"Start over\" : \"Back\"}\n \n setNavShake(false)}>\n \n \n {step >= 2 ? (<> Pay {price}) : \"Continue\"}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {inspect && status !== \"idle\" && width: measured px → 2.75rem}\n
\n\n {payError && {payError}}\n
\n\n

\n {status === \"processing\" ? \"Processing payment\" : status === \"paid\" ? \"Payment complete\" : status === \"failed\" ? \"Payment declined\" : `Step ${Math.min(step, 2) + 1} of 3: ${[\"card details\", \"billing address\", \"confirm and pay\"][Math.min(step, 2)]}`}\n

\n
\n \n );\n}\n\n// Direction-aware field cascade. Motion when animating, plain otherwise.\n// Module-level so its identity is stable across renders - nesting it inside the\n// component would create a new function every keystroke, remounting the inputs\n// and stealing focus.\nfunction StepChild({\n i,\n cascade,\n className,\n children,\n}: {\n i: number;\n cascade: { animate: boolean; dir: number; reduced: boolean | null };\n className?: string;\n children: ReactNode;\n}) {\n if (!cascade.animate || cascade.reduced) return
{children}
;\n return (\n \n {children}\n \n );\n}\n\nfunction ErrorMsg({ id, children }: { id?: string; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nconst MINI = \"text-[0.5rem] font-medium tracking-[0.1em] uppercase text-black/40\";\n\nfunction BrandMark({ active, className = \"\", children }: { active: boolean; className?: string; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nfunction PayIcon({ show, children }: { show: boolean; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nfunction SumRow({ dt, total, children }: { dt: string; total?: boolean; children: ReactNode }) {\n return (\n
\n
{dt}
\n
{children}
\n
\n );\n}\n\nfunction SpecLabel({ className = \"\", children }: { className?: string; children: ReactNode }) {\n return {children};\n}\n\n// Embossed card repaints per character: each span keyed by position + value, so\n// a changed character remounts and pops in while tabular neighbours hold still.\nfunction PopChars({ value }: { value: string }) {\n return (\n <>\n {value.split(\"\").map((char, index) => {\n const dim = char === \"•\";\n if (dim) return {char};\n return (\n \n {char === \" \" ? \" \" : char}\n \n );\n })}\n \n );\n}\n\nfunction GenericCardIcon() { return ; }\nfunction ValidIcon() { return ; }\nfunction LockIcon() { return ; }\n" } ] }