:moneybag: A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.
A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers. Heavily, heavily based on @stripe's jquery.payment library, but without the jQuery.
For example, you can make a input act like a credit card field (with number formatting and length restriction):
Payment.formatCardNumber(document.querySelector('input.cc-num'));
Then, when the payment form is submitted, you can validate the card number on the client-side:
var valid = Payment.fns.validateCardNumber(document.querySelector('input.cc-num').value);if (!valid) { alert('Your card is not valid!'); return false; }
You can find a full demo here.
Supported card types are:
Formats card numbers:
Example:
Payment.formatCardNumber(document.querySelector('input.cc-num'));
Formats card expiry:
/between the month and year
Example:
Payment.formatCardExpiry(document.querySelector('input.cc-exp'));
Formats card CVC:
Example:
Payment.formatCardCVC(document.querySelector('input.cc-cvc'));
General numeric input restriction.
Example:
Payment.restrictNumeric(document.querySelector('[data-numeric]'));
Validates a card number:
Example:
Payment.fns.validateCardNumber('4242 4242 4242 4242'); //=> true
Validates a card expiry:
formatCardExpiryinput value
Example:
Payment.fns.validateCardExpiry('05', '20'); //=> true Payment.fns.validateCardExpiry('05', '2015'); //=> true Payment.fns.validateCardExpiry('05', '05'); //=> false Payment.fns.validateCardExpiry('05 / 25'); //=> true Payment.fns.validateCardExpiry('05 / 2015'); //=> false
Validates a card CVC:
Example:
Payment.fns.validateCardCVC('123'); //=> true Payment.fns.validateCardCVC('123', 'amex'); //=> true Payment.fns.validateCardCVC('1234', 'amex'); //=> true Payment.fns.validateCardCVC('12344'); //=> false
Returns a card type. Either:
visa
mastercard
discover
amex
jcb
dinersclub
maestro
laser
unionpay
elo
hipercard
The function will return
nullif the card type can't be determined.
Example:
Payment.fns.cardType('4242 4242 4242 4242'); //=> 'visa'
Parses a credit card expiry in the form of MM/YYYY, returning an object containing the
monthand
year. Shorthand years, such as
13are also supported (and converted into the longhand, e.g.
2013).
Payment.fns.cardExpiryVal('03 / 2025'); //=> {month: 3: year: 2025} Payment.fns.cardExpiryVal('05 / 04'); //=> {month: 5, year: 2004} Payment.fns.cardExpiryVal(document.querySelector('input.cc-exp')) //=> {month: 4, year: 2020}
This function doesn't perform any validation of the month or year; use
Payment.fns.validateCardExpiry(month, year)for that.
We've provided utility functions to change which card types can be identified by Payment.
Returns the array of card types.
Overrides the array of card types with a new array.
Add a new card type to the card array.
Remove a card type from the card array.
./example/index.html
Run
npm run build
Run
npm run test
We recommend you turn autocomplete on for credit card forms, except for the CVC field. You can do this by setting the
autocompleteattribute:
You should also mark up your fields using the Autofill spec. These are respected by a number of browsers, including Chrome.
Set
autocompletetypeto
cc-numberfor credit card numbers,
cc-expfor credit card expiry and
cc-cscfor the CVC (security code).
We recommend you set the
patternattribute which will cause the numeric keyboard to be displayed on mobiles:
You may have to turn off HTML5 validation (using the
novalidateform attribute) when using this
pattern, as it won't match space formatting.