jQuery.payment

A rising tide lifts all boats, and we’d like to help improve payment experiences for consumers everywhere, whether or not they use Stripe. Today, we’re releasing jQuery.payment, a general purpose library for building credit card forms, validating input, and formatting numbers. This library is behind a lot of the functionality in Checkout.

Some sites, like the Kairos Society, require a bit more flexibility than our Checkout provides. This is where jQuery.payment shines. You can have some of the same formatting and validation as in the Checkout along with as much flexibility as you need.

Features

For example, you can ensure that a text input is formatted as a credit card number, with digits in groups of four and limited to 16 characters.

Or you can ensure input is formatted as a MM/YYYY card expiry:

The library includes a bunch of utility and validation methods, for example:

$.validateCardNumber('4242 4242 4242 4242'); //=> true
$.validateCardCVC('123', 'amex'); //=> false
$.validateCardExpiry('05', '20'); //=> true
$.cardType('4242 4242 4242 4242'); //=> 'visa'

Robust and tested

It turns out that rolling your own code that restricts and formats input is particularly tricky in JavaScript. You have to cater for lots of edge cases such as users pasting text, selecting and replacing numbers, as well as the different ways credit card numbers are formatted.

We’ve spent a lot of time tuning our formatting and validation logic as well as testing and ensuring cross browser compatibility, so you don't have to reinvent the wheel. We look forward to seeing what you build! You can find a live demo of the library, as well as the source on GitHub.