0

I am getting the error "Uncaught IntegrationError: Can only create one Element of type card." I set the Elements provider in the root component. I read this article Only one element of type cardNumber can be created in which I think has the similar problem with mine, but we are using a little different syntax, if we are having the same problem then how can I integrate useEffect in my case?

This is my root component:

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

const stripePromise = loadStripe(process.env.PUBLISHABLE_KEY);

function MyApp({ Component, pageProps }) {
  return (
        <Elements stripe={stripePromise}>
            <Component {...pageProps} />
        </Elements>
  );
}

export default MyApp;

This is my stripe page (where the card component is rendered).

import { CardElement } from '@stripe/react-stripe-js';

const Buy = () => {

  return (
    <div className={styles.container}>
      <div style={{ width: ' 70%' }}>
        <CardElement />
      </div>
    </div>
  );
};

export default Buy;
Aidenhsy
  • 915
  • 2
  • 13
  • 28
  • The card component is executed on every render of the component. But I do not see where the card elements are? Could you include them? – yudhiesh Jan 21 '21 at 06:01
  • Hi @yudhiesh the card component is the rendered in my "stripe page". – Aidenhsy Jan 21 '21 at 06:11
  • You'll need to include more code before anyone can help you with this. Like where your `Buy` component is being used. – Paul Asjes Jan 21 '21 at 07:24
  • @Aidenhsy you may want to check this answer if it helps you https://stackoverflow.com/a/67055215/12935256 – marko424 Apr 12 '21 at 09:16

0 Answers0