使用Stripe Payment Element时如何获取加载状态

import { useStripe, useElements } from '@stripe/react-stripe-js';
import { useEffect, useState } from 'react';

function MyPaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!stripe || !elements) {
      return;
    }

    const paymentElement = elements.getElement('payment');

    if (!paymentElement) {
      return;
    }

    paymentElement.on('ready', () => {
      console.log("Payment Element is ready!");
      setIsLoading(false);
    });

    paymentElement.on('change', (event) => {
        // Handle changes to the Payment Element state
    });

    paymentElement.on('blur', (event) => {
        // Handle blur events
    });

    paymentElement.on('focus', (event) => {
        // Handle focus events
    });
  }, [stripe, elements]);

  return (
    <div>
      {isLoading ? (
        <div>Loading Payment Element...</div>
      ) : (
        <form>
          <div id="payment-element">
            {/* Payment Element will be rendered here */}
          </div>
          <button disabled={isLoading || !stripe || !elements} id="submit">
            <span id="button-text">
              {isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
            </span>
          </button>
        </form>
      )}
    </div>
  );
}

export default MyPaymentForm;