Credit Card Verifier Examples

Live Demo

Test Card Numbers

Use these test numbers to see how the validator works:

Valid Test Numbers (Pass Luhn Check)

Invalid Test Numbers (Fail Luhn Check)

Implementation Examples

Basic HTML Form

<form action="/cgi-bin/ccver.pl" method="post">
    <label for="cardnumber">Credit Card Number:</label>
    <input type="text" id="cardnumber" name="cardnumber" maxlength="19">
    <button type="submit">Validate</button>
</form>

With Card Type Selector

<form action="/cgi-bin/ccver.pl" method="post">
    <div>
        <label for="cardtype">Card Type:</label>
        <select id="cardtype" name="cardtype">
            <option value="visa">Visa</option>
            <option value="mastercard">MasterCard</option>
            <option value="amex">American Express</option>
            <option value="discover">Discover</option>
        </select>
    </div>
    <div>
        <label for="cardnumber">Card Number:</label>
        <input type="text" id="cardnumber" name="cardnumber" maxlength="19">
    </div>
    <button type="submit">Validate</button>
</form>

With Client-Side Formatting

<form action="/cgi-bin/ccver.pl" method="post">
    <label for="cardnumber">Credit Card Number:</label>
    <input type="text" id="cardnumber" name="cardnumber"
           placeholder="1234 5678 9012 3456" maxlength="19">
    <button type="submit">Validate</button>
</form>

<script>
// Auto-format card number with spaces
document.getElementById('cardnumber').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\s/g, '');
    let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
    e.target.value = formattedValue;
});
</script>

AJAX Validation Example

<form id="cardForm">
    <label for="cardnumber">Card Number:</label>
    <input type="text" id="cardnumber" name="cardnumber">
    <button type="button" onclick="validateCard()">Validate</button>
    <div id="result"></div>
</form>

<script>
function validateCard() {
    const cardNumber = document.getElementById('cardnumber').value;

    fetch('/cgi-bin/ccver.pl', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'cardnumber=' + encodeURIComponent(cardNumber)
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById('result').innerHTML = data;
    })
    .catch(error => {
        document.getElementById('result').innerHTML =
            '<span class="error">Validation failed</span>';
    });
}
</script>

Practical Use Cases

How the Luhn Algorithm Works