Givewp: Credit Card Expiry Date Format

[amjad]

Some gateways accept the expiry date as MM/YY only. But the form takes MM/YYYY too and this is causing transactions to fail because of if people enter the full year our gateway send back an error of invalid expiry date.

How can we override this and allow only MM/YY as input?

[ravinderk]

@DevinWalker @mathetos I would like to suggest dropdown for expiry date instead of input field which has js for expiry date formatting.
For ref: http://usabilityetc.com/2015/03/credit-card-expiration-date-user-interface/

@amjad Can you handle this case with PHP code. I think it is good to take expiry date in MM/YYYY format from donor.

[amjad]

Where can this be overridden in PHP?

Dropdown would be nice to avoid errors. Correct me if I'm wrong, but isn't MM/YY format the standard? I haven't seen any cards with MM/YYYY on them, at least not in US.

[mathetos]

Example from Amazon.com, uses a dropdown and YYYY

Stripe checkout is a number field with YY
https://stripe.com/checkout

So it seems there isn't a clear standard, but obviously we don't want cards failing. Seems we need to implement some sort of validation that is determined by the payment gateway itself to display the year either with 2 digits or 4.

With that in mind, I can see that it makes sense to do it with a Dropdown because it will be a consistent user experience but you can format the year programmatically... I just personally think it takes LONGER to enter the year with a dropdown than by typing, so my vote would be a number field instead. I'm sure we can still do YY validation even with a number field.

Just my two cents.

[ravinderk]

@amjad before sending data to payment gateway server, you can fix expiry date according to your format.

For ref: https://github.com/WordImpress/give-americloud-payments/blob/master/includes/give-americloud-gateway.php#L55

[amjad]

@ravinderk is there a way to limit input to MM/YY rather than formatting before sending to gateway?

[kevinwhoffman]

Dropdowns should be the UI of last resort, especially on mobile. They introduce unnecessary complexity in this case. See https://www.lukew.com/ff/entry.asp?1950.

A text field with an input mask is the better UX, and we can still do client-side and server-side validation to ensure the data is in the right format.

As for what the format should be, I believe it should be MM/YY since that is the format reflected on most credit and debit cards (I don't know of a card that displays the year in four digits). The date in MM/YY format is also what users are looking at when they enter their information, so it makes sense to accept that format. On the Give demo, the placeholder value is actually MM/YY but the field accepts MM/YYYY. That's not right. (Edit: It actually accepts both formats like Stripe)

Recommended Next Steps

If we know the MM/YYYY format is causing errors _and_ goes against the expected format on the card, then we should consider changing the date field to only accept MM/YY. We should check to ensure that all of our gateways accept this format, but even if they do not, it should be trivial to convert the two-digit year to a four-digit year in the gateway add-on.

[ravinderk]

@amjad currently you can achieve that with custom js only.

[kevinwhoffman]

I just tried the Stripe demo (click Donate to Watsi) and although the placeholder says MM/YY it accepts either MM/YY or MM/YYYY. This matches the behavior in Give.

In light of that, I'm changing my recommendation... We should leave the behavior as is and if a certain gateway requires a special format, that formatting can be handled in the add-on.

[ravinderk]

@kevinwhoffman I want to suggest adding some js validation before submitting donation form. I reviewed code and we are adding error/valid class to the expiry date. We can submit donation form even there is error in expiry date (10/222) and we will get an error after submitting donation form.

we can address this issue within 2.0 with parsley js

[kevinwhoffman]

@ravinderk If we can improve JS validation, I am all for it. I just don't think it requires a dropdown to do so.

[amjad]

@ravinderk I have fixed this issue for our gateway. Now when user enters 17 or 2017 as year it will send to payment server as 17. Thanks everyone!

[ravinderk]

@am Glad, you fixed it.

We will close this soon, need to add some fix to make it future proof.