The jQuery Card.js plugin can help you make it easy to create interactive credit card forms for your e-commerce checkout pages or shopping websites.
 |
| Create An Interactive Credit Card Form With jQuery Plugin |
By adding or creating this javascript, your site can be more attractive.
- Card type detection.
- Field validation.
- Input masking.
- Custom placeholders for number, name, expiry, and CVC.
- Also can be implemented in vanilla JavaScript.
Installation:
# NPM $ npm install card # Bower $ bower install card
How to use it:
1. Load the core stylesheet card.css in the head section of the webpage.
<link href="card.css" rel="stylesheet">
2. Load the JavaScript file jquery.card.js(For jQuery) or card.js(For Vanilla JavaScript) at the bottom of the webpage
<script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/jquery.card.js"></script> <!-- OR --> <script src="dist/card.js"></script>
3. Create the card wrapper and number/name/expiry/CVC input fields on the webpage.
<div class="card-wrapper"></div>
<div class="form-container active">
<form action="">
<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>
</div>
4. Initialize the Card.js and we're done.
// jQuery
$('form').card({
ontainer: '.card-wrapper'
});
// Vanilla JavaScript
new Card({
form: document.querySelector('form'),
container: '.card-wrapper'
});
5. All possible options to customize the Credit Card Form.
$('form').card({
// number formatting
formatting: true,
// selectors
formSelectors: {
numberInput: 'input[name="number"]',
expiryInput: 'input[name="expiry"]',
cvcInput: 'input[name="cvc"]',
nameInput: 'input[name="name"]'
},
cardSelectors: {
cardContainer: '.jp-card-container',
card: '.jp-card',
numberDisplay: '.jp-card-number',
expiryDisplay: '.jp-card-expiry',
cvcDisplay: '.jp-card-cvc',
nameDisplay: '.jp-card-name'
},
// custom messages
messages: {
validDate: 'valid\nthru',
monthYear: 'month/year'
},
// custom placeholders
placeholders: {
number: '•••• •••• •••• ••••',
cvc: '•••',
expiry: '••/••',
name: 'Full Name'
},
// enable input masking
masks: {
cardNumber: false
},
// valid/invalid CSS classes
classes: {
valid: 'jp-card-valid',
invalid: 'jp-card-invalid'
},
// debug mode
debug: false
});
Live Demo
See the Pen Create An Interactive Credit Card Form With jQuery by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- card-master.zip
- Size :
- 179KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT