Meine E-Commerce-Website-Anwendung hat Probleme mit Stripe
P粉593649715
2023-09-05 09:15:39
<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>
DONE - 问题是,我曾经认为“包装”整个应用程序
足够了,但事实并非如此。 关键是不必将整个应用程序都包装在Elements中,只需将要使用某些stripe组件(CardElement、PaymentElement等)的子组件包装起来即可。
这样你就准备好了。