Custom Credit Card Form With jQuery For Checkout – Card.js

Form
Create An Interactive Credit Card Form In jQuery - Card
File Size: 21.75 KB
Views Total: 949 views
Last Update:April 20, 2024
Publish Date: December 27, 2013
Official Website: Go to website
License: MIT
Plugin Author: jessepollak
Demo    Download

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.

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: '&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;',
    cvc: '&bull;&bull;&bull;',
    expiry: '&bull;&bull;/&bull;&bull;',
    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.
List Of Version :
  • v.2.52
  • v2.5.1
  • v2.5.0
  • v2.4.0
  • v2.3.0
  • v2.2.1
  • v2.2.0
  • v2.1.1
  • v2.1.0
  • v2.0.6
  • v2.0.5
  • v2.0.4
  • v2.0.3
  • v2.0.2
  • v2.0.1
  • v2.0.0
  • v2.0.0-beta4
  • v2.0.0-beta3
  • v2.0.0-beta2
  • v2.0.0-beta1
  • v1.3.2
  • v1.3.1
  • v1.3.0
  • v1.2.2
  • v1.2.1
  • v1.2.0
  • v1.1.0
  • v1.0.2
  • v1.0.1
  • v1.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.