Interactive & Animated Checkout Payment Design with Card ~ Coding Savvy
FB Twitter Google
» »

Interactive & Animated Checkout Payment Design with Card

You website Checkout Payment Page is should be one of the most inviting pages of your website either your running a large E-Commerce Site or Mini-Store. Card is a tiny vanilla JavaScript project (with a JQuery version) that will make your credit card forms much more fun and interactive. After a quick installation, the library will take your form and transform it into an animated CSS-only credit card that gets filled as users input their data. With Card.js and animation that will make your Store Payment Page interactive and attractive to buyers is as easy and simple as it can get.
Interactive & Animated Checkout Payment Design with Card
Download Script Live Demo

How to use without JQuery

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: '•••'
},

masks: {
cardNumber: '•' // optional - mask card number
}
// if true, will log helpful messages for setting up Card
debug: false // optional - default false
});

Using 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
});
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment