In my Reactjs app, I'm using the payment intent API from stripe to handle payments. I use the embeddable Payment Element <PaymentElement /> from @stripe/react-stripe-js to render the UI but the problem is that it takes a couple of seconds before the Payment Element is fully loaded in the UI.

Is there any way I can access its loading state and show a loading spinner while it's being loaded?

CodePudding user response：

Stripe just added a new loader option to their PaymentElement product documented here. It allows you to have a skeleton render first while the UI is loading which should solve the problem you were going for.

Alternatively, you can listen to their ready event documented here so that you show a loading animation until the event is fired.

While this is for their vanilla JS integration, you can use those with their React library since you control which option to pass on the PaymentElement on initialization.