En mi aplicación Reactjs, estoy usando la API de intención de pago de stripe para manejar los pagos. Utilizo el elemento de pago incrustable <PaymentElement /> de @stripe/react-stripe-js para representar la interfaz de usuario, pero el problema es que tarda un par de segundos antes de que el elemento de pago se cargue por completo en la interfaz de usuario.
¿Hay alguna forma de que pueda acceder a su estado de carga y mostrar un indicador de carga mientras se carga?
Stripe acaba de agregar una nueva opción de loader a su producto PaymentElement documentado aquí . Le permite tener un esqueleto renderizado primero mientras se carga la interfaz de usuario, lo que debería resolver el problema que estaba buscando.
Alternativamente, puede escuchar su evento ready documentado aquí para que muestre una animación de carga hasta que se dispare el evento.
Si bien esto es para su integración Vanilla JS, puede usarlos con su biblioteca React ya que controla qué opción pasar el elemento de pago en la inicialización.