Instant Credit Card Validation

How does a credit card form validate numbers instantly, before even contacting the bank?

System Designbeginner

// interview question

How does a credit card form validate numbers instantly, before even contacting the bank?

Sample answer

Credit card numbers follow a mathematical pattern called the Luhn algorithm (also known as the mod-10 check). The form runs this algorithm entirely on the client side, in the browser, with zero network calls. Starting from the rightmost digit, you double every second digit. If doubling produces a number greater than 9, subtract 9. Then sum all the digits. If the total is divisible by 10, the number is structurally valid. This catches roughly 99% of accidental typos instantly. The first 1-6 digits (the BIN or IIN range) also identify the card network: Visa starts with 4, Mastercard with 51-55 or 2221-2720, Amex with 34 or 37. So the form can show the correct card logo before the user finishes typing.

Why this matters

This question tests whether candidates understand that not every validation requires a server round-trip. The Luhn check is a classic example of a checksum that provides instant feedback at minimal cost. It also opens the door to discussing client-side vs. server-side validation, UX responsiveness, and the layered approach to input validation (format check, then network check, then authorization). Interviewers want to see that you think about reducing latency by doing cheap checks first before expensive ones.

Code examples

Luhn algorithm implementation

javascript

function isValidCardNumber(number) {
  const digits = number.replace(/\s/g, '').split('').reverse();
  let sum = 0;

  for (let i = 0; i < digits.length; i++) {
    let digit = parseInt(digits[i], 10);

    // Double every second digit (odd index in reversed array)
    if (i % 2 === 1) {
      digit *= 2;
      if (digit > 9) digit -= 9;
    }

    sum += digit;
  }

  return sum % 10 === 0;
}

// Identify card network from first digits
function getCardNetwork(number) {
  const cleaned = number.replace(/\s/g, '');
  if (/^4/.test(cleaned)) return 'Visa';
  if (/^5[1-5]/.test(cleaned)) return 'Mastercard';
  if (/^3[47]/.test(cleaned)) return 'Amex';
  if (/^6011/.test(cleaned)) return 'Discover';
  return 'Unknown';
}

console.log(isValidCardNumber('4539 1488 0343 6467')); // true
console.log(getCardNetwork('4539 1488 0343 6467'));     // Visa

Luhn check in Python

python

def luhn_check(card_number: str) -> bool:
    digits = [int(d) for d in card_number.replace(' ', '')][::-1]
    total = 0
    for i, digit in enumerate(digits):
        if i % 2 == 1:
            digit *= 2
            if digit > 9:
                digit -= 9
        total += digit
    return total % 10 == 0

# Valid test number
print(luhn_check('4539 1488 0343 6467'))  # True
# One digit off
print(luhn_check('4539 1488 0343 6468'))  # False

Common mistakes to avoid

Saying the form contacts the bank or payment processor for every keystroke
Not knowing that the card number format itself carries information like the network and issuer
Forgetting to mention that client-side validation is a UX optimization, not a security measure, and server-side checks are still required
Overlooking that the Luhn algorithm only catches accidental errors, not intentional fraud

Likely follow-ups

What happens after the Luhn check passes and the user submits the form? Walk me through the full authorization flow.
Why is client-side validation alone never sufficient for security?
How would you validate an email address instantly without sending a verification email?
What other checksums or check digits are used in everyday systems (ISBNs, routing numbers, etc.)?

Answer out loud first, then check yourself against the model answer.

Practice all Junior questions More System Design questions

#system-design#validation#algorithms#client-side#performance

Also worth your time on this topic

Article

How Does It Work So Fast? The Engineering Behind Instant UI Responses

Credit card validation, username checks, autocomplete, URL shorteners - they all feel instant. Here is what is actually happening under the hood in each case.

Interview

Username Availability with Bloom Filters

Explain how you'd check username availability for a service with billions of users without hitting the database on every keystroke.

mid

Quiz

Back-of-the-Envelope Estimation Quiz

The napkin-math skill that makes or breaks a system design interview: turning users into QPS, data into storage, traffic into bandwidth, and knowing the latency numbers every engineer should have memorised.

16-22 minutes

Instant Credit Card Validation

More System Design interview questions

Also worth your time on this topic

How Does It Work So Fast? The Engineering Behind Instant UI Responses

Username Availability with Bloom Filters

Back-of-the-Envelope Estimation Quiz