Payment

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
• Troy

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

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

year

13

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)

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

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

Set

autocompletetype

cc-number

cc-exp

cc-csc

Mobile recommendations

We recommend you set the

pattern

You may have to turn off HTML5 validation (using the

novalidate

pattern