Open Bug 1684938 Opened 2 years ago Updated 1 year ago

[Form Autofill] credit card expiration date formating

Categories

(Toolkit :: Form Autofill, defect, P3)

Firefox 84
defect

Tracking

()

UNCONFIRMED

People

(Reporter: ian.zurutuza, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0

Steps to reproduce:

firefox 84.0(64-bit) for Ubuntu canonical - 1.0

have credit card information saved in browser

example failure @ www.shopnasa.com

  1. proceed to checkout
  2. autofill credit card info

Actual results:

expiration date filled with incorrect format "YYYY-MM"

Expected results:

expiration date filled with request format "MM / YY"

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → Form Autofill
Product: Firefox → Toolkit

I am confirming the above bug, but not limited to any particular site as far as I can tell. Behavior I am experience is identical to above, and occurs at every site I have used autofill for so far.

This appears to be an issue with Shopify sites. Each credit card section on these sites are iframes with visually hidden, but duplicate, credit card sections in each iframe. Because of this, when autofill checks the placeholder text, in order to determine which format the site is expecting the expiry date, autofill checks a visually hidden section that has no placeholder text. This causes the default format of the expiry date to appear, in YYYY-MM format. If a user selects the expiry date field and autofills via the expiry field, then autofill behaves correctly and will fill in the expiry date according to the placeholder text.

My guess is that we need to make this heuristic a bit more intelligent and find the closest expiry date section that is visible to the end user, instead of the closest one in general. I think that once we fix this issue, it will be fixed on the majority of Shopify sites, if the business is using the native implementation that (I assume at least) Shopify provides its customers.

Dimi, do you think this issue would be fixed by the Fathom credit card work?

Flags: needinfo?(dlee)
See Also: → 1647381

(In reply to Tim Giles [:tgiles] from comment #3)

This appears to be an issue with Shopify sites. Each credit card section on these sites are iframes with visually hidden, but duplicate, credit card sections in each iframe. Because of this, when autofill checks the placeholder text, in order to determine which format the site is expecting the expiry date, autofill checks a visually hidden section that has no placeholder text. This causes the default format of the expiry date to appear, in YYYY-MM format. If a user selects the expiry date field and autofills via the expiry field, then autofill behaves correctly and will fill in the expiry date according to the placeholder text.

Initially I was surprised that we can even autofill in this case (fill different fields that are across different forms). But after spending some time investigating, I think when we focus on a field and then select a credit card to fill, we still only fill those duplicated hidden field in the same form. I guess the reason that all the"real" visible fields are filled is because the website itself syncs those fields.

My guess is that we need to make this heuristic a bit more intelligent and find the closest expiry date section that is visible to the end user, instead of the closest one in general. I think that once we fix this issue, it will be fixed on the majority of Shopify sites, if the business is using the native implementation that (I assume at least) Shopify provides its customers.

Not sure if this is a common pattern for credit card or address. But I just tested Safari and Chrome, it seems that they both work correctly on this site.

Dimi, do you think this issue would be fixed by the Fathom credit card work?

My guess is that this is not going to be fixed by the Fathom cc work. Since the fathom work is to improve the accuracy of whether we can recognize the right type of fields in a form, not to handle cases when there are multiple forms.

Flags: needinfo?(dlee)
Blocks: 1730016

Changing severity to S3 because of users can still fill in the expiration date manually.

Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.