A general purpose library for building credit card forms, validating inputs and formatting numbers.
Pull request Compare This branch is 197 commits behind stripe:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A general purpose library for building credit card forms, validating inputs and formatting numbers.

For example, you can make a input act like a credit card field (with number formatting, and length restriction):


Then, when say the payment form is submitted, you can validate the card number on the client-side like so:

var valid = $.payment.validateCardNumber($('input.cc-num').val());

if ( !valid ) {
  alert('Your card is not valid!');
  return false;

You can find a full demo here.

Supported card types are:

  • Visa
  • MasterCard
  • American Express
  • Discover
  • JCB
  • Diners Club
  • Maestro
  • Laster
  • UnionPay



Formats card numbers:

  • Including a space between every 4 digits
  • Restricts input to numbers
  • Limits to 16 numbers
  • American Express formatting support
  • Adds a class of the card type (i.e. 'visa') to the input




Formats card expiry:

  • Includes a / between the month and year
  • Restricts input to numbers
  • Restricts length




Formats card CVC:

  • Restricts length to 4 numbers
  • Restricts input to numbers




General numeric input restriction.




Validates a card number:

  • Validates numbers
  • Validates Luhn algorithm
  • Validates length


$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true

$.payment.validateCardExpiry(month, year)

Validates a card expiry:

  • Validates numbers
  • Validates in the future
  • Supports year shorthand


$.payment.validateCardExpiry('05', '20'); //=> true
$.payment.validateCardExpiry('05', '2015'); //=> true
$.payment.validateCardExpiry('05', '05'); //=> false

$.payment.validateCardCVC(cvc, type)

Validates a card CVC:

  • Validates number
  • Validates length to 4


$.payment.validateCardCVC('123'); //=> true
$.payment.validateCardCVC('123', 'amex'); //=> true
$.payment.validateCardCVC('1234', 'amex'); //=> true
$.payment.validateCardCVC('12344'); //=> false


Returns a card type. Either:

  • visa
  • mastercard
  • amex
  • dinersclub
  • maestro
  • laser
  • unionpay

The function will return null if the card type can't be determined.


$.payment.cardType('4242 4242 4242 4242'); //=> 'visa'

$.payment.cardExpiryVal(string) and $.fn.payment('cardExpiryVal')

Parses a credit card expiry in the form of MM/YYYY, returning an object containing the month and year. Shorthand years, such as 13 are also supported (and converted into the longhand, e.g. 2013).

$.payment.cardExpiryVal('03 / 2025'); //=> {month: 3: year: 2025}
$.payment.cardExpiryVal('05 / 04'); //=> {month: 5, year: 2004}
$('input.cc-exp').payment('cardExpiryVal') //=> {month: 4, year: 2020}

This function doesn't do any validation of the month or year, use $.payment.validateCardExpiry(month, year) for that.


Look in ./example/index.html


Run cake build

Run tests

Run mocha --compilers coffee:coffee-script

Autocomplete recommendations

We recommend you turn autocomplete on for credit card forms, except for the CVC field. You can do this by setting the autocomplete attribute:

<form autocomplete="on">
  <input class="cc-number">
  <input class="cc-cvc" autocomplete="off">

You should also mark up your fields using the Autocomplete Types spec. These are respected by a number of browsers, including Chrome.

<input type="text" class="cc-number" pattern="\d*" autocompletetype="cc-number" placeholder="Card number" required>

Set autocompletetype to cc-number for credit card numbers, cc-exp for credit card expiry and cc-csc for the CVC (security code).

Mobile recommendations

We recommend you set the pattern attribute which will cause the numeric keyboard to be displayed on mobiles:

<input class="cc-number" pattern="\d*">

You may have to turn off HTML5 validation (using the novalidate form attribute) when using this pattern, as it won't match space formatting.