Create A Beautiful Payment Form With Credit Card Check Plugin

File Size: 30.2 KB
Views Total: 2988
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create A Beautiful Payment Form With Credit Card Check Plugin

The Credit Card Check jQuery plugin lets you create a beautiful credit card form that automatically detects credit card brand when typing numbers in the text field.

Credit Cards Included:

  • Visa
  • Master
  • Amex
  • Diners
  • Discover
  • JCB
  • Hipercard
  • Elo

How to use it:

1. The required HTML for the credit card form.

<form id="credit-card">
  <div class="row">
      <input type="text" id="cc-number" required="required" placeholder="CARD NUMBER">
      <span id="show-cc-label"></span>
  <div class="row">
    <div class="col-1">
      <input type="text" id='cc-expiration' required="required" placeholder="VALID THRU">
    <div class="col-2">
      <input type="text" id="cc-cvv" required="required" placeholder="CVV">
      <i class="i-icon-payment i-icon-cvv2"></i>
  <div class="last-row">
      <input type="text" id="cc-name" required="required" placeholder="NAME">

3. Load the necessary JavaScript and CSS files from the dist folder.

<link rel="stylesheet" href="./dist/css/cccheck.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="./dist/js/jquery.cccheck.js"></script>

4. Initialize the plugin on the credit card form and done.


5. You can add more credit card brands using Regex.

var regexCustom = /Custom Rule/;
var regexes = {
    regex: regexCustom,
    label: 'Custom'

This awesome jQuery plugin is developed by RuanAragao. For more Advanced Usages, please check the demo page or visit the official website.