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.