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.