A Free jQuery Plugins With Credit Card Form in jQuery is a powerful plugins that simplifies the checkout process for online shoppers. With this form, users can easily enter their credit card number, expiration date, and security code, and receive instant feedback if they make an error. The card form is highly customizable, allowing developers to customize the form to suit the look and feel of their website or application. The use of jQuery also enables real-time validation of the user input, helping to prevent errors and ensure a seamless checkout experience. Overall, the Interactive Credit Card Form in jQuery is an excellent choice for developers who want to enhance the user experience of their online store or application.
Table of Contents
Installation:
# NPM
$ npm install card
# Bower
$ bower install card
How to use :
Add the core stylesheet card.css in the head section of the webpage.
<link href="card.css" rel="stylesheet">
Add 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>
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>
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'
});
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
});
Done
Thanks for make jQuery plugin is developed by jessepollak For more Helpfull for users, please check the demo page or visit the official website.
