chargebee-js-wrappers
chargebee-js-wrappers copied to clipboard
Allow for cross-browser autofill in CardExpiry component
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">