red_api

[delicate island]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1432359231302140020

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[woven umbra]

Hi, can you say more please? When did this start happening? At what stage does this happen? What integration documentation are you following?

[magic gate]

      paymentElement.on('change', paymentChanged);
      paymentElement.on('ready', paymentElementReady);

I hide the Stripe form first and display a loading page

when paymentElementReady(event) fires, I make it visible

but then it proceeds to display on the page

as in proceeds to load

[woven umbra]

Can you share your URL where I can reproduce this?

[magic gate]

sure - it's part of booking an event for our Event Venue

https://links.thehibiscusraleigh.com/widget/bookings/hibiscusbookings-sunday6hourspef2bv

select a Sunday, enter dummy info

you should see the "made visible" alert which occurs in the ready method

I put a bunch of error debug in the console too

" paymentElementReady with event: xxx"

[woven umbra]

I select the date, then I see the "made visible" alert, and then the page loads. I'm unclear what you expect vs. what is exactly happening. Can you share more details please? Or record a screenshare?

[magic gate]

      console.error("in paymentElementReady with event: " + JSON.stringify(event));
      console.error("in paymentElementReady with event: " + JSON.stringify(event));
      console.error("in paymentElementReady with event: " + JSON.stringify(event));
      console.error("in paymentElementReady with event: " + JSON.stringify(event));
      console.error("in paymentElementReady with event: " + JSON.stringify(event));
      showStripeForm();
    }

    function showStripeForm() {
      var loadingDiv = document.getElementById('loading');
      loadingDiv.style.display = "none";

      var topDiv = document.getElementById('main');
      topDiv.style.display = "block";
      console.error("made topDiv visible");
      console.error("STRIPE FORM MADE VISIBLE");
      alert("made visibile");
      console.error("alert fired ");
    }

the alert happens AFTER the ready event fires

so the payment elements should all be loaded by then?

I want to hide the form until everything is laid out

[woven umbra]

Is not the form hidden until after the "made visible" alert?

[magic gate]

yes

but then it should all be "ready", not starting to load

The overall strategy is:
Use CSS to initially hide the element in a way that reserves its space on the page.
Use a JavaScript event listener that fires after the DOM is ready to remove the hiding class.```

[woven umbra]

Can you log less event please? While trying to debug, there are too many events and it looks like the event is fired accordingly when it's ready, and then the UI appears