Access Stripe Payment Element's loading state

Question

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?

Answer 1

For anyone not content with simply using their loader, you can listen to the ready event (docs).

To do this, you have to get the element first, which is a step that confused me. You should have the elements reference from the useElements hook. In useEffect you can try to do elements.getElement('paymentMethod') but you will get an error saying:

A valid Element name must be provided. Valid Elements are: card, cardNumber, cardExpiry, cardCvc, postalCode, paymentRequestButton, iban, idealBank, p24Bank, auBankAccount, fpxBank, affirmMessage, afterpayClearpayMessage; you passed: paymentElement.

However, the correct thing to get is payment despite not being in that list:

const element = elements.getElement('payment')
element.on('ready', () => {
    console.log("READY")
})

Answer 2

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.