Cédric Morelle

[torpid elbow]

Not sure I understand exactly

Can you elaborate?

[ionic cairn]

sure

I have my submit button there:

    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text"><%= t("website.premium.fast_stripe.pay_now", money: subscription_product.get_hr_price).html_safe %></span>
  </button>```

[fathom bluff]

https://stripe.com/docs/js/element/events/on_ready

This is what I was talking about in chat

[ionic cairn]

and I want to find a trigger to enable it only when Stripe's form has been fully loaded

[torpid elbow]

Ah yeah the event Keith suggested is what you'd want

[ionic cairn]

I'm not a king of JS, where should I add this onready event in my CheckoutFastStripe.js ?

[fathom bluff]

From a quick scan I would make your submit button only visible when that event has fired

Or

        .querySelector("#payment-form").addEventListener("submit", handleSubmit);``` 
this line here

Only register that event listener after the event has fired, but that may confuse users who press it before it's ready and nothing happens

[ionic cairn]

it makes senses, Keith still where would you place this code of yours ?

[fathom bluff]

I am using vue.js so it's a slightly different flow from yours

But I do this.

this.paymentElement.on('ready', () => {
  this.loading = false;
});```

When it's ready I set a variable (loading) to false, which while true hides the form and sets a loading spinner

So maybe for you, on page load have a "hidden" class on your button, then when that 'ready' event fires, remove the class from the buttton so it's visible

[ionic cairn]

got it I will give a try thanks a lot @fathom bluff much appreciate

it works like a charm @fathom bluff thanks a lot