Braintree-web: Autocomplete of "Name on card" with hosted fields Card Number and Expiration

[jmsjr]

General information

• SDK version: 3.53.0 and 3.55.0
• Environment: Sandbox
• Browser and OS : 78.0.3904.108-1 and Ubuntu Linux

Issue description

Not sure really where to ask if this is even possible, given that hosted fields only know about each other and does not know about non-hosted fields, but here it goes anyway:

Does braintree-web support auto-completing "Name on card" when auto-completion was initiated from either Card Number or Expiration hosted fields?

At the moment, when auto-completing from either card number and expiration hosted fields, the suggested payment method by Chrome does not even suggest to auto-complete the name on card.

1) See attached braintree-test.html and replace the 'sandbox_XXXXXX' token with a valid sandbox authorisation token.

Notice that the "Name on card" has the correct "name" attribute and "autocomplete" attribute as per suggestion at :

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values

2) Host the attached braintree-test.html in a web server and make sure it is served via HTTPS and that Chrome recognises that entire certificate chain.
3) Ensure you have stored credit card numbers in Chrome.
4) Auto-populate from either card number hosted field or expiration date hosted field using the card number suggested by Chrome.
5) Notice that Chrome does not even suggest or know about the "Name on card" ( because it is in a different HTML form than the HTML form within the IFRAME of the hosted field ).

braintree-test.zip

[crookedneighbor]

There's no way for us to populate the iframes when the autocomplete occurs from an external cardholder name field. (there's no "autofill" event we can listen for that will give us the credit card number)

The only way to do it would be to insert hidden inputs on the parent page to collect the card details, but then that would compromise the PCI compliance that Hosted Fields gives, because raw card details would be on your website.

We _can_ go the other way, and emit the cardholder name from the number field, since that's not PCI sensitive data. However, since the cardholder name is often going to be the first field someone enters, I think that's not too useful.

I think the only real solution to this is for us to add support for cardholder name being an iframe in hosted fields. That will allow it to interact with the other iframes and populate the autofilled credit card data. I've added this to our backlog.

[cp-lmeadows]

Any idea when "Name on Card" will be added to the hosted fields? Also having the issue with the autofill.

[crookedneighbor]

No timeline on this right now. It is in our backlog.

[cp-lmeadows]

I know there wasn't a good workaround in Dec. of 2019, but any recommendations for a workaround now?

My issue is with Google Pay wanting to autofill for the Name on Card field and only filling the Name on Card field, then it gives me autofill options again for the credit card, this is not a very good user experience.

[crookedneighbor]

This is in our backlog, but we don't have a set timeline yet.

[oliverlevay]

Is this fixed?

[crookedneighbor]

Fixed here would mean adding cardholder name as a supported field within hosted fields. This is in our backlog, but still no set timeline for when it will be addressed.

[crookedneighbor]

We've got part of this work done now, cardholder name is part of hosted fields in v3.65.0.

We still need to do the work to update the autofill handlers to account for this, but just wanted to give an update that there has been progress on this and I'm hoping we'll be able to close this out with the next release.

[crookedneighbor]

Fixed in v3.66.0 (note that npm is currently having issues publishing packages ), so this is available via our CDN, but may take a while to be available on npm.