💳 Make Your Credit Card Form Better In One Line Of Code | Card.js

The card will take any credit card form and make it the best part of the payment process (without changing anything). Everything is built with pure CSS, HTML, and Javascript – no images required.

The jQuery Card.js plugin makes it easy to create an interactive credit card template for your e-commerce or shopping site checkout page.


  • Card type detection.
  • Field verification.
  • Hide Input.
  • Placeholders for number, name, expiration, and CVC.
  • It can also be implemented in Vanilla JavaScript.

How to make use of it:


$ npm install card

# Bower
$ bower install card

1. Load the core stylesheet card.css within 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 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"/>

4. Initialize the Card.js and we’re achieved.

// jQuery
  ontainer: '.card-wrapper'

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

5. All potential choices 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

Create An Interactive Credit Card Form, Card Plugin/Github


See Demo And Download


Official Website(jessepollak): Click Here

This superior jQuery/javascript plugin is developed by jessepollak. For extra Advanced Usages, please go to the official website.

Leave a Comment