During your Web Application Development career you will, more often than you probably expect, be tasked with implementing a Payment Processing feature that requires Credit Card information from the user. While it may be tempting to create a generic form using your favorite Frontend Framework (read: Bootstrap or Foundation) with input masks applied to the Credit Card fields, there are much better ways to handle the mentioned task, ways that will make the implementation easier and simultaneously enrich the overall user experience.

Search for the latest and greatest jQuery libraries for improving my client’s online store has led me to discover a simple, yet extremely useful, solution for transforming your regular static and boring checkout form into an interactive and eye-catching beauty.

Amazing library that I have discovered is jQuery Card, an open source library released under the MIT license that you can download from the GitHub repository linked below.

GitHub Repository
https://github.com/jessepollak/card

To use the library you first need to include it’s assets from your chosen release – a very straightforward process as you only need to worry about two files.

<link href="card/assets/card.css" rel="stylesheet" />
<script src="card/assets/jquery.card.js" type="text/javascript"></script>

That’s half of the work champ, implementation is even easier. Let us assume that you have a bare-bone checkout form like in the example below.

<form>
    <input type="text" name="number" ->
    <input type="text" name="name" />
    <input type="text" name="expiry" />
    <input type="text" name="cvc" />
</form>

To enrich it using the power of this magnificent library simply preppend, or append if you will, a container that will be used for previewing the credit card…

<div class="card-container"></div>

…and execute the card function on your form’s DOM element.

$("form").card({
    container : ".card-container"
});

Voila, you have successfully added a fresh look to your checkout form that will surely be loved anyone that uses it. For a working demo, please review the link below.

CodePen Demo
https://codepen.io/djordje-jocic/full/NWPYdYG