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):
$('input.cc-num').payment('formatCardNumber');
Then, when the payment form is submitted, you can validate the card number on the client-side:
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
- Laser
- UnionPay
Formats card numbers:
- Includes a space between every 4 digits
- Restricts input to numbers
- Limits to 16 numbers
- Supports American Express formatting
- Adds a class of the card type (e.g. 'visa') to the input
Example:
$('input.cc-num').payment('formatCardNumber');
Formats card expiry:
- Includes a
/
between the month and year - Restricts input to numbers
- Restricts length
Example:
$('input.cc-exp').payment('formatCardExpiry');
Formats card CVC:
- Restricts length to 4 numbers
- Restricts input to numbers
Example:
$('input.cc-cvc').payment('formatCardCVC');
General numeric input restriction.
Example:
$('[data-numeric]').payment('restrictNumeric');
Validates a card number:
- Validates numbers
- Validates Luhn algorithm
- Validates length
Example:
$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true
Validates a card expiry:
- Validates numbers
- Validates in the future
- Supports year shorthand
Example:
$.payment.validateCardExpiry('05', '20'); //=> true
$.payment.validateCardExpiry('05', '2015'); //=> true
$.payment.validateCardExpiry('05', '05'); //=> false
Validates a card CVC:
- Validates number
- Validates length to 4
Example:
$.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
discover
amex
jcb
dinersclub
maestro
laser
unionpay
The function will return null
if the card type can't be determined.
Example:
$.payment.cardType('4242 4242 4242 4242'); //=> 'visa'
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 perform any validation of the month or year; use $.payment.validateCardExpiry(month, year)
for that.
Look in ./example/index.html
Run cake build
Run cake test
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">
</form>
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).
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.