CSS & jQuery Credit Card Plugin

Its created by Jesse Pollak.

You can download it from this link.

Use this sample html codes for startup:

<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.css” />
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.2/css/foundation.min.css” />
</head>
<div class=”grid-container”>
<div class=”grid-x align-center”>
<div class=”cell medium-3″>
<div class=”card-wrapper”></div>
<div class=”form-container active”>
<form action=””>
<p class=”small”>Start typing</p>
<div class=”row collapse”>
<div class=”small-6 columns”> <input placeholder=”Card number” type=”text” name=”number”> </div>
<div class=”small-6 columns”> <input placeholder=”Full name” type=”text” name=”name”> </div>
</div>
<div class=”row collapse”>
<div class=”small-3 columns”> <input placeholder=”MM/YY” type=”text” name=”expiry”> </div>
<div class=”small-3 columns”> <input placeholder=”CVC” type=”text” name=”cvc”> </div>
<div class=”small-6 columns”> <input type=”submit” value=”Submit” class=”button postfix”> </div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.min.js”></script> <script> $(‘code’).each(function(i, e) {hljs.highlightBlock(e)}); var card = new Card({ form: ‘.active form’, container: ‘.card-wrapper’ }) </script>
</html>

Written by Uğur

Leave a Reply

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