Credit Card Type Detection with Form Validation using CardJs jQuery Plugin

cardjs co uk June 18, 2023

ADN
credit-card-type-detection-with-form-validation-using-cardjs-jquery-plugin

Live Preview Download

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

Variable Name Mask Pattern
CardJs.CREDIT_CARD_NUMBER_DEFAULT_MASK XXXX XXXX XXXX XXXX
CardJs.CREDIT_CARD_NUMBER_VISA_MASK XXXX XXXX XXXX XXXX
CardJs.CREDIT_CARD_NUMBER_MASTERCARD_MASK XXXX XXXX XXXX XXXX
CardJs.CREDIT_CARD_NUMBER_DISCOVER_MASK XXXX XXXX XXXX XXXX
CardJs.CREDIT_CARD_NUMBER_JCB_MASK XXXX XXXX XXXX XXXX
CardJs.CREDIT_CARD_NUMBER_AMEX_MASK XXXX XXXXXX XXXXX
CardJs.CREDIT_CARD_NUMBER_DINERS_MASK XXXX XXXX XXXX XX
// 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.

 

Next: Free Magazine WordPress Themes

also view other related posts,