A general purpose library for building credit card forms, validating inputs and formatting numbers.
jquery.payment is deprecated. We recommend that you use either Stripe Checkout or Stripe Elements to collect card information.
We will patch jquery.payment for major critical/security issues, but we won't be adding new features.
You can make an 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:
(Additional card types are supported by extending the $.payment.cards
array.)
Formats card numbers:
Example:
$('input.cc-num').payment('formatCardNumber');
Formats card expiry:
/
between the month and yearExample:
$('input.cc-exp').payment('formatCardExpiry');
Formats card CVC:
Example:
$('input.cc-cvc').payment('formatCardCVC');
General numeric input restriction.
Example:
$('[data-numeric]').payment('restrictNumeric');
Validates a card number:
Example:
$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true
Validates a card expiry:
Example:
$.payment.validateCardExpiry('05', '20'); //=> true
$.payment.validateCardExpiry('05', '2015'); //=> true
$.payment.validateCardExpiry('05', '05'); //=> false
Validates a card CVC:
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
amex
dinersclub
discover
unionpay
jcb
maestro
forbrugsforeningen
dankort
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.
Array of objects that describe valid card types. Each object should contain the following fields:
{
// Card type, as returned by $.payment.cardType.
type: 'mastercard',
// Array of prefixes used to identify the card type.
patterns: [
51, 52, 53, 54, 55,
22, 23, 24, 25, 26, 27
],
// Array of valid card number lengths.
length: [16],
// Array of valid card CVC lengths.
cvcLength: [3],
// Boolean indicating whether a valid card number should satisfy the Luhn check.
luhn: true,
// Regex used to format the card number. Each match is joined with a space.
format: /(\d{1,4})/g
}
When identifying a card type, the array is traversed in order until the card number matches a prefix in patterns
. For this reason, patterns with higher specificity should appear towards the beginning of the array.
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 (which should never be stored). You can do this by setting the autocomplete
attribute:
<form autocomplete="on">
<input class="cc-number" autocomplete="cc-number">
<input class="cc-exp" autocomplete="cc-exp">
<input class="cc-cvc" autocomplete="off">
</form>
You should mark up your fields using the Autofill spec. These are respected by a number of browsers, including Chrome, Safari, Firefox.
We recommend you to use <input type="tel">
which will cause the numeric keyboard to be displayed on mobile devices:
<input type="tel" class="cc-number">