Skip to content
/ toscani Public
forked from zdfs/toscani

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.

Notifications You must be signed in to change notification settings

ftnet/toscani

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.3%
  • CSS 36.6%
  • HTML 1.1%