Credit Card Type Detection with Form Validation using CardJs jQuery Plugin

CardJs is a jQuery plugin that allows you to create a full-featured credit card form for your e-commerce website or online store to provide a seamless checkout experience.

CardJs Features

• Based on the card number, it determines the card type (Visa, Mastercard, American Express, JCB, Discover, and so on).
• Easily integrates with Wise, Stripe or other payment platforms.
• Credit card number is automatically formatted to improve readability and reduce errors.
• Validates each input to ensure that the data entered is correct and valid.

CardJs Implementation

In your HTML document, include the jQuery library and the CardJs jQuery plugin files.

Simply add the class card-js to the credit card form container, and the plugin will handle the rest.

Determine whether to capture the card name.

Change the icon colors.

Get credit card form values

var myCard = $('#devstocDemo');
var cardNumber = myCard.CardJs('cardNumber');
var cardType = myCard.CardJs('cardType');
var name = myCard.CardJs('cardHolderName');
var expiryMonth = myCard.CardJs('expiryMonth');
var expiryYear = myCard.CardJs('expiryYear');
var cvc = myCard.CardJs('cvcNumber');

Detect the card type by the entered card number.

CardJs.cardTypeFromNumber(cardNumber);

Input Mask card numbers.

Available mask patterns

// var formatMask = 'XXXX XXXX XXXX XXXX'; // You can manually define an input mask
// var formatMask = 'XX+X X XXXX XXXX XXXX'; // You can add characters other than spaces to the mask
var formatMask = CardJs.CREDIT_CARD_NUMBER_VISA_MASK; // Or use a standard mask.
var cardNumber = '424 2424242 42   42 42';
var cardNumberWithoutSpaces = CardJs.numbersOnlyString(cardNumber);
var formattedCardNumber = CardJs.applyFormatMask(cardNumberWithoutSpaces, formatMask);

Validate Credit card expiration date.

var month = "3";
var year = "19";
var valid = CardJs.isExpiryValid(month, year);

Visit the official Documentation page to learn more about CardJs features.