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.
To use, you'll need to include the correct CSS and Javascript files into your HTML. You can find the necessary files at /build/js/card.min.js and /build/css/card.min.css and include them in your HTML like so.
<!-- in HEAD -->
<link rel="stylesheet" href="/path/to/card.min.css">
<!-- at the end of BODY -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/card.min.js"></script>Once you've included those files, you can initialize Card.
$('form').card({
// a selector or jQuery object for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
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', // options - defaults input[name="name"]
width: 200, // optional — default 350px
formatting: true // optional - default true
});To contribute, follow this steps:
$ git clone git@github.com:jessepollak/card.git
$ cd card
$ npm install
$ bower install
$ gulp watchNow, if you go to localhost:8080 in your browser, you should see the demo page.