My e-commerce website application having issues with Stripe

Question

I need to create a custom component just to get the card information and store it on Stripe so I can charge it later.

v3:1 Uncaught (in promise) IntegrationError: We cannot retrieve data from the specified element.
Make sure the element you want to use is still mounted.
    at ni (v3:1:319630)
    at e._handleMessage (v3:1:324970)
    at e._handleMessage (v3:1:146061)
    at v3:1:322539

I got this error, I've checked to see if the component is mounted, but it is mounted all the time because this is how Stripe works, all Stripe components are in different settings for our application Brings extra load, but that's another topic.

I need to get rid of this error.

I have a route using stripe.checkout.sessions.create but it redirects the user to another tab which is not the behavior I want, I prefer the popup in the same app And get the card data there and store it.

Pass stripe reference in index (for global access)

import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

...others

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Provider store={store}>
                <Elements stripe={stripePromise}>
                    <ThemeProvider>
                        <App/>
                    </ThemeProvider>
                </Elements>
            </Provider>
        </BrowserRouter>
    </React.StrictMode>
);

Stripe CardInput Wrapper (just like in the documentation) Note: I tried this code in an empty project before nesting the components and it worked perfectly.

import React, {useState} from 'react';
import {CardElement} from '@stripe/react-stripe-js';
import {styled} from "@mui/material/styles";
import {Box, Stack, Typography} from "@mui/material";
import EzLoadingBtn from "../../ezComponents/EzLoadingBtn/EzLoadingBtn";

const CARD_ELEMENT_OPTIONS = {
    style: {
        base: {
            'color': '#32325d',
            'fontFamily': '"Helvetica Neue", Helvetica, sans-serif',
            'fontSmoothing': 'antialiased',
            'fontSize': '16px',
            '::placeholder': {
                color: '#aab7c4',
            },
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
        },
    },
};

const RootStyle = styled(Stack)(({theme}) => ({
    width: '400px',
    padding: '50px 30px 30px 30px'
}))

export default function CardInput({onSubmit}) {
    const [loading, setLoading] = useState(false);
    return (
        <RootStyle>
            <Box component='form' onSubmit={onSubmit}>
                <Stack flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}>
                    <Typography variant='span'>Card</Typography>
                </Stack>
                <CardElement options={CARD_ELEMENT_OPTIONS}/>
                <EzLoadingBtn
                    sx={{marginTop: '25px'}}
                    color="inherit"
                    size='large'
                    type='submit'
                    variant='outlined'
                    loading={loading}
                >
                    Save Card
                </EzLoadingBtn>
            </Box>
        </RootStyle>
    );
}

Answer 1

DONE - The problem is, I used to think of "wrapping" the entire application

<Elements stripe={stripePromise}>
   <ThemeProvider>
      <App/>
   </ThemeProvider>
</Elements>

That's enough, but it's not. The key is that you don't have to wrap your entire application in Elements, just the subcomponents that use certain stripe components (CardElement, PaymentElement, etc.).

/*父组件*/
<Elements stripe={stripePromise} options={options}>
    <CardInput/>
</Elements>

/*子组件*/
export default function CardInput() {
    return (
        <div>
            <PaymentElement/>
        </div>
    );
}

So you are ready.