Card lets you add an interactive, CSS3 credit card animation to your credit card form to help your users through the process.
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 /lib/js/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");
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,
<html>
<body>
<div class='card-wrapper'></div>
<script src="/path/to/card.js"></script>
<form>
<input type="text" name="number">
<input type="text" name="first-name"/>
<input type="text" name="last-name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'form',
container: '.card-wrapper',
formSelectors: {
nameInput: 'input[name="first-name"], input[name="last-name"]'
}
});
</script>
</body>
</html>
Card renders with default placeholders for card name, number, expiry, and cvc. To override these placeholders, you can pass in a placeholders object.
<html>
<body>
<div class='card-wrapper'></div>
<script src="/path/to/card.js"></script>
<form>
<input type="text" name="number">
<input type="text" name="name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'form',
container: '.card-wrapper',
placeholders: {
number: '**** **** **** ****',
name: 'Arya Stark',
expiry: '**/****',
cvc: '***'
}
});
</script>
</body>
</html>
To render the card with the strings in a different language, you can pass in a messages object.
<html>
<body>
<div class='card-wrapper'></div>
<script src="/path/to/card.js"></script>
<form>
<input type="text" name="number">
<input type="text" name="name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'form',
container: '.card-wrapper',
messages: {
validDate: 'expire\ndate',
monthYear: 'mm/yy'
}
});
</script>
</body>
</html>
To use with jQuery, you'll need to include the jquery.card.js file into your HTML. You can find the necessary file at /lib/js/jquery.card.js and include it in your HTML like so.
<!-- at the end of BODY -->
<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
});
Card has wrappers that make it easy to use with other javascript libraries:
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 start
Now, if you go to localhost:8080/example in your browser, you should see the demo page.
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!
If you'd like to donate to help support development of Card, send Bitcoin directly to 17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC or through Coinbase here.
FAQs
Card lets you add an interactive, CSS3 credit card animation to your credit card form to help your users through the process.
The npm package card receives a total of 7,482 weekly downloads. As such, card popularity was classified as popular.
We found that card demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.