Credit Card Form With Validation And Card Type Detection - CardJs

CardJs is a jQuery plugin for creating a full-featured credit card form to provide a seamless checkout experience on your e-commerce website or online stores.

Features:

• Auto-formats the credit card number to improve readability and reduce errors.
• Detects the card type (Visa, Mastercard, Amex, JCB, Discover, etc) based on the card number.
• Easily integrates with Stripe.js or other payment platforms to process transactions.
• Validates each input to ensure the entered data is correct and valid.

See Also:

• 10 Best Credit Card Form Plugins To Increase Conversion Rates

How to use it:

1. Load jQuery library and the CardJs plugin's files in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link href="/path/to/card-js.min.css" rel="stylesheet" />
<script src="/path/to/card-js.min.js"></script>

2. Just add the card-js to the credit card form container and the plugin will take care of the rest.

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

<!-- OR with custom CSS classes -->
<div class="card-js">
  <input class="card-number my-custom-class" name="card-number">
  <input class="name" id="the-card-name-id" name="card-holders-name" placeholder="Name on card">
  <input class="expiry-month" name="expiry-month">
  <input class="expiry-year" name="expiry-year">
  <input class="cvc" name="cvc">
</div>

3. Determine whether to capture the card name.

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

4. Change the icon colors.

<div class="card-js" id="example" data-icon-colour="#ff0000"></div>

5. Get each value of the credit card form.

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

6. Detect the card type based on the card number.

CardJs.cardTypeFromNumber(cardNumber);

7. Clean and mask card numbers. Available mask rules:

Variable Name	Mask
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 cardNumberWithoutSpaces = CardJs.numbersOnlyString(cardNumber);
var formattedCardNumber = CardJs.applyFormatMask(cardNumberWithoutSpaces, CardJs.CREDIT_CARD_NUMBER_VISA_MASK);

8. Validate a card expiration date.

CardJs.isExpiryValid(month, year);

---

This awesome jQuery plugin is developed by CardJs. For more Advanced Usages, please check the demo page or visit the official website.