#ron-paymentelement-focus
frosty olive
haughty night
Even if I try it in the console it returns nothing. Just the payment element object
tender falcon
Taking a look here
haughty night
Appreciate it 🙂
elfin egret
ron-paymentelement-focus
Hey @haughty night can you share detailed code that isn't in a picture and confirm what this.paymentElement is? I assume this is not valid in the callback? Someone asked the same thing earlier this week
haughty night
Sure, it might be quite lengthy. this is referring to the data component in vue (where I store the payment element)
elfin egret
Sorry I meant it as a nudge to help you debug
Like right now the problem is you are expecting this. to work in the callback but I assume it doesn't
Like if you change your code and store the PaymentElement instance in a global variable it should work, the problem is that the reference to this. is changing based on the context no?
haughty night
No worries, ye I think you might be wring
this is what happens when I console.log(this.paymentElement)
Well in vue this. is referring to the data, which is basically a global variable (for that component)
haughty night
Yes, just just a second
Best thing I can give you is this.
https://devquote.motoringassistance.com/breakdown-cover/your-quote/build
The checkout will load at the end of this flow, feel free to use any dummy data you want
Everything is in test environment
elfin egret
What am I supposed to put in What is the vehicle's registration?
elfin egret
now I need a real looking uk phone
yeah sorry there are too many steps and if I reload it loses the page
I need a simple URL with the exact issue so that I can look at the code, add breakpoint, reload, etc.
haughty night
No worries, ye sorry I can't really provide that in an easy way, the only checkout we have is at the end of this flow and in that component
elfin egret
sure but it's a dev site, you should be able to build a really basic page that loads PaymentElement and calls .focus() on it
right now I'm not even finding the line of code that calls focus()
I see the .mount() _this2.paymentElement = _this2.elements.create("payment", paymentElementOptions); _this2.paymentElement.mount("#payment-element"); _this2.loading = false;
but I don't see the focus
haughty night
Yes I just checked I think it might be outdated, just give me a second another developer has deployed with a different branch
elfin egret
but yeah to help you I do need to figure out whether I get in that callback and what happens
it'd help if you had Cards too, I want to see if it works for cards
I see you have BACS Debit pre-filled and someone talked about that earlier this week and I think it might have had a weird behaviour in that case
haughty night
Well in my newest code card comes first
elfin egret
really what I recommend here is to do a really simple PaymentElement integration and confirm .focus() works there
elfin egret
ah and yeah that someone was just you a few days ago 😅
haughty night
Here is the components code whilst I figure out the dev server issue
haughty night
ah and yeah that someone was just you a few days ago 😅
😭
elfin egret
sure but I don't know what to do with that code
All I want is to help you debug as the dev owning that code
Step 1: ignore your code entirely and do a really basic page that renders the PaymentElement and calls .focus() and confirm it works
I'm going to try bacs in the meantime on my end
haughty night
thank you, I'll do what you suggested now
I am thinking it could be something to do with async() maybe
My page waits to create a subscription/customer/etc before giving the payment intent to the payment element
but then again I am waiting for the 'ready' event from the element
elfin egret
yeah I mean it could be anything, hence the doing a really basic page. But I'll be back in a few minutes with what I see with my own code
Okay I tried, BACS + email disabled => Sort Code is focused
haughty night
hmm okay, I am just trying to strip everything out the page now
I do this as well when the payment is processing (which works)
But I think that is a different object I am changing their rather than the payment element
elfin egret
yeah I don't think that's the issue
Really just do card only first
if you do, you'll immediately know if .focus() is working or not
haughty night
I think I may have figured it out, the page beforehand is causing it
elfin egret
okay tried to look at your dev site but it's bugged and can't get past the second screen
ah
haughty night
The div is hidden until the checkout button is pressed (you may have seen on the flow on step 3)
I don't think the DOM can be accessed properly when I try to focus
elfin egret
yeah if that's the issue you need to have a separate handler for when the div is visible and then call .focus()
haughty night
Ye, weird thing is though If I click through quick enough, I can see the checkout loading but the focus still doesn't work
i.e it's visible, ready event is fired but doesn't focus
and also doesn't work from the console either
It's gonna be a long one to fix this I think 😭
elfin egret
I mean step one: add a delay to calling focus and see if that works
haughty night
but focus will only fire when it's ready (and I can get to the page before that happens)
elfin egret
but in the ready event you can use setTimeout() to cause .focus() to be called seconds later
haughty night
Yes that works 🤯
elfin egret
okay so it is what you thought then
you need to figure out how to know when your div is "visible" and then call focus
elfin egret
not sure, you seemed to know what was the problem earlier, I don't really get your setup
haughty night
I dont know why Im asking you, its my shit code 🤣
elfin egret
LOOOOL
haughty night
haha ye its that div
elfin egret
you said it not me 😹
haughty night
My head is scrambled egg
Ok, I've fixed it now. Thanks for everything. You were very helpful 👍
elfin egret
Glad I could help 🙂