input type="tel" with expiration date on iPhone

[NealJMD]

The CVV has input type="tel", which summons the numeric keyboard. The numeric keyboard is great, but it doesn't have a slash. On-phone screenshot is included below for reference.

1. Are we guaranteed that submitting an expiration without a slash will in fact work?
2. Can we pass some parameter through to braintree-web to make the expiration date display use a normal keyboard? I imagine that some users when confronted with that incongruity will simply give up, because we are a non-profit soliciting donations, not selling products.

[lilaconlee]

Hey @NealJMD, unfortunately this is a known and expected behavior in iOS for all current versions of Hosted Fields (this has been brought up previously in #81). We accept both MMYY and MM YY formats for date, so any legitimate expiration date without a slash will be valid.

One alternative is to break your expirationDate into two separate expirationMonth and expirationYear fields. We know this isn't ideal and will hopefully have a nicer solution for you soon!

[bensebborn]

Here's an idea Braintree - after the user has entered 2 characters (01-12) why don't you automatically insert the / for them?

That way they don't need that character on the keyboard. I've seen that done in other places and it works well.

[mrak]

@Skiddle Field formatting is something that we are actively working on! Stay tuned.

See #77

[NealJMD]

okey-dokey. I am eagerly awaiting the field formatting - product guy is breathing down our neck about it. thanks for the response.

[scottymac]

Just ran into this and was about to contact support. Super disappointing. Doesn't it seem wrong that you'd use a Telephone type field for date entry?

[adstrakt]

We have this issue as well on a ecoommerce site and it causing sales to be lost. Is there a workaround or when is a fix going to be released?

[scottymac]

@adstrakt I emailed BT and Tech Support wasn't much help. I ended up just removing the "/" from my expiration date field placeholder. It's not quite as intuitive, but it was an easy fix. Support told me I could also do two fields -- one for month and one for year just as @lilaconlee mentioned above.

The real issue here is that we're likely not the only ones who are losing sales because of this recent change. My guess is more devs will find this thread once they realize people haven't been able to purchase using a credit card on the iPhone.

Tech Support also suggested I follow the changelog here, but as you can see if you read it, this change was not documented (at least not that I saw).

And I still do not understand why a telephone field was used for a date. Even the UI of the telephone keyboard is a bit confusing. Why not number?

[adstrakt]

I hope they realize this and sort it soon.

[EvanHahn]

In an ideal world, the expirationDate field would pull up a numeric keyboard that also had a / slash key, and that'd be it. Unfortunately, this is the world of web browsers, where things are rarely ideal (especially on the mobile web!).

We considered this when building Hosted Fields. There were basically four input types we could've chosen:

1. text. This does nothing fancy on desktop browsers, but mobile browsers will bring up a normal, alphabet keyboard (with an English keyboard, anyway). We eliminated this pretty quickly, because this is not the ideal keyboard to show:

   

2. date was another we eliminated quickly, because it asks for year, month, and day—card expiration dates don't have a day.

3. number. On mobile browsers, this brings you to the numeric part of the keyboard by default, but you can navigate around and type whatever other characters you want. This is okay, but you can still type characters you shouldn't be able to type.

   

   This has bad UX on modern desktop browsers, though. Check out what Chrome does:

   

   Modern desktop browsers bring up a little number counter, which we felt was confusing—that's not something people are used to seeing in a card expiration date field.

4. tel, which is what we settled on. This doesn't do anything weird on desktop browsers, but it shows a keyboard that's pretty close to exactly what we wanted:

   

   We felt that this was best. Our ideal world, as mentioned above, is a numeric keyboard with a slash key—this is pretty close.

The tel type absolutely has the disadvantage that there can be some customer confusion with the slash—we totally agree with you, @scottymac. But the number type has disadvantages of its own, as we discussed above.

There are two ways around this if you still don't like our decision:

1. Update your placeholder as @scottymac has done. If you want, you can change this placeholder dynamically based on browser:

   braintree.setup(CLIENT_TOKEN, 'custom', {
    hostedFieds: {
       // ...
       expirationDate: {
         selector: '#bt-expiration-date',
   
         // Change the placeholder based on a `browserIsIos` variable you define.
         placeholder: browserIsIos ? 'MMYY' : 'MM/YY'
       }
    }
   })

2. Use a separate field for expiration month and expiration year, as @lilaconlee suggested above. Once again, you can choose to do this differently on iOS.

We're also actively working on automatic field formatting for future versions of the SDK (as @Skiddle mentioned), which will automatically insert the slash. That and the fixes above will (hopefully) put this problem to rest. (Stay tuned to issue #77 for updates on field formatting.)

Hope this helps explain our decision!

[dedman]

Thanks for the comprehensive explanation @EvanHahn. Not ideal but changing the placeholder is a good enough workaround for now.

Thanks

[lilaconlee]

@dedman As @EvanHahn mentioned above, the latest version of our SDK has formatting in Hosted Fields, which includes automatic insertion of slashes in expiration dates.

If you're interested in trying it out while it's in beta, here are some links to official documentation:

Setup for v3
Migrating from v2 to v3
Hosted Fields in v3