Credit card autofill doesn't work on rushtix.com (checkout.stripe.com)
Categories
(Toolkit :: Form Autofill, defect)
Tracking
()
People
(Reporter: cpeterson, Assigned: tgiles)
References
(Blocks 1 open bug, )
Details
Steps to reproduce
- Open https://rushtix.com/
- Click on an upcoming event's page.
- Click the big orange "BOOK NOW" button.
- Fill out the "Create an Account" form to register a free account.
- Click the big "CHECKOUT" button.
- On the "Pay with card" page, click in the "Card information" form fields
Expected result
Firefox should autofill my saved credit card information or show the credit card autofill popup when I click in the credit card form.
Actual result
Nothing happens. Firefox doesn't autofill my saved credit card information.
The URL says rushtix.com checkout is using Stripe Checkout (https://checkout.stripe.com/), so fixing this compatibility issue seems pretty important!
Inspecting the checkout page HTML:
<fieldset class="FormFieldGroup-Fieldset" id="cardNumber-fieldset">
<div class="FormFieldGroup-container" id="cardNumber-fieldset">
<div class="FormFieldGroup-child FormFieldGroup-child--width-12 FormFieldGroup-childLeft FormFieldGroup-childRight FormFieldGroup-childTop">
<div class="FormFieldInput has-icon">
<span class="InputContainer" data-max="">
<input
class="CheckoutInput CheckoutInput--invalid CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-number"
autocorrect="off"
spellcheck="false"
id="cardNumber"
name="cardNumber"
type="tel"
aria-label="Card number"
placeholder="1234 1234 1234 1234"
aria-invalid="true"
value=""
aria-describedby="required-cardNumber-fieldset"
/>
</span>
<div class="FormFieldInput-Icon is-loaded">
<svg class="InlineSVG Icon Icon--sm" focusable="false" height="12" viewBox="0 0 12 12" width="12">
<g fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 12)">
<circle cx="6" cy="3.2" fill="currentColor" r="1"></circle>
<g stroke="currentColor">
<circle cx="6" cy="6" r="5.5"></circle>
<path d="m6 9.2v-3.2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="FormFieldGroup-child FormFieldGroup-child--width-6 FormFieldGroup-childLeft FormFieldGroup-childBottom">
<div class="FormFieldInput has-icon">
<span class="InputContainer" data-max="">
<input
class="CheckoutInput CheckoutInput--invalid CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-exp"
autocorrect="off"
spellcheck="false"
id="cardExpiry"
name="cardExpiry"
type="tel"
aria-label="Expiration"
placeholder="MM / YY"
aria-invalid="true"
value=""
aria-describedby="required-cardNumber-fieldset"
/>
</span>
<div class="FormFieldInput-Icon is-loaded">
<svg class="InlineSVG Icon Icon--sm" focusable="false" height="12" viewBox="0 0 12 12" width="12">
<g fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 12)">
<circle cx="6" cy="3.2" fill="currentColor" r="1"></circle>
<g stroke="currentColor">
<circle cx="6" cy="6" r="5.5"></circle>
<path d="m6 9.2v-3.2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="FormFieldGroup-child FormFieldGroup-child--width-6 FormFieldGroup-childRight FormFieldGroup-childBottom">
<div class="FormFieldInput has-icon">
<span class="InputContainer" data-max="">
<input
class="CheckoutInput CheckoutInput--invalid CheckoutInput--tabularnums Input Input--empty"
autocomplete="cc-csc"
autocorrect="off"
spellcheck="false"
id="cardCvc"
name="cardCvc"
type="tel"
aria-label="CVC"
placeholder="CVC"
aria-invalid="true"
value=""
aria-describedby="required-cardNumber-fieldset"
/>
</span>
<div class="FormFieldInput-Icon is-loaded">
<svg class="InlineSVG Icon Icon--sm" focusable="false" height="12" viewBox="0 0 12 12" width="12">
<g fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 12)">
<circle cx="6" cy="3.2" fill="currentColor" r="1"></circle>
<g stroke="currentColor">
<circle cx="6" cy="6" r="5.5"></circle>
<path d="m6 9.2v-3.2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</div>
</div>
</div>
<div style="opacity: 0; height: 0px;">
<span class="FieldError Text Text-color--red Text-fontSize--13"><span></span></span>
</div>
</div>
</fieldset>
|
Assignee | |
Comment 1•4 years ago
|
||
Taking the bug so I can do an investigation to see if this is still reproducible.
|
|
Assignee | |
Comment 2•4 years ago
|
||
Haven't been able to reproduce on Nightly 93.0a1 or on Release 90.0. There does seem to be another issue where we aren't clearing the preview style correctly if you choose to clear the autofill form, so maybe we can repurpose this bug for that.
|
|
Assignee | |
Comment 3•4 years ago
|
||
Hey Dimi, can you see if this is still reproducible or get QA to help verify this. Maybe this was fixed by Bug 1717603, but I'm not 100% sure.
|
||
Comment 4•4 years ago
|
||
Hi Timea, Could you help verify if this bug is fixed? thanks!
|
Reporter | |
Comment 5•4 years ago
|
||
Timea, you don't need to test. I filed this bug and already have an account to easily test.
The STR work for me now in Firefox 91 and Nightly 93 on macOS and Windows. Bug 1717603 was fixed in 92, but the STR work for me in 91 so some other change appears to have fixed this bug in some version <= 91.
|
||
Comment 6•4 years ago
|
||
Since it has been verified for nightly and release, is it verified for beta too?
For more information, please visit auto_nag documentation.
|
|
Reporter | |
Comment 7•4 years ago
|
||
(In reply to Release mgmt bot [:sylvestre / :calixte / :marco for bugbug] from comment #6)
Since it has been verified for nightly and release, is it verified for beta too?
Verified works for me in Beta 92.
Description
•