chargebee-js-wrappers icon indicating copy to clipboard operation
chargebee-js-wrappers copied to clipboard

Allow for cross-browser autofill in CardExpiry component

Open apennell opened this issue 4 years ago • 0 comments

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">

apennell avatar Feb 04 '21 02:02 apennell