June 15, 2020

How to Detect Credit Card Type in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to detect credit card type in javascript. If you have ever made a purchase online, then you know there is always a requirement for a credit card to make a payment. Most of the websites use third-party services to handle the payment such as Stripe, Paypal, etc.

As you know, there are different types of credit cards such as Visa, Master Card, American Express, etc. As soon as you enter your credit card number in the input field, the credit card type is instantly displayed on the right-hand side.

Detecting a credit card type solely by a credit card number can be tough and that is when third-party libraries come into the picture such as Cleave JS. It is mainly used for formatting date, time, credit card, and phone numbers. Please check out the documentation page to learn more about it.

In the following example, we will enter a credit card number in the input field. Upon click of a button, we will detect the credit card type using Cleave JS and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Check” and the h1 element has “Result” as innerText.
We have added a CDN link of minified Cleave JS at the bottom in the HTML using a script tag.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text">
        <button>Check</button>
        <h1>Result</h1>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.5.8/cleave.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button, input {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the button element and h1 element using the document.querySelector() method and stored them in the btnCheck and result variables respectively.
We have a global variable cardType which is undefined initially.
We have created an instance of Cleave JS using Cleave() constructor. This constructor takes 2 parameters. The first parameter is the CSS selector of the field where the user will enter the credit card number. In our case, it is an input element. The second parameter is an options object. The first option creditCard is set to true which means we are going to use the credit card formatting and detection feature of Cleave JS. The second option delimiter is set to "-" which means the numbers entered in the input field should be separated by “-“. The method onCreditCardTypeChanged() will be executed whenever there is a change in the credit card number. The type parameter will give us the type of the credit card and we are assigning it to the cardType variable.

We have attached a click event listener to the button element.
In the event handler function, we are creating a template string and displaying it in the h1 element using the innerText property. The getFormattedValue() method will return the formatted credit card number.

let btnCheck = document.querySelector('button');
let result = document.querySelector('h1');

let cardType;

var cleave = new Cleave('input', {
    creditCard: true,
    delimiter: '-',
    onCreditCardTypeChanged: type => cardType = type
});


btnCheck.addEventListener('click', () => {
    result.innerText = `${cleave.getFormattedValue()} - ${cardType}`;
});

You May Also Like: