payment

by jessepollak

jessepollak / payment

:moneybag: A jQuery-free general purpose library for building credit card forms, validating inputs a...

439 Stars 140 Forks Last release: 3 months ago (v2.4.0) MIT License 175 Commits 31 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Payment Build Status

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:

  • Visa
  • MasterCard
  • American Express
  • Discover
  • JCB
  • Diners Club
  • Maestro
  • Laser
  • UnionPay
  • Elo
  • Hipercard

API

Payment.formatCardNumber(element[, maxLength])

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
  • If second parameter is specified then card length will be limited to its value (19 digits cards are not in use despite being included in specifications)

Example:

Payment.formatCardNumber(document.querySelector('input.cc-num'));

Payment.formatCardExpiry(element)

Formats card expiry:

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

Example:

Payment.formatCardExpiry(document.querySelector('input.cc-exp'));

Payment.formatCardCVC(element)

Formats card CVC:

  • Restricts length to 4 numbers
  • Restricts input to numbers

Example:

Payment.formatCardCVC(document.querySelector('input.cc-cvc'));

Payment.restrictNumeric(element)

General numeric input restriction.

Example:

Payment.restrictNumeric(document.querySelector('[data-numeric]'));

Payment.fns.validateCardNumber(number)

Validates a card number:

  • Validates numbers
  • Validates Luhn algorithm
  • Validates length

Example:

Payment.fns.validateCardNumber('4242 4242 4242 4242'); //=> true

Payment.fns.validateCardExpiry(month, year), Payment.fns.validateCardExpiry('month / year')

Validates a card expiry:

  • Validates numbers
  • Validates in the future
  • Supports year shorthand
  • Supports formatted as
    formatCardExpiry
    input 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

Payment.fns.validateCardCVC(cvc, type)

Validates a card CVC:

  • Validates number
  • Validates length to 4

Example:

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

Payment.fns.cardType(number)

Returns a card type. Either:

  • visa
  • mastercard
  • discover
  • amex
  • jcb
  • dinersclub
  • maestro
  • laser
  • unionpay
  • elo
  • hipercard

The function will return

null
if the card type can't be determined.

Example:

Payment.fns.cardType('4242 4242 4242 4242'); //=> 'visa'

Payment.fns.cardExpiryVal(string) and Payment.cardExpiryVal(el)

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

Card Type functions

We've provided utility functions to change which card types can be identified by Payment.

Payment.getCardArray()

Returns the array of card types.

Payment.setCardArray(cardTypes)

Overrides the array of card types with a new array.

Payment.addToCardArray(cardType)

Add a new card type to the card array.

Payment.removeFromCardArray(cardName)

Remove a card type from the card array.

Example

Look in

./example/index.html

Building

Run

npm run build

Running tests

Run

npm run test

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:

  
  


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


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:

You may have to turn off HTML5 validation (using the

novalidate
form attribute) when using this
pattern
, as it won't match space formatting.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.