Credit Card Check Plugin

How To Create Payment Form With Credit Card Check Plugin


This article is about how to create an amazing Payment form with the credit card check plugin using JQuery.

Credit Cards Included:

  • Visa
  • Master
  • Amex
  • Diners
  • Discover
  • JCB

How to use Credit Card Check Plugin

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>

2. Load the necessary JavaScript and CSS files.

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

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

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

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

var regexCustom = /Custom Rule/;
var regexes = {
regex: regexCustom,
label: ‘Custom’
}


 

Leave a Reply

Your email address will not be published. Required fields are marked *