Card - check out the demo
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 Card JavaScript files into your HTML. You can find the necessary file at /dist/card.js and include it in your HTML like so.
<!-- at the end of BODY -->
<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: '•••'
},
// if true, will log helpful messages for setting up Card
debug: false // optional - default false
});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 explictly require jQuery, but instead uses the global, so this line is needed.
window.jQuery = $;
var card = require("card");