Skip to content
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.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Nilpo Merge pull request #38 from aromaron/master
Add basic installation and usage instructions to Readme file
Latest commit 98bd486 Sep 10, 2015

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
paymentInfo
.gitignore
README.md

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.

You can’t perform that action at this time.