Create An Interactive Credit Card Form With jQuery Plugin

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
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.


$ 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="//"></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"/>

4. Initialize the Card.js and we're done.

// jQuery
  ontainer: '.card-wrapper'

// Vanilla JavaScript
new Card({
  form: document.querySelector('form'),
  container: '.card-wrapper'

5. All possible options to customize the Credit Card Form.


  // 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

Live Demo

See the Pen Create An Interactive Credit Card Form With jQuery by Teguh Sigit (@teguhsigit) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post