A repository of over 1000 quality jQuery plugins

jQuery Toscani

Toscani is a jQuery General Inputs plugin.

Created by Zdfs

This is a jQuery-based, progressively-enhanced solution for creating a single-field credit card input. The idea is to create a more streamlined credit card entry process.

Not what you're looking for? Click here to view more General Inputs jQuery plugins

Single-Field Credit Card Input

This is a jQuery-based, progressively-enhanced solution for creating a single-field credit card input. The idea is to create a more streamlined credit card entry process.

August 6, 2015

This project, while an interesting experiement, was never meant for production, and yet the amount of love I got for this idea has been astounding. If anyone wants to take it over, I'm all ears. I haven't been able to work on this for years and the project, where I'm concerned, is dead. Thanks for all the interest.

September 2015

Happy to announce improvements and support are on its way, so please bear with us...

=======

Instructions

  • Add the app.js file to your scripts folder.
  • Add the paymentInfo.css file to your stylesheets folder.

Requirements

Add this files in your project, you can download them from the following links or you can find them under the libs folder.

Usage

Your credit card form should look like this:

<form>
  <fieldset class="credit-card-group">
    <legend>Credit Card Information</legend>
    <label for="card-number">Credit Card Number</label>
    <input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
    <label for="card-number">Expiration Date</label>
    <input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration" id="card-expiration">
    <label for="card-number">CVV Number</label>
    <input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv" id="card-cvv">
    <label for="card-number">Billing Zip Code</label>
    <input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip" id="card-zip">
  </fieldset>
</form>

Demo

You can find a working demo here.



You might also like these other General Inputs jQuery Plugins