Stripe PaymentElement intermittently not displaying

Question

I'm having a problem with Stripe's PaymentElement react component. It displays correctly but only sometimes. After doing multiple reloads/restarts of the entire react app, and multiple CTRL+F5, the form intermittently doesn't display. There doesn't seem to be any pattern to the times when it displays correctly nor the times when it fails to display.

When the modal displays, correct display of the payment form including PaymentElement component looks like this:

When the PaymentElement fails to display, there are two possible appearances. Either it shows the form fields with nothing in them:

Or the entire iFrame is empty, no fields or labels or any HTML content within the body.

I followed this documentation to integrate the Elements and PaymentElements components into my react app.

Initially I was developing using public and secret keys issued to a free trial account. It was hoped that switching to paid might make a difference, but now that I'm using paid keys I'm getting the same intermittent results with the PaymentElement sometimes not displaying.

I keep comparing my code to the docs and can't find what I've missed. As per the docs, the stripe promise is instantiated outside the component's rendering.

import { useState, useEffect, useRef } from 'react';
import './App.css';
import DynamicTextArea from './components/DynamicTextArea';
import MultiSelect from "./components/MultiSelect";
import CheckoutForm from './components/CheckoutForm';
import ReCAPTCHA from "react-google-recaptcha";

import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

const stripePromise = loadStripe("pk_test_xxxxxxxx");


function App() {

Payment intent is created with useEffect and an emtpy array so it triggers after page load. This react app is backed by a REST API (.NET6) which handles the calls to Stripe and returns the client secret.

const createPaymentIntent = () => {
    // Create PaymentIntent as soon as the page loads
    fetch("/payments/create-payment-intent", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: [{ id: "product001" }] }),
    })
        .then((res) => res.json())
        .then((data) => setClientSecret(data.clientSecret));
}

const showPaymentForm = async () => {
    setPaymentModalOptions({...paymentModalOptions, visible: true});
}

useEffect(() => {
    createPaymentIntent();
}, []);

Options to pass to the PaymentElement component, which is wrapped in a CheckoutForm component as per the docs:

const options = {
    clientSecret: clientSecret,
    appearance: {
        theme: 'stripe',
    }
};

The Stripe Elements component is wrapped in a bootstrap modal. To be clear, the modal always displays correctly, but intermittently the PaymentElement within the modal does not display.

    
        
            
                
                    {clientSecret && (
                        
                            
                        
                    )}

Lastly, the CheckouForm component where the PaymentElement actually resides.

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

import './CheckoutForm.css';

export default function CheckoutForm(props) {
  const stripe = useStripe();
  const elements = useElements();
  const [message, setMessage] = useState(null);
  const [paymentIsLoading, setPaymentIsLoading] = useState(false);

  const paymentElementOptions = {
    layout: "tabs"
  }

  const delay = async (ms) => new Promise(res => setTimeout(res, ms));

  const handleSubmit = async (evt) => {
    evt.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setPaymentIsLoading(true);

    const paymentResult = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: "http://localhost:44472",
      },
      redirect: 'if_required'
    });
    
    if (paymentResult.paymentIntent.status === 'succeeded') {
      setMessage("Payment successful!");
      
      // wait two seconds, then close the payment modal
      await delay(2000);
      props.onPaymentSucceeded();
      
    } else {
      setMessage("Payment unsuccessful");
    }

    setPaymentIsLoading(false);
  }

  return (
    
        
          
              
                  {paymentIsLoading ?
                      
                      : 
                  }
              
              
              
          
      
      {/* Show any error or success messages */}
      {message && {message}}
    
  );
}

I've seen intermittent rendering problems in React before and its often caused because of a pending response to an async call, or failing to use useEffect() correctly (I've done it multiple times). In this case I don't see where I'm going wrong. Thanks for your help.

UPDATE: This error appears in the console intermittently. The error sometimes appears even when the PaymentElement displays correctly. Other times the error doesn't appear even though the Payment Element fails to display. I'm not convinced they are connected.

UPDATE: I have reached out to Stripe support on this. In the meantime I'm sharing an additional screenshot. Sometimes when the form fails to display, there's an iFrame present in the page that contains the full payment form, but apparently the iFrame has opacity: 0. This is not a full explanation for the problems I'm having because sometimes the iFrame's body tag is literally empty, so it wouldn't matter whether it was invisible or not. But in this example, the iFrame is fully loaded with the Stripe Payment form, it's just invisible due to the opacity. I some point in the loading process I'm guessing the Stripe components are responsible for changing this property so the form displays, and that process is being interrupted before it gets there. Cause is still unknown.

The other failure state results in an empty root div within the iFrame's html body. In this failure state, as with the previous one shown above, there are no errors in the console.

Stripe PaymentElement intermittently not displaying

Answers (1)

Related Questions