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

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.

$(document).ready(function(){
  $.cccheck();
})

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.