Card Input

1"use client";
2 
3import * as React from "react";
4import { useControllableState } from "@/lib/use-controllable-state";
5import { cn } from "@/lib/utils";
6import { type CardBrand, CardBrandIcons } from "./card-icons";
7 
8interface CardInputContextValue {
9  brand: CardBrand;
10  setBrand: (brand: CardBrand) => void;
11}
12 
13const CardInputContext = React.createContext<CardInputContextValue | null>(
14  null,
15);
16 
17function useCardInputContext() {
18  return React.useContext(CardInputContext);
19}
20 
21function detectCardBrand(cardNumber: string): CardBrand {
22  const number = cardNumber.replace(/\s/g, "");
23 
24  if (!number) return "unknown";
25 
26  // Visa: starts with 4
27  if (/^4/.test(number)) return "visa";
28 
29  // Mastercard: starts with 51-55 or 2221-2720
30  if (/^5[1-5]/.test(number) || /^2[2-7]/.test(number)) return "mastercard";
31 
32  // Amex: starts with 34 or 37
33  if (/^3[47]/.test(number)) return "amex";
34 
35  // Discover: starts with 6011, 644-649, 65
36  if (/^6011|^64[4-9]|^65/.test(number)) return "discover";
37 
38  // Diners Club: starts with 36, 38, or 300-305
39  if (/^36|^38|^30[0-5]/.test(number)) return "diners";
40 
41  // JCB: starts with 35
42  if (/^35/.test(number)) return "jcb";
43 
44  // UnionPay: starts with 62
45  if (/^62/.test(number)) return "unionpay";
46 
47  return "unknown";
48}
49 
50function validateLuhn(cardNumber: string): boolean {
51  const number = cardNumber.replace(/\s/g, "");
52 
53  if (!number || !/^\d+$/.test(number)) return false;
54 
55  let sum = 0;
56  let isEven = false;
57 
58  // Loop through digits from right to left
59  for (let i = number.length - 1; i >= 0; i--) {
60    let digit = parseInt(number[i], 10);
61 
62    if (isEven) {
63      digit *= 2;
64      if (digit > 9) {
65        digit -= 9;
66      }
67    }
68 
69    sum += digit;
70    isEven = !isEven;
71  }
72 
73  return sum % 10 === 0;
74}
75 
76function isCardNumberComplete(cardNumber: string, brand: CardBrand): boolean {
77  const number = cardNumber.replace(/\s/g, "");
78  const maxLength = getCardMaxLength(brand);
79  return number.length === maxLength;
80}
81 
82function validateCardNumber(cardNumber: string): {
83  isValid: boolean;
84  isComplete: boolean;
85  brand: CardBrand;
86} {
87  const brand = detectCardBrand(cardNumber);
88  const isComplete = isCardNumberComplete(cardNumber, brand);
89  const isValid = isComplete && validateLuhn(cardNumber);
90 
91  return { isValid, isComplete, brand };
92}
93 
94function getCardMaxLength(brand: CardBrand): number {
95  // Amex has 15 digits, others have 16
96  return brand === "amex" ? 15 : 16;
97}
98 
99function getCvcMaxLength(brand: CardBrand): number {
100// … truncated