Meine E-Commerce-Website-Anwendung hat Probleme mit Stripe

Question

Ich muss eine benutzerdefinierte Komponente erstellen, um die Karteninformationen abzurufen und sie auf Stripe zu speichern, damit ich sie später aufladen kann.

v3:1 Nicht abgefangen (in Versprechen) IntegrationError: Wir können keine Daten vom angegebenen Element abrufen.
Stellen Sie sicher, dass das Element, das Sie verwenden möchten, noch montiert ist.
    bei ni (v3:1:319630)
    bei e._handleMessage (v3:1:324970)
    bei e._handleMessage (v3:1:146061)
    bei v3:1:322539

Ich habe diesen Fehler erhalten. Ich habe überprüft, ob die Komponente gemountet ist, aber sie wird ständig gemountet, weil Stripe so funktioniert. Alle Stripe-Komponenten befinden sich in unterschiedlichen Einstellungen für unsere Anwendung. Bringt aber zusätzliche Last mit sich das ist ein anderes Thema.

Ich muss diesen Fehler beheben.

Ich habe eine Route, die stripe.checkout.sessions.create verwendet, aber sie leitet den Benutzer zu einer anderen Registerkarte weiter, was nicht das von mir gewünschte Verhalten ist. Ich bevorzuge das Popup in derselben App und erhalte dort die Kartendaten und speichere sie.

Stripe-Referenz im Index übergeben (für globalen Zugriff)

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

...Andere

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

Stripe CardInput Wrapper (genau wie in der Dokumentation) HINWEIS: Ich habe diesen Code in einem leeren Projekt ausprobiert, bevor ich die Komponenten verschachtelt habe, und er hat perfekt funktioniert.

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

const CARD_ELEMENT_OPTIONS = {
    Stil: {
        Basis: {
            'Farbe': '#32325d',
            'fontFamily': '"Helvetica Neue", Helvetica, serifenlos',
            'fontSmoothing': 'antialiased',
            'fontSize': '16px',
            '::placeholder': {
                Farbe: '#aab7c4',
            },
        },
        ungültig: {
            Farbe: '#fa755a',
            iconColor: '#fa755a',
        },
    },
};

const RootStyle = styled(Stack)(({theme}) => ({
    Breite: '400px',
    Polsterung: „50px 30px 30px 30px“
}))

Standardfunktion CardInput({onSubmit}) exportieren {
    const [loading, setLoading] = useState(false);
    zurückkehren (
        <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="erben"
                    size='groß'
                    type='submit'
                    Variante='umrissen'
                    wird geladen={Ladevorgang}
                >
                    Karte speichern
                </EzLoadingBtn>
            </Box>
        </RootStyle>
    );
}

Answer 1

DONE - 问题是，我曾经认为“包装”整个应用程序

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

足够了，但事实并非如此。 关键是不必将整个应用程序都包装在Elements中，只需将要使用某些stripe组件（CardElement、PaymentElement等）的子组件包装起来即可。

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

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

这样你就准备好了。