Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for cross-browser autofill in CardExpiry component #35

Open
apennell opened this issue Feb 4, 2021 · 0 comments
Open

Allow for cross-browser autofill in CardExpiry component #35

apennell opened this issue Feb 4, 2021 · 0 comments

Comments

@apennell
Copy link

apennell commented Feb 4, 2021

Expected behavior

When using a form with the individual card fields, as in demo example # 1, I am able to use autofill to populate the card number field in Safari and Firefox. This behavior should also work to autofill the card's expiry date.

Current behavior

The card number fields works with autofill in Safari and Firefox, but I am unable to autofill the expiration date.

There is an old Braintree issue about this similar situation. The expiration date field doesn't consistently work unless it's accompanied by a "card-number" field, but that's in a separate iframe so it doesn't recognize it.

Suggested fix

The Braintree issue linked above was resolved with a more complex solution, but a very simple fix is to render an invisible input alongside the expiration month field, if it's not the group CardComponent type. Add an input with the following fields in the same iframe width display:none and autofill then works for expiration:

<input name="cardnumber" autocomplete="cc-number">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant