ron-paymentelement-focus | Stripe Developers | Page 1

lavish shoalBOT Apr 17, 2023, 6:17 PM

#

hot notch Apr 17, 2023, 6:18 PM

#

ron-paymentelement-focus

#

sorry still looking

smoky idol Apr 17, 2023, 6:23 PM

#

no worries thank you, I think it may be something I have to solve in my code

hot notch Apr 17, 2023, 6:23 PM

#

As far as I know it doesn't allow you to focus a specific input. What are you trying to focus beyond just using https://stripe.com/docs/js/element/other_methods/focus and having us focus the first input field

smoky idol Apr 17, 2023, 6:24 PM

#

Isn't that for the elements API though?

#

I'm using the payment element iframe

hot notch Apr 17, 2023, 6:26 PM

#

no that works for all Elements

#

I just tried locally and if you do this after the PaymentElement is ready it will focus the card number's input field for example

smoky idol Apr 17, 2023, 6:27 PM

#

                    this.paymentElement = this.elements.create("payment", paymentElementOptions);
                    this.paymentElement.mount("#payment-element");
                    this.loading = false;
                    this.paymentElement.cardElement.focus();

#

I tried this and it doesn't work, am I doing it incorrect

hot notch Apr 17, 2023, 6:28 PM

#

yeah you are doing it incorrect

#

1/ wht is .card element?
2/ you didn't wait for the element to be ready?

#

  console.log("FOCUS");
  paymentElement.focus();
});```

#

try this, it will work

smoky idol Apr 17, 2023, 6:29 PM

#

Ah I see

#

hmm it says undefined, I think it's because the payment element is outside the scope of that function

hot notch Apr 17, 2023, 6:34 PM

#

paymentElement is just my variable name

#

you need to figure out how to access paymentElement in your own code yes

smoky idol Apr 17, 2023, 6:34 PM

#

Ye I have the same, I'm just crap at javascript trying to figure it out

hot notch Apr 17, 2023, 6:34 PM

#

yours is this.paymentElement though it's different, and I don't know what your this. is. But you could try that at least

smoky idol Apr 17, 2023, 6:36 PM

#

I'm using vue

#

so my payment element is declared as a data property

hot notch Apr 17, 2023, 6:38 PM

#

I've never used Vue myself so I can't really help much unfortunately but hopefully something you or a colleague can help debug quickly

smoky idol Apr 17, 2023, 6:38 PM

#

I've figured it out thank you. The function was changing the context of this to the function so I couldn't access my data anymore

#

I just changed it to this

this.paymentElement.on('ready', (event) => {

#

works now, thanks for the help

hot notch Apr 17, 2023, 6:41 PM

#

yay!

smoky idol Apr 17, 2023, 6:45 PM

#

Wait actually it doesn't seem to be working

#

should it autofocus the first input?

#

I have reordered payment methods so bacs direct debit comes before card is that my issue

copper garnet Apr 17, 2023, 6:47 PM

#

👋 stepping in

#

It should focus the first input afaik

#

What are you seeing with BACS?

#

Should focus the Email field

#

Is that not what you see?

smoky idol Apr 17, 2023, 6:49 PM

#

Ah I have email hidden

#

that makes sense

#

I thought it would focus the sort code at the top

copper garnet Apr 17, 2023, 6:49 PM

#

Ah I would expect it to if email is hidden

#

Let me repro with BACS real quick

smoky idol Apr 17, 2023, 6:49 PM

#

   billingDetails: {
    email: 'never',
    phone: 'never'
   }
},```

#

I have this set

#

So it must be being focused in the background and I'm not seeing it

copper garnet Apr 17, 2023, 6:53 PM

#

Hmm actually mine does focus on Sort

#

Test yours again?

#

I'm seeing it work just fine

smoky idol Apr 17, 2023, 6:57 PM

#

Ye it's not working

#

strange

#

copper garnet Apr 17, 2023, 6:57 PM

#

Do you have a log in your ready function?

smoky idol Apr 17, 2023, 6:57 PM

#

Ye I can see it firing

copper garnet Apr 17, 2023, 6:57 PM

#

Add a log and make sure that it is getting hit inside that functino

smoky idol Apr 17, 2023, 6:57 PM

#

because my loading becomes false

copper garnet Apr 17, 2023, 6:57 PM

#

Ah okay

#

Hmmm

#

Try a hard refresh / reload the server?

#

Maybe something got cached?

smoky idol Apr 17, 2023, 7:00 PM

#

Ye just tried still not working, I've just console.log payment element and it seems fine

#

Should this contain something? if .focus is used

#

copper garnet Apr 17, 2023, 7:04 PM

#

Hmm let me check

#

Nope mine looks the same

smoky idol Apr 17, 2023, 7:25 PM

#

I cannot figure this out, is there anything I can console.log to check what's going wrong?

copper garnet Apr 17, 2023, 7:26 PM

#

Hmm

#

Not that I can think of. If you don't hide email does it focus on email properly?

smoky idol Apr 17, 2023, 7:29 PM

#

No doesn't seem to make a difference

copper garnet Apr 17, 2023, 7:31 PM

#

Hmm okay but same exact code works with Card?

smoky idol Apr 17, 2023, 7:32 PM

#

no doesn't seem to work with anything

copper garnet Apr 17, 2023, 7:32 PM

#

Oh

smoky idol Apr 17, 2023, 7:32 PM

#

I just removed all my extra code and just had boilerplate payment element

#

It might be an issue with vue, but I don't see how, I can still see the fire event

copper garnet Apr 17, 2023, 7:33 PM

#

Sounds to me in that case like something is potentially stealing the focus here

#

Do you have a link where I can repro?

smoky idol Apr 17, 2023, 7:35 PM

#

ye just a second, let me push to the dev server

#

It may be easier If I give you my code, you'll have to fill out a long form to see the result

copper garnet Apr 17, 2023, 7:38 PM

#

I mean your code should be fine if you have already logged out paymentElement and know the ready function is running.

#

It seems that something else is interacting with the input afaict

smoky idol Apr 17, 2023, 7:39 PM

#

I think you're right

#

https://gist.github.com/mattg1995/f85d13c9704163c78a27798ae1b603fb

Gist

Element

Element. GitHub Gist: instantly share code, notes, and snippets.

#

It may be the async method in vue not allowing it for some reason

copper garnet Apr 17, 2023, 7:45 PM

#

Yeah I mean this code looks fine to me. I'm not intimately familiar with Vue so can't really speak to whether it is a Vue-specific thing

#ron-paymentelement-focus