Firefox fails to capture on Stripe checkout for modcloth.com
Categories
(Toolkit :: Form Autofill, defect, P2)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox80 | --- | fixed |
People
(Reporter: jimm, Assigned: abr)
Details
(Whiteboard: [cc-autofill-mvp])
Attachments
(2 files, 2 obsolete files)
STR:
- Add something to your checkout basket on modcloth.com
- Go to checkout, checkout as Guest
- Enter personal and shipping information and submit
- Select credit card payment, fill in card information, submit form
result: the card is saved and displayed as a little card entry on the site. However the card capture doorhanger never displays.
|
Assignee | |
Comment 1•4 years ago
•
|
||
The issue here is that there's never any form submission that takes place while the credit card information is visible in a form.
When one enters credit card information, there's a <button> marked "Save". The only thing this button does is trigger JS code, which eventually performs a POST with the entered information, in a form like:
type=card&billing_details[name]=test&billing_details[email]=test%40test.com&billing_details[phone]=214+-+555+-+0123&billing_details[address][city]=Dallas&billing_details[address][country]=US&billing_details[address][line1]=123+W+Main+St&billing_details[address][line2]=&billing_details[address][postal_code]=75208-1929&billing_details[address][state]=TX&card[number]=346064466075909&card[cvc]=222&card[exp_month]=12&card[exp_year]=22&guid=NA&muid=296cd88b-f0d1-4b5a-aeed-84d9cf5f539c&sid=8a96bcff-2cc7-4ac0-81cf-b0487cb6f428&pasted_fields=number&payment_user_agent=stripe.js%2F2237f4c2%3B+stripe-js-v3%2F2237f4c2&time_on_page=1721039&referrer=https%3A%2F%2Fwww.modcloth.com%2Fcheckout%3Ftype%3Dguest&key=pk_live_JT2wMsIEdS9dEoqQrgOaBnIr00VPmuYPKM
If we're dedicated to making sure the popup appears under these circumstances, I can see two potential paths, but both would be somewhat tricky:
- Add code that monitors
clickevents for button elements in the DOM, and which triggersFormAutofillContent.formSubmitted()when they are detected. The plumbing for this would be rather straightforward, but it comes with the (potentially extreme) complication that we would want to make sure that the button being activated has semantics that mean something like "I've entered credit card information and am now attempting to commit it." It's possible that Fathom could help with the identification of such buttons, but it may be tricky finding a sufficiently large training set. - Add code that examines outbound
POSTrequests, and runs heuristics on their fields to (a) determine whether a form is likely to contain credit card information, and (b) identify whichPOSTbody fields correspond to cc-number, cc-name, cc-exp, etc. Right now, all of our code operates on DOM fields (which have significantly more context), so this approach would be architecturally new, and functionally experimental (in the sense that even if we implemented it, it may well not be reliable enough to deploy).
|
|
Assignee | |
Updated•4 years ago
|
|
|
Assignee | |
Comment 2•4 years ago
|
||
Per suggestion from MattN: a third approach here would be to watch for credit card field removal from the DOM, and prompting users to store card information when that happens.
|
Reporter | |
Updated•4 years ago
|
|
|
Assignee | |
Comment 3•4 years ago
|
||
After some experimentation with monitoring DOM mutations, I've discovered that the issue -- similar to Costco -- is that the credit-card-related fields are actually <iframe> elements that point to documents on stripe.com. Unlike Costco, these subdocuments contain hidden fields designed to make them compatible with autofill.
For next steps, I plan to experiment with detection of unloading of a framed document containing credit card fields.
|
|
Assignee | |
Comment 4•4 years ago
|
||
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 5•4 years ago
|
||
Pushed by adam@nostrum.com: https://hg.mozilla.org/integration/autoland/rev/14fe670ec3f6 Treat form in <iframe> "pagehide" event as form submission r=zbraniecki
Pushed by adam@nostrum.com: https://hg.mozilla.org/integration/autoland/rev/16184f3438a2 add documentation to FormAutofillCreditCardSection constructor r=zbraniecki
|
|
Assignee | |
Comment 8•4 years ago
|
||
|
||
Comment 9•4 years ago
|
||
Backed out for xpc failures on test_autofillFormFields.js. CLOSED TREE
Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=309383417&repo=autoland
Backout link: https://hg.mozilla.org/integration/autoland/rev/7af7f2904fbc8dbb76b9fe88b5d7bdd7438b4d9a
|
|
||
Updated•4 years ago
|
|
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 10•4 years ago
|
||
New patch should address the xpcshell errors.
|
||
Comment 11•4 years ago
|
||
Pushed by adam@nostrum.com: https://hg.mozilla.org/integration/autoland/rev/abf3c361702b Treat form in <iframe> "pagehide" event as form submission r=zbraniecki
|
||
Comment 12•4 years ago
|
||
| bugherder | ||
|
||
Comment 13•4 years ago
|
||
Hi,
In my attempt to verify this fix, I noticed that when I submit the forms with valid card information nothing happens, no doorhanger is displayed and there is an error in the browser console (see the video above).
|
|
Assignee | |
Comment 14•4 years ago
|
||
(In reply to Alin Ilea from comment #13)
Created attachment 9166227 [details]
modcloth console error.mp4Hi,
In my attempt to verify this fix, I noticed that when I submit the forms with valid card information nothing happens, no doorhanger is displayed and there is an error in the browser console (see the video above).
That's an error that I encountered from time to time even before implementing this patch (as I was trying to figure out what the website was doing). From my experimentation, I think they have a list of credit card numbers that they've blocklisted for being "commonly used fake numbers." Try using a uniquely-generated fake number from something like https://saijogeorge.com/dummy-credit-card-generator/
Description
•