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.

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.

• Modernizr.js
• jQuery.js
• jQuery.inputmask.js
• jQuery.inputmask.date.extensions.js
• Normalize.css

###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.

toscani's Issues

Paymill fork & integration?

Hi,

just wanted to ask if you'd be interested in developing your service for Paymill (https://paymill.com/en-gb/) ?

If so a msg here would be appreciated (we could discuss details). If not, forget it and could we fork your project to do so?

Best,
Dominic (from Paymill)

Select All Broken

@hugogiraudel and I both have noticed that CMD/CTRL+A only momentarily selects the field before deselecting the content and placing the cursor at the end of the current content in Chrome (Mac & Windows).

Some possible outcomes:

• Select the entire set of content within the fields (CC#, Date, CCV, etc.)
• Select only the active field (this would be so you could edit just, say the CC#, as opposed to all of it at once) may require some user testing
• Select all selects only the filled-in fields (not sure this is useful but still a possibility)

Payment Info: CVV icon not switching back and forth properly when tabbing

When you tab through the form and fill it out, if you shift tab back to the CVV field, the icon switches to show you the cvv card. But if at that point you tab back to the zip field, the icon doesn't shift back to the card icon.

can't submit numbers..

i'm working on 3 samsung devices and it doesn't accept number input (Kitkat, 4.4.2/4.4.4)..but seems to work on some other versions...

tried on s4 mini, s4, note 3 and s5 and we couldn't enter data, but we could copy and paste info into the field

Cannot change month/year

To reproduce the error:
– enter credit card number -> focus changes to month/year
– enter 12 – 12 as month and year -> focus changes to cvv
– use shift+tab to go back to the month-year-input to change it
ERROR: The "12/12" is selected but cannot be changed anymore
SHOULD: The "12/12" is selected but can be over-written by simply typing new diggits

System:
Google Chrome Version 24.0.1312.57

Note: This might be the same issue as #14 since I have this problem as well…

Enhancement: Make ZIP optional

Card #, expiry, and CSC are standardized worldwide but ZIP code isn't. I see requests to enable postal codes for Canada (at http://zdfs.github.io/toscani/paymentInfo/index.html) and the UK (at #8) but what about going the other way instead and removing the postal code altogether, or at least providing that as a configuration option?

Doesn't auto skip to next field in iOS8

Enter the credit card number and the mask moves over, but the input is still in the credit card field. If you tap the > (arrow) the cursor moves back to the date field and you can enter the date. If you do not tap the next field button it will give you an invalid credit card number.

Fix unreachable code in matchNumbers

Via @thusoy over at the fork: https://github.com/bradfrost/single-field-cc/pull/7

Not sure if this is still relevant for v2, but moving it over here just in case.

Cmd+A

From a blog comment:

One thing I noticed is I can't do ctrl/cmd + a then back or suppr to delete the entire string. I immediatly lose selection. :( It's something I use to do when I have more than one mistake in a field. Running Chrome 34.0.1847.116 Windows 7.

Basically looking for keyboard shortcuts to work to delete the string.

Can't enter date and other fields in Andriod.

Payment Info: Input error corner case

If you fill out the credit card field and partially type an expiration date only to tab back to the credit card field, when you finally get back to the expiration date, it won't let you type.

Fix Safari Issues

Payment Info: Safari is crashing on both Desktop and mobile. Doesn't seem to like the new transitions for the CC. Will need to try something else.

Refactor valid length checks

Submitted by @thusoy over at the fork:
https://github.com/bradfrost/single-field-cc/pull/6

Enhancement: Support more credit card numbers.

AMEX aside, this only supports 16-digit credit card numbers. There are many other valid lengths for credit cards. Are there any plans to support these?

Restructure Inputs for better accessibility

Based on this conversation: https://twitter.com/toddmparker/status/455855655027736576

The basic gist: input masking causes some serious issues for screen readers, so instead of the JS-based input masking, we could dynamically position the input fields and labels to function as a single unit. When the input is validated, it will auto-advance to the next field.

Firefox: Can't get over to the MM/YY, and CSC side

In Firefox 14 for the Mac, you're unable to get to the 2nd side of the field after typing in a credit card number.

Payment Info: Firefox Overflow Issue

Right now, in Firefox, when the transform is applied to the credit card input, you can see slide out of its container, even though the container specifies "overflow: hidden".

Add Bower

There are few dependencies to this project that would be better served by Bower. Modernizr, normalize, jQuery.

How to get the unmasked, full credit card number

I use

$('#myField').val()

to get the credit card number. But that only returns the last 4. How do I get the full number? Where is it stored?

Consider using a valid placeholder.

People like me come to the example and try to use the placeholder as their test to see how this works. They are greeted with a invalidating shake of the text box. Perhaps you should use a test credit card number for the placeholder?

No action at copy-paste

Try to paste card number into the box — nothing happens

Ghost In The Shell

So the problem with @aarongustafson's easy field auto advance (https://github.com/easy-designs/jquery.easy-field-auto-advance.js) on iOS is that you can only programmatically focus on a field if the page is a standalone webapp, and even when it works, iOS forces the keyboard down on blur and brings the keyboard up on focus. You can imagine what this feels like.

So what I want to try initially is an idea Alex Maccaw had when Luke W. first posted this demo. The idea is basically a "ghost field" where you have a single field floating on top of the visible fields, accepting input on their behalf. While this could get tricky, I want to first vet the idea in a simplified test for two things:

1. It works (and by that I mean, I don't have to click the next or previous arrows in iOS to fill out the form).
2. This implementation doesn't present any accessibility problems.

@toddparker and @aarongustafson - I'm going to be honest here and admit that I suck at accessibility. So off the top of your collective heads, you see any immediate problems with this idea?

UK Zip/Postcodes

This is great!

Would be nice if it could support UK postcodes too? (I suppose you'll get a lot of these requests as this gets more popular!)

One other thing - when you mention:

"Auto-focus only works on the Desktop and stand-alone webapps. iOS won't allow auto-focus within >Safari. However, auto-focus in an iOS stand-alone webapp will feel jumpy due to iOS trying to hide the >keyboard only to have it reappear. No way to just leave the keyboard up while auto-focusing."

Just to confirm - is this why on iOS I have to use the 'next' button on the top left of the keypad to get to the next fields? (ie. the cursor doesn't auto-focus on the next field after one is completed?)

Backspace on MM/YY

I'm finding an issue with backspacing to be a problem when you go all the way back the credit card field. Once you backspace it either won't let you or it will let you but you can't type in any numbers. Especially past the MM/YY.

Payment Info: Firefox Box Shadow Issue

Inputs get highlighted with box-shadow after they're filled out in Firefox.

No ability to modify an incorrect CC number

If you enter a CC number that isn't valid, it's not possible to to modify it without deleting the either number. Any attempt to use your keyboard to change the cursor position, simply results in being placed back at the end.

Using the mouse, you can place the cursor elsewhere, but if you delete a number and attempt to type a new one, the new number gets placed at the end of the field.

Firefox: Spacing between digits

In Firefox 14 for Mac, when typing digits in the credit card field... groups of digits aren't separated by a space like in other browsers.

Integrate Politespace

The fine folks at the Filament Group released an accessible input masking tool, that inserts spacing on blur. http://filamentgroup.com/lab/politespace/

This can be helpful once the user has successfully entered the credit card number

Can't add date in iOS

http://postimg.org/image/l5liimhzt/

After adding the credit card number, it tries to auto select the date fields, bit it ends up stuck like the screenshot and you can't type a date. Just try to use it on an iPhone and you'll see what I mean.

Issue with tabbing through fields

Steps:

1. Enter a credit card number (you will be autofocused on the expiration field)
2. Shift + Tab back to credit card number
3. Correct a digit
4. You'll be autofocused again on the expiration field, but can't type.

Account number verification and callback

You should have a look on this JavaScript function to be able to validate or not a credit card number :
https://www.azcode.com/Mod10

May be, you can add a way to call an anonymous function when all the information are successfully completed:

$(".credit-card-group").paymentInfo({onDataComplete:function(data){
//bla bla bla
}});

Enhancement: Validate card numbers

The last digit in most major cards is a check digit (using the LUHN formula, see http://web.eecs.umich.edu/~bartlett/credit_card_number.html). It'd be great if this library included a validity check on the CC#.

Broken on Windows Phone

It doens't work at all on Windows Phone IE. The numbers don't appear in the field when I type.
PS. I`m using WP v. 8.1.

This was brought over from @marcelluzs from https://github.com/bradfrost/single-field-cc/issues/8

iOS: Input not auto-advancing to next field

On desktop, successful entering of a full credit card number will auto-advance to the month field. On iOS, it doesn't auto-advance any of the fields once they've been successfully filled. This could cause input errors/frustration by the user.

no ability to select the numbers

There is no ability to select the numbers after entering some. It just deselects immediately.