Autocomplete and Elements

[ko...@kidbox.com]

Hi,

We recently started migrating to Elements and Stripe.js v3, using 3 different Elements (cardNumber, cardExpiry and cardCvc) and an input field for "Name on card" in our pages.

We noticed the browser autocomplete does work between the elements (although there's a little bug preventing it from working more than once on the same instance), but there is no way to receive the "Name on card" (autocomplete="cc-name").

Can an additional value be added to the change event so we can consume and fill it in our part of the form?

Thanks in advance,

Kobi

[Olivier Bellone]

Hi Kobi,

As the cardholder's name field is not managed by Elements, you can simply access its value via the DOM. Here's a basic example: https://jsfiddle.net/ywain/eckhnz19/

In this example, when the form is submitted, the cardholder's name is retrieved (var name = document.getElementById('name').value;) and passed in a hash as the second argument to stripe.createToken(...) [1]

If you're asking if it's possible to trigger Elements' change event [2] when the cardholder's name changes (or when it's autofilled by the browser), then the answer is no as Elements does not monitor this field at all. You'd need to set up a separate change event handler for the name field.

Best,

Olivier

[1] https://stripe.com/docs/stripe.js#stripe-create-token

[2] https://stripe.com/docs/stripe.js#element-on

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

[ko...@kidbox.com]

Hi Olivier,

My question focused on the autofill functionality, as moving from "custom payment form" to Stripe Elements killed our ability to fully use the autofill (which fills Name on Card, Card Number and Exp Date).

As I noticed you are supporting the autofill between different Elements' iframes (via hidden "fake" input fields), I wondered if an additional fake field would be considered to be implemented as a feature for retrieving the Name on Card from auto-filled entries.

Another problem with the autofill (which I guess you disabled for security reasons) is to update() the number and exp date once the browser suggests to fill a card for the "Name on Card". It forces us to disable the autocomplete on that field, and only allow it in the Elements themselves.

I've forked your jsfiddle and separated the Elements so you can better understand how our payment form works (we wanted to keep our current design, hence we didn't use the card Element) - https://jsfiddle.net/kobim/vr8p02rt/1/

- Double clicking the "Name" field will suggest to auto-fill the card. (which we can't for security reason - and that's ok.)

- Autofill works in the number/exp fields (but only once!), but we can't retrieve the "Name on Card" as Elements does not fake/monitor that.

I hope I explained myself better (with the attached example), and I should have added a "FEATURE REQUEST" into this post.

- Kobi

[Olivier Bellone]

Hey Kobi,

I see, thanks for the clarification! I was able to reproduce the issue with autofill using your JSFiddle, and I see your point. I'm not sure whether adding a new Elements "name" field is the best course of action, but in any case I have filed a report to make sure the developers are aware of the issue with Chrome's autofill (as well as your feature request).

Cheers,

Olivier

[ko...@kidbox.com]

Thanks Olivier!

[Stafie Anatolie]

Hi Oliver,

Do you have any updates on this? 

I was really surprised to see that there are no solutions for this yet, since this breaks completely the autofill feature – which is a must for checkout forms.

Just as Kobi, we don't use the card element alone, as we are constrained by design to have the expiry and cvc on different lines for mobile, so we are using the cardNumber, cardExpiry and cardCvc elements, which have the autofill feature broken when it is triggered from the card holder's name field.

Here are the issue I'm currently having with it:

- When triggered from the card holder's name field, it fills just that field and the card field, and expiry dates remain empty

- When triggered from the card holder's name field, the focus automatically jumps to a expiry or zip code field.

- After you trigger the autofill once, and let's say you remove something by mistake, you cannot trigger it again.

To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss+unsubscribe@lists.stripe.com.

[Olivier Bellone]

Hi Stafie,

I'm afraid I don't have any updates right now -- this is still being evaluated by the Elements dev team. I've updated our internal ticket with the issues you described.

Sorry I don't have a better answer for now! We will reply to this thread when we have updates to share.

Best,

Olivier