"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type CardType = "visa" | "mastercard" | "unknown";

export interface CreditCardValue {
  cardNumber: string;
  expiry: string;
  cvv: string;
  type: CardType;
}

export interface CreditCardInputProps
  extends Omit<
    React.HTMLAttributes<HTMLDivElement>,
    "value" | "defaultValue" | "onChange"
  > {
  value?: CreditCardValue;
  defaultValue?: CreditCardValue;
  onChange?: (value: CreditCardValue) => void;
  label?: string;
}

const defaultValue: CreditCardValue = {
  cardNumber: "",
  expiry: "",
  cvv: "",
  type: "unknown",
};

const detectCardType = (digits: string): CardType => {
  if (/^4/.test(digits)) return "visa";
  if (/^(5[1-5]|2[2-7])/.test(digits)) return "mastercard";
  return "unknown";
};

const formatCardNumber = (digits: string) =>
  digits
    .replace(/\D/g, "")
    .slice(0, 19)
    .match(/.{1,4}/g)
    ?.join(" ") ?? "";

const formatExpiry = (digits: string) => {
  const cleaned = digits.replace(/\D/g, "").slice(0, 4);
  if (cleaned.length <= 2) return cleaned;
  return `${cleaned.slice(0, 2)}/${cleaned.slice(2)}`;
};

const formatCvv = (digits: string) => digits.replace(/\D/g, "").slice(0, 4);

const VisaIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 48 32" aria-hidden="true" {...props}>
    <rect width="48" height="32" rx="6" fill="var(--bg-muted)" />
    <rect x="6" y="8" width="36" height="16" rx="4" fill="var(--text-foreground)" />
    <text
      x="24"
      y="21"
      textAnchor="middle"
      fontSize="10"
      fontWeight="600"
      fill="var(--text-primary)"
      fontFamily="ui-sans-serif, system-ui"
    >
      VISA
    </text>
  </svg>
);

const MastercardIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 48 32" aria-hidden="true" {...props}>
    <rect width="48" height="32" rx="6" fill="var(--bg-muted)" />
    <circle cx="20" cy="16" r="8" fill="var(--text-muted-foreground)" />
    <circle cx="28" cy="16" r="8" fill="var(--text-primary)" />
    <text
      x="24"
      y="28"
      textAnchor="middle"
      fontSize="6"
      fontWeight="600"
      fill="var(--text-foreground)"
      fontFamily="ui-sans-serif, system-ui"
    >
      MC
    </text>
  </svg>
);

export function CreditCardInput({
  value,
  defaultValue: defaultValueProp = defaultValue,
  onChange,
  label,
  className,
  ...props
}: CreditCardInputProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValueProp);
  const currentValue = isControlled ? value ?? defaultValue : internalValue;
  const cardType = detectCardType(currentValue.cardNumber.replace(/\D/g, ""));

  const updateValue = (updates: Partial<CreditCardValue>) => {
    const nextValue: CreditCardValue = {
      ...currentValue,
      ...updates,
      type: updates.cardNumber
        ? detectCardType(updates.cardNumber.replace(/\D/g, ""))
        : cardType,
    };
    if (!isControlled) {
      setInternalValue(nextValue);
    }
    onChange?.(nextValue);
  };

  const handleNumberChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCardNumber(event.target.value);
    updateValue({ cardNumber: formatted });
  };

  const handleExpiryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    updateValue({ expiry: formatExpiry(event.target.value) });
  };

  const handleCvvChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    updateValue({ cvv: formatCvv(event.target.value) });
  };

  const Icon = cardType === "mastercard" ? MastercardIcon : VisaIcon;

  return (
    <div className={cn("w-full max-w-lg space-y-3", className)} {...props}>
      {label ? (
        <div className="text-sm font-medium text-foreground">{label}</div>
      ) : null}
      <div className="space-y-3">
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">Card number</label>
          <div className="relative">
            <input
              type="text"
              inputMode="numeric"
              value={currentValue.cardNumber}
              onChange={handleNumberChange}
              placeholder="1234 5678 9012 3456"
              className={cn(
                "h-10 w-full rounded-lg border border-border bg-card px-3 pr-14 text-sm text-foreground",
                "placeholder:text-muted-foreground focus-visible:outline-none"
              )}
            />
            <div className="pointer-events-none absolute right-2 top-1/2 h-8 w-12 -translate-y-1/2">
              <Icon className="h-full w-full" />
            </div>
          </div>
        </div>
        <div className="grid gap-3 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Expiry</label>
            <input
              type="text"
              inputMode="numeric"
              value={currentValue.expiry}
              onChange={handleExpiryChange}
              placeholder="MM/YY"
              className={cn(
                "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
                "placeholder:text-muted-foreground focus-visible:outline-none"
              )}
            />
          </div>
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">CVV</label>
            <input
              type="text"
              inputMode="numeric"
              value={currentValue.cvv}
              onChange={handleCvvChange}
              placeholder="123"
              className={cn(
                "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
                "placeholder:text-muted-foreground focus-visible:outline-none"
              )}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
Credit Card Input

Dependencies

Files

Installation
