Home :: Wiki

Usage

To use, you'll need to include the correct CSS and Javascript files into your HTML. You can find the necessary files at /lib/js/card.js and /lib/css/card.css and include them in your HTML like so.

<!-- in HEAD -->
<link rel="stylesheet" href="/path/to/card.css">
<!-- at the end of BODY -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/card.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', // optional - defaults input[name="name"]

    width: 200, // optional — default 350px
    formatting: true // optional - default true
});

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