Github url

card

by jessepollak

jessepollak /card

:credit_card: make your credit card form better in one line of code

11.0K Stars 1.3K Forks Last release: almost 3 years ago (v2.4.0) MIT License 390 Commits 46 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:

Card - check out the demo

A better credit card form in one line of code

Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.

card

Usage (without jQuery)

To use, you'll need to include the Card JavaScript files into your HTML, no CSS link is necessary as the JavaScript file does this for you. You can find the necessary file at

/dist/card.js

and include it in your HTML like so.

<!-- at the end of BODY --><!-- CSS is included via this JavaScript file --><script src="/path/to/card.js"></script>

Once you've included those files, you can initialize Card.

var card = new Card({ // a selector or DOM element for the form where users will // be entering their information form: 'form', // \*required\* // a selector or DOM element for the container // where you want the card to appear container: '.card-wrapper', // \*required\* formSelectors: { numberInput: 'input#number', // optional — default input[name="number"] expiryInput: 'input#expiry', // optional — default input[name="expiry"] cvcInput: 'input#cvc', // optional — default input[name="cvc"] nameInput: 'input#name' // optional - defaults input[name="name"] }, width: 200, // optional — default 350px formatting: true, // optional - default true // Strings for translation - optional messages: { validDate: 'valid\ndate', // optional - default 'valid\nthru' monthYear: 'mm/yyyy', // optional - default 'month/year' }, // Default placeholders for rendered fields - optional placeholders: { number: '•••• •••• •••• ••••', name: 'Full Name', expiry: '••/••', cvc: '•••' }, masks: { cardNumber: '•' // optional - mask card number }, // if true, will log helpful messages for setting up Card debug: false // optional - default false });

Installing card from bower

If you're using bower, you can install card.js with:

bower install card --save

Installing card from npm

If you're using npm, you can install card.js with:

npm install --save card var $ = require("jquery"); // The current card.js code does not explicitly require jQuery, but instead uses the global, so this line is needed. window.jQuery = $; var card = require("card");

Using multiple inputs for one field

Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a selector that selects the fields in the correct order. For example,

<!-- CSS is included via this JavaScript file --><script src="/path/to/card.js"></script>

Rendering with different initial card placeholders

Card renders with default placeholders for card

name

,

number

,

expiry

, and

cvc

. To override these placeholders, you can pass in a

placeholders

object.

<!-- CSS is included via this JavaScript file --><script src="/path/to/card.js"></script>

Translation

To render the card with the strings in a different language, you can pass in a

messages

object.

<!-- CSS is included via this JavaScript file --><script src="/path/to/card.js"></script>

Using with jQuery

To use with jQuery, you'll need to include the

jquery.card.js

file into your HTML. You can find the necessary file at

/dist/jquery.card.js

and include it in your HTML like so.

<!-- at the end of BODY --><!-- CSS is included via this JavaScript file --><script src="/path/to/jquery.card.js"></script>

Once you've included those files, you can initialize Card with jQuery.

$('form').card({ // a selector or DOM element for the container // where you want the card to appear container: '.card-wrapper', // \*required\* // all of the other options from above });

Using with other javascript libraries

Card has wrappers that make it easy to use with other javascript libraries:

Angular 1.x

Angular 2+

Ember

React

Development

To contribute, follow this steps:

$ git clone --recursive https://github.com/jessepollak/card.git $ cd card $ git submodule init && git submodule update $ npm install $ npm development

Now, if you go to localhost:8080/example in your browser, you should see the demo page.

Places using Card

Card is used in the wild in these places:

Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop @jessepollak a line on Twitter and we'll add you right away!

Donations

If you'd like to donate to help support development of Card, send Bitcoin directly to

17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC

or through Coinbase here.

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.