Skip to content
Credit Card input form with validation
Branch: master
Clone or download
colin-stannard Update to retain existing input attributes for expiry inputs (includi…
…ng form field name). Add new example (06) to demonstrate usage. Adds additional static functions to help reduce repetition of: element attribute checking - and - detaching an existing element (or create new element in it's place)
Latest commit 05980e8 Sep 17, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update to retain existing input attributes for expiry inputs (includi… Sep 18, 2017
img Update ReadMe Nov 30, 2016
src Update to retain existing input attributes for expiry inputs (includi… Sep 18, 2017
.gitignore
Gruntfile.js
LICENSE.md Update license to MIT for next release Jul 9, 2016
README.md Update reaadme Jul 12, 2017
bower.json Updated bower.json main key to point to the correct file Jan 26, 2017
card-js.min.css Update to use new image asset. Apr 10, 2016
card-js.min.js Update to retain existing input attributes for expiry inputs (includi… Sep 18, 2017
package.json Update readme to add NPM install instructions. Jan 15, 2017

README.md

CardJs

A simple, clean, credit card form for your website. Includes number formatting, validation and automatic card type detection.

View working example >

Example

By Zara 4 image compression service

Installation

  • Bower: bower install card-js --save
  • NPM: npm install card-js
  • Zip: Download

You will need to include both card-js.min.js and card-js.min.css into your web page.

Usage

For working examples of using CardJs, see the examples folder of this project.

Automatic Insertion

Any elements with the class card-js will be automatically converted into a basic credit card input with the expiry date and CVC check.

The easiest way to get started with CardJs is to insert the snippet of code:

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

Manual Insertion

If you wish to manually alter the fields used by CardJs to add additional classes or set the input field name or id etc, you can pre-populate the form fields as show below.

<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>

Reading Values

CardJs provides functionality allowing you to read the form field values directly with JavaScript. This can be useful if you wish to submit the values via Ajax.

Create a CardJs element and give it a unique id (in this example my-card)

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

The javascript below demonstrates how to read each value of the form into local variables.

var myCard = $('#my-card');

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');

Functions

To call a function on a CardJs element, follow the pattern below. Replace the text 'function' with the name of the function you wish to call.

$('#my-card').CardJs('function')

The functions available are listed below:

Function Description
cardNumber Get the card number entered
cardType Get the type of the card number entered
name Get the name entered
expiryMonth Get the expiry month entered
expiryYear Get the expiry year entered
cvc Get the CVC entered

CardType Function

The cardType function will return one of the following strings based on the card number entered. If the card type cannot be determined an empty string will be given instead.

Card Type
AMEX
Diners
Diners - Carte Blanche
Discover
JCB
Mastercard
Visa
Visa Electron

Static functions

If you just want to perform simple operations without the CardJs form, there are a number of static functions provided by the CardJs library that are made available.

Card Type from Card Number

var cardNumber = '4242 4242 4242 4242'; // Spacing is not important
var cardType = CardJs.cardTypeFromNumber(cardNumber);

Cleaning and Masking

// 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);

Masks

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

Card Expiry Validation

The expiry month can be in the range: 1 = January to 12 = December

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

The expiry month and year can be either and integer or a string.

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

The expiry year can be either 4 digits or 2 digits long.

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

License

CardJs is released under the MIT license. View license

You can’t perform that action at this time.