<* Element> should support autocomplete

[atony88]

I am using the stripe elements: <CardNumberElement> , <CardExpiryElement> and <CardCVCElement> and I am getting these warnings for every single of them:

Input elements should have autocomplete attributes (suggested: autocomplete='cc-number', confirm at https://goo.gl/6KgkJg)

And by passing `autComplete='cc-number' I get this back:

Unrecognized create() parameter: autoComplete is not a recognized parameter. This may cause issues with your integration in the future

So, I was wondering if anybody else have this problem and would appreciate your helps in advance.

[asolove-stripe]

Hi @atony88! The short answer is: there's no need to do anything. You can just ignore the first warning.

The long answer is a bit interesting!

As I think you know, the first set of warnings you get is from your browser (looks like Chrome?), which is suggesting that some of the inputs inside of our Elements iframes should have autocomplete attributes The second set of warnings is from Stripe Elements itself, telling you that we don't support you passing in an autoComplete parameter.

If you inspect inside the markup of an Element, you'll see that the main, user-visible input does have the correct autocomplete attribute. The ones the browser is complaining about are hidden inputs with autocomplete="fake" set on them. We use these hidden inputs to manage focus between multiple elements and we don't ever want them to get autocompleted. The browser isn't happy about the value fake. But, for complex reasons, providing an invalid value is a more reliable way to prevent autocomplete than than providing autocomplete="off".

So, while we'd rather not have developers see this warning in the console, we think it's better that way than any alternative we can think of, which would potentially harm the end-user experience.

So, tl;dr; nothing to worry about.

[justswim]

Hi @aaron-stripe!

First off thank you for all the hard work on this package. Makes life a lot easier!

Just to follow up on this, I want autocomplete to work in my site, so that users can enter their credit card information a lot more easily. Chrome autocomplete in the credit card form with react-stripe-elements right now doesn't seem to work. Is this a related / known issue?

Thanks, Eric

[atty-stripe]

@justswim autocomplete should work in Chrome, and you can test it on elements-examples: https://stripe.github.io/elements-examples/.

Can you confirm that you have saved cards in chrome://settings/autofill? If possible, please share a link to your site so we can take a look.

[justswim]

Hi @atty-stripe,

I'm sorry, I should have been more clear. Autofill works, but I can't autofill the name and the credit card information at the same time. I want to be able to autofill both at the same time so that it all happens in one click. This is the way autofill works on other e-commerce sites like WayFair, etc.

I believe this issue exists in the examples you shared.

Is this a known issue or should I file a new issue for it?

Thanks, Eric

[atty-stripe]

Ah gotcha! This is a known issue unfortunately, and something we do intend on fixing in the future. Will let you know once it's fixed!

[justswim]

Hi @atty-stripe, is there an issue I can track this issue on? It would be good to have some update on it!

Thanks, Eric

[atty-stripe]

@justswim there isn't, and we use this issue tracker to keep track of bugs in react-stripe-elements specifically, not Elements the underlying library. I'll comment here once it's fixed.

[enuchi]

Hi @atty-stripe just checking if there are any updates to this. We would also like to be able to trigger credit card number autocomplete from a "name on card" field, as in other sites.

Thanks, Elisha

[oliver-stripe]

@enuchi Hi there! Sorry, no updates here yet. There seem to be complications with getting browsers to properly handle this case where the Elements inputs are in iframes (which we do in order to allow securely inputting payment info). We have not yet determined a solution, unfortunately.

[aanders77]

I think the bug is worse than what is described above; In your examples (and in my implementation), when using Chrome autofill for the credit card number field it will only fill that field. Expiry and CVC is still left empty. That's not how it is supposed to work. When using autofill on the card number field in this fiddle, expiry and cvc is also being filled out: https://jsfiddle.net/jx36khar/

[asolove-stripe]

@aanders77 thanks for the report! I'm seeing the same sometimes but not always, we are looking into it.

[shuzootani]

so as of now there is no way to enable autocomplete (for CardElement) ?

[JKazarian]

Any update on this issue? For me it auto-fills on name and then again for card number. I have to enter my CVV in the google confirmation popup each time. This makes for a poor user experience.

[niksauer]

We're also using the CardElement and are seeing varying autofill support. 1Password e.g. is able to fill the number and CVV fields both in Safari and Chrome. However, the expiry is left empty. The native Safari credit card picker only fills out the number.

Please reopen to allow external tracking.

[JohnMealy23]

@asolove-stripe and @oliver-stripe - Been more than a couple years since this was opened. Is this something Stripe has actively worked on / is actively working on?

Thank you!

[asolove-stripe]

Hi @JohnMealy23 could you say more about the problem you're seeing? If you're curious about the warnings for missing autocomplete tags, we've described why those are actually the way they should be here: https://github.com/stripe/react-stripe-elements/issues/199#issuecomment-384668301

Are you seeing some other problem with autocomplete behavior?

[niksauer]

We're also using the CardElement and are seeing varying autofill support. 1Password e.g. is able to fill the number and CVV fields both in Safari and Chrome. However, the expiry is left empty. The native Safari credit card picker only fills out the number.

@asolove-stripe Is this expected behaviour? Because that's my reason for wanting to reopen this ticket.