We could not retrieve data from the specified Element.Please make sure the Element you are attempting to use is still mounted

Question

I am encountering an issue while integrating Stripe with React.js. The error message I'm facing is: 'We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.'

Here is the relevant code snippet:

// WithStripe Component
    import React from "react";
    import { useSelector } from "react-redux";
    import { Elements } from "@stripe/react-stripe-js";
    import { loadStripe } from "@stripe/stripe-js";
    
    function WithStripe({ children }) {
      const { stripeKey } = useSelector((state) => state?.stripeReducer);
      let promise = null;
      if (stripeKey) {
        promise = loadStripe(stripeKey);
      }
      const { language } = useSelector((state) => state?.AppReducer);
      return (
        <Elements
          stripe={promise}
          options={{
            locale: language,
          }}
        >
          {children}
        </Elements>
      );
    }
    
    export default WithStripe;
    
    // Entry point
    import React, { Suspense } from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./app/Index";
    import WithStripe from "components/Hoc/WithStripe";
    
    ReactDOM.render(
      <WithStripe>
        <App />
      </WithStripe>,
      document.getElementById("root")
    );

Answer 1

Could you include the code for the Strip call method in the question?

See if these answers solve your problem...

Stripe not working with error 'Uncaught (in promise) Error: We could not retrieve data from the specified Element.'