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.
Branch: master
Clone or download
Nilpo Merge pull request #38 from aromaron/master
Add basic installation and usage instructions to Readme file
Latest commit 98bd486 Sep 11, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
paymentInfo Added basic card number validation using the Luhn Algorithm Jul 22, 2015
.gitignore Updated the .gitignore Apr 14, 2014
README.md Add basic installation and usage instructions to Readme file Sep 8, 2015

README.md

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.