<p>Ich muss eine benutzerdefinierte Komponente erstellen, um die Karteninformationen abzurufen und sie auf Stripe zu speichern, damit ich sie später aufladen kann. </p> <pre class="brush:php;toolbar:false;">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</pre> <p>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. </p> <p>Ich muss diesen Fehler beheben. </p> <p>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. </p> <p>Stripe-Referenz im Index übergeben (für globalen Zugriff)</p> <pre class="brush:php;toolbar:false;">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> );</pre> <p>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.</p> <pre class="brush:php;toolbar:false;">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> ); }</pre></p>

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

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

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