1642060 - Card type/network isn't filled using heuristics (e.g. on Macy's)

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, enhancement, P3)

Description

[chsiang]

Card type isn't filled on Macy's. Chrome and Safari fill the card type correctly

Steps to reproduce:

• Visit macys.com
• Go to the checkout form and choose a saved card to autofill

Expected result:
Fill out the form including the card type

Actual result:
Fill out the form w/o filling the card type

Comment 1

[Matthew N. [:MattN]]

Without looking at the markup of the page I suspect the main issue is that we never added heuristics to detect cc-type as it was only added to storage for PaymentRequest. IIRC filling the card type/network was out of scope for the CC autofill MVP in the past (most sites identify it automatically from the card number). See how cc-type is omitted from heuristicsRegexp.js. It doesn't look like Chromium uses a regexp alone for their detection. We would want to add something similar to https://searchfox.org/mozilla-central/source/browser/extensions/formautofill/FormAutofillHeuristics.jsm

P1 for now but I think we can lower the priority if we don't test on a site which uses a manual card type/network field.

Btw. The whole regexp. file should be updated from Chromium.

Comment 2

[Timea Cernea [:tbabos][inactive]]

Apart from the card type not being filled, selecting a card type manually after the other fields were auto-filled clears the CC number and breaks the Clear form functionality too.
This also happens if I choose the card type manually, autofill the desired CC data and switch to a different card type from the dropdown. Attached the screen-recording for reference. (tested on Payment method form, checkout page seems to be broken on Firefox)
The clear form option also does not reset the Expiry Date, but that's a different issue.

I am more concerned about the above 2 issues as they are found in common user flows and break the whole CC autofill functionality for Macy's page.

Comment 3

[Timea Cernea [:tbabos][inactive]]

Attachment: LatestNightly79

Comment 4

[Zibi Braniecki [:zbraniecki][:gandalf]]

:tbabos - from your screencast it seems that we do autofill CC which is in contrast to comment 0.

I also don't see the credit card being removed when selecting the type on the checkout page.
Your screencast shows the manual "Add a payment method" UI, not "Checkout" UI.

To sum it up, there are three issues reported in this bug:

1. Macy's checkout page does not offer autofill on CC field
2. Macy's checkout page removes the already-filled CC field if the user changes credit card type select option
3. Macy's "Add a payment method" page removes the already-filled CC field if the user changes credit card type select option

I cannot reproduce (1) and (2).
I assume I need to create an account with Macy's to test (3).

:tbabos, :chsiang - can you please verify that you do reproduce (1) and (2)?

Comment 5

[chsiang]

Attachment: maycs guest checkout.mov

Comment 6

[chsiang]

Hi Zibi,
I'm not sure I understand (1) but I was able to reproduce everything :tabos described in comment 2.
So it looks like there are two autofill forms on Macy's.
A) is during the checkout flow (which is where I found the bug)
B) is when a user wants to add a payment method after signing in (which is where :tabos found the bug)

In A), 2) and 3) doesn't happen. The problem is the card type doesn't get filled and clear form option doesn't clear out the expiration date. I attached a screen recording for your reference.

I think for all the issues with B), we can make them P3 and visit later because we know most people use guest checkout & adding a payment method is a one time thing so it's less painful if it doesn't work properly.

Comment 7

[Timea Cernea [:tbabos][inactive]]

Confirming what :chsiang said in Comment 6 for the checkout page. (at the time I wanted to test the checkout page it was broken for me - CSS was not loaded, so I looked at the add payment method form instead)
Good to know tho that we might have different issues and it would be worth checking out the add payment option forms as well...not just the checkout as guest forms.

Comment 8

[Timea Cernea [:tbabos][inactive]]

Hi chsiang and Zibi,
Should the expiration date fields (the ones with dropdowns) be reset/cleared out? Checking in Invision doc says "When data being cleared, the expiry date remains"
The current behavior for most of the sites is that it loses the yellow autofill highlight, without any value resets.

Comment 9

[Zibi Braniecki [:zbraniecki][:gandalf]]

Let's focus on (A) flow please for now.

We may want to file a separate bug for (B) and set a different Priority for it.

For (A) we're exclusively talking about the guest checkout view and the following two issues:

1. When you select the credit card to be autofilled, the Type select doesn't select your card type
2. When you activate "Clear Autofill Form" the Expiration Month/Year selects don't get cleared

Matt:

1. Do we have heuristics for selecting a credit card type for <select>?
2. Do we have heuristics for resetting expiration month/year <select>?

Comment 10

[Matthew N. [:MattN]]

(In reply to Zibi Braniecki [:zbraniecki][:gandalf] from comment #9)

2. When you activate "Clear Autofill Form" the Expiration Month/Year selects don't get cleared

IMO this is fine for now. I don't think it's worth added complexity to do more unless you can use .defaultValue or something simple. I would leave this for a follow-up that's lower priority personally. Some sites don't have unset/empty default values so the month will just reset to 01/January anyways and that's not much better than some other arbitrary value IMO.

Matt:

1. Do we have heuristics for selecting a credit card type for <select>?

See comment 1. We have no heuristics for cc-type, we can only handle autocomplete=cc=type

2. Do we have heuristics for resetting expiration month/year <select>?

I don't know about how clearing is handled for <select> but the current behaviour in comment 8 sounds fine. I don't think we need "heuristics", clearing deals with fields already filled so the detection would have happened at fill time already.

Comment 11

[Timea Cernea [:tbabos][inactive]]

As a heads ups, the credit card type selector seems to not be specific to Macy's. It also happens on a test page, such as as:https://www.roboform.com/filling-test-all-fields. So if it will be fixed/implemented in the future, this is a note to check it out there too.
Clearing NI? for Chsiang since Matt sorted out that need info.

Comment 12

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: Bug 1642060 - Handle Credit Card Type select. r?abr

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bc92b3980a84
Handle Credit Card Type select. r=abr

Comment 14

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/bc92b3980a84

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

Since the status are different for nightly and release, what's the status for beta?
For more information, please visit auto_nag documentation.

Comment 16

[Alin Ilea, Desktop Test Engineering]

Attachment: 2020-07-27_12h16_48.mp4

Verified - Fixed in latest Nightly 80.0a1 (build id: 20200726214746), on Macys, using Windows 10. The card type is selected accordingly.