Enhance Your Online Store’s Checkout Process With CardJs

CardJs is the vanilla JS version of the jQuery CardJs plugin, which helps you easily create user-friendly credit card forms to boost conversion rates on your e-commerce websites and online stores.

This library takes any element with the class “card-js” and transforms it into a functional credit card input field. This includes fields for the card number, expiry date, and CVC code.

It automatically formats the card number as the user types and validates the card number and expiry date to ensure they are in the correct format and haven’t expired.

CardJs supports various card types, including AMEX, Diners, Diners – Carte Blanche, Discover, JCB, Mastercard, Visa, and Visa Electron.

How to use it:

1. Install & download.

# NPM
$ npm install card-js

2. Load the necessary JavaScript and CSS files in the document.

<link href="/card-js.min.css" rel="stylesheet" />
<script src="/card-js.min.js"></script>

3. Create an empty DIV to hold your credit card form.

<div id="example" class="card-js"></div>

4. Initialize the credit card form and done.

const myForm = new CardJs('#example');

5. Retrieve the date from the credit card form your users entered:

<div id="example" class="card-js" data-capture-name="true"></div>

const myForm = $('#myForm');
var cardNumber = myForm.CardJs('cardNumber');
var cardType = myForm.CardJs('cardType');
var name = myForm.CardJs('name');
var expiryMonth = myForm.CardJs('expiryMonth');
var expiryYear = myForm.CardJs('expiryYear');
var cvc = myForm.CardJs('cvc');

6. API methods.

// get card type
const cardType = CardJs.cardTypeFromNumber(cardNumber);
// format & mask card numbers
// 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
const formatMask = CardJs.CREDIT_CARD_NUMBER_VISA_MASK;
const cardNumber = '444 4444444 44 44 44';
const cardNumberWithoutSpaces = CardJs.numbersOnlyString(cardNumber);
const formattedCardNumber = CardJs.applyFormatMask(cardNumberWithoutSpaces, formatMask);
// validate card expiry
CardJs.isExpiryValid(month, year);