alexb_ca

[primal dock]

Yes! You can listen to ready event to find out when the element is fully rendered: https://stripe.com/docs/js/element/events/on_ready

Before the element is fully rendered, a spinner can be displayed

[deep stirrup]

Thanks that looks promising.. how do I get a reference to the element to do that?

Eg in my code I'm using the react tags like <Element/>

Like you do here

[severe girder]

Hi @deep stirrup I'm taking over this thread

btw there's a default loader that comes with stripe elements. You can turn it on by settting it to always https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader

[deep stirrup]

I was hoping add my own, is there no way to get a callback when stripe elements loads?

[severe girder]

https://stripe.com/docs/js/element/events/on_loaderstart you mean this?

[deep stirrup]

That's what river suggested, no?

I asked him a follow up question,... No response.

[severe girder]

No it's different. Please open the link and take a look

[deep stirrup]

Well it still requires me to have a reference to element which I don't have, so that's why i asked about that

[severe girder]

Hmm, you have difficulty in getting a element reference?

[deep stirrup]

I don't know how to, I was just asking how

If you're not willing to tell me how then just say so

[severe girder]

I'm willing to, but I need to know what you don't know.

[deep stirrup]

I've asked twice now lol

You not responding to the question isn't helping

[severe girder]

If you are using Stripe React SDK, you can get the elements through useElements hook https://stripe.com/docs/stripe-js/react#useelements-hook

[deep stirrup]

Ok well that I can do.. but I thought your link said element.on...

Not elements, so I imagined it was something else

[severe girder]

Ah, I see

[deep stirrup]

So you're saying I do: elements.on()?

[severe girder]

That's the case if you are using Stripe.js directly

[deep stirrup]

Where elements is the result of use elements

Well I'm not...

Why is why I keep asking...

[severe girder]

If you are using react, the syntax is a bit different

[deep stirrup]

I'm sure it is...I've been asking that

Would you care to share? 🙂

[severe girder]

Sure, let me a sec

        id="payment-element"
        onLoaderStart={() => {}}
...```

Something like this

[deep stirrup]

Thanks, that looks like something I can try...

any docs on this? When does the callback get called? When the loader starts...?

[severe girder]

You can refer to the same Stripe.js doc that I sent earlier.

[deep stirrup]

This page? https://stripe.com/docs/stripe-js/react#useelements-hook

I don't see onLoaderStart on the page

[severe girder]

https://stripe.com/docs/js/element/events/on_loaderstart this page, the first one I sent to you.

[deep stirrup]

I don't see any mention of onLoaderStart there either

I do see element.on(...)

Ok so it calls back when the loader UI is mounted? That doesn't sound like what I'm asking about at all

I was looking for a callback or way to detect when the stripe elements are fully loaded and rendered

[severe girder]

Just to clarify, you want to listen for events that tells your when the PaymentElement is loaded, not when it starts to load? Because that's what you told me in the beginning.

[deep stirrup]

I wrote: "Hi, I'm working with stripe elements, with stripe-js/react https://stripe.com/docs/stripe-js/react#setup, is there a way I can display a spinner while waiting for stripe elements to load? eg a callback or a way to detect it?"

[severe girder]

"I was hoping add my own, is there no way to get a callback when stripe elements loads?" <- this is what you wrote

[deep stirrup]

Yes which was in response to another reply from you where you said stripe had its own loader

You said there was a default loader

[severe girder]

Anyway, I believe river has already provided the doc for the ready event, you can listen to that event to get notified.

https://stripe.com/docs/js/element/events/on_ready this is link if you need it again

[deep stirrup]

Implying the default loader displays a loader while stripe elements is loading

Oh man

When he provided that answer I asked a follow up

[severe girder]

I'd suggest you to try it out. If you face any problems, feel free to reach out again.

[deep stirrup]

And you have not responded to that question

[severe girder]

I believe river has already answered the question. Maybe I miss somthing, can you tell me which part of the answer that you don't understand?

[deep stirrup]

Again, I don't have element

So I don't have a spot to write element.on(...)

[severe girder]

"If you are using Stripe React SDK, you can get the elements through useElements hook https://stripe.com/docs/stripe-js/react#useelements-hook" <- this is what I wrote earlier, did you get a chance to take a look?

[deep stirrup]

We discussed that already

[severe girder]

And if you are using Stripe react library, I also share you an example on how to listen to event

        id="payment-element"
        onLoaderStart={() => {}}```

[deep stirrup]

I'm just asking for a single event, when it's loaded

Not when loading starts

[severe girder]

I'm afraid that I won't be much of help if you are always switching topics

[deep stirrup]

I have no idea why you keep going on about when loading starts

I have not switched topics once

It's the exact same question I had when I started this thread

Are there no docs at all about this?

Something like

<PaymentElement onReady={() => {}}

?

[severe girder]

Yes. You can also take a look at https://stripe.com/docs/stripe-js/react#element-components for full API reference

[deep stirrup]

Thanks!

I don't understand why we had this huge conversation going all over this place. It seems like a pretty simple answer.

[severe girder]

me either

[deep stirrup]

Well it started when you suggested stripe had a default loader, then to changed topics to loading start

And not responding to my previous question