npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery.payment

v3.0.0

Published

A general purpose library for building credit card forms, validating inputs and formatting numbers.

Downloads

32,826

Readme

jQuery.payment Build Status

A general purpose library for building credit card forms, validating inputs and formatting numbers.

Project status

We consider jQuery.payment to be feature complete. We continue to use it in production, and we will happily accept bug reports and pull requests fixing those bugs, but we will not be adding new features or modifying the project for new frameworks or build systems.

Why?

The library was born in a different age, and we think it has served tremendously, but it is fundamentally doing too many things. Complecting DOM element manipulation, input masking, card formatting, and cursor positioning makes it difficult to test and modify. An ideal version of this library would separate the independent components and make the internal logic functional.

Usage

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:

  • Visa
  • MasterCard
  • American Express
  • Diners Club
  • Discover
  • UnionPay
  • JCB
  • Maestro
  • Forbrugsforeningen
  • Dankort

(Additional card types are supported by extending the $.payment.cards array.)

API

$.fn.payment('formatCardNumber')

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');

$.fn.payment('formatCardExpiry')

Formats card expiry:

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

Example:

$('input.cc-exp').payment('formatCardExpiry');

$.fn.payment('formatCardCVC')

Formats card CVC:

  • Restricts length to 4 numbers
  • Restricts input to numbers

Example:

$('input.cc-cvc').payment('formatCardCVC');

$.fn.payment('restrictNumeric')

General numeric input restriction.

Example:

$('[data-numeric]').payment('restrictNumeric');

$.payment.validateCardNumber(number)

Validates a card number:

  • Validates numbers
  • Validates Luhn algorithm
  • Validates length

Example:

$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true

$.payment.validateCardExpiry(month, year)

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

$.payment.validateCardCVC(cvc, type)

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

$.payment.cardType(number)

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'

$.payment.cardExpiryVal(string) and $.fn.payment('cardExpiryVal')

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.

$.payment.cards

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.

Example

Look in ./example/index.html

Building

Run cake build

Running tests

Run cake test

Autocomplete recommendations

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.

Mobile recommendations

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