sam.siu-elements

[mental knoll]

heya @hot mason, what have you tried? can you share the relevant code snippets?

[hot mason]

Hey @mental knoll thanks. I am using exactly the same code from the quickstart

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();
 ...
  return (
    <div className={createClass()}>
      <form id="payment-form" onSubmit={handleSubmit}>
        <PaymentElement id="payment-element" />
        <button disabled={isLoading || !stripe || !elements} id="submit">
          <span id="button-text">
            {isLoading ? <div className="spinner" id="spinner" /> : "Pay now"}
          </span>
        </button>
        {/* Show any error or success messages */}
        {message && <div id="payment-message">{message}</div>}
      </form>
    </div>
  );
};

isLoading is set in the code which is used to handle confirm payment (when the Pay now button is clicked), and it is not related to loading of the Stripe Elements.

[mental knoll]

where did you define isLoading?

[hot mason]

Uploaded the full code

[mental knoll]

just because Stripe is loaded does not necessarily mean that the element is loaded/rendered, you would want to listen for this event : https://stripe.com/docs/js/element/events/on_ready to tell when the Element is fully rendered and can accept element.focus calls.

[dreamy delta]

Also @hot mason make sure to add a space after the Due date:

[hot mason]

@dreamy delta 😄 Will definitely do

[dreamy delta]

:)

[hot mason]

@mental knoll Much appreciated! Will give it a shot!