Mon application de site e-commerce rencontre des problèmes avec Stripe

Question

Je dois créer un composant personnalisé uniquement pour obtenir les informations de la carte et les stocker sur Stripe afin de pouvoir les facturer plus tard.

v3:1 Non capturé (promis) IntegrationError : Nous ne pouvons pas récupérer les données de l'élément spécifié.
Assurez-vous que l'élément que vous souhaitez utiliser est toujours monté.
    à ni (v3:1:319630)
    à e._handleMessage (v3:1:324970)
    à e._handleMessage (v3:1:146061)
    à v3:1:322539

J'ai eu cette erreur, j'ai vérifié si le composant est monté, mais il est monté tout le temps car c'est ainsi que fonctionne Stripe, tous les composants Stripe sont dans des paramètres différents pour notre application Apporte une charge supplémentaire, mais c'est un autre sujet.

Je dois me débarrasser de cette erreur.

J'ai un itinéraire utilisant stripe.checkout.sessions.create mais il redirige l'utilisateur vers un autre onglet qui n'est pas le comportement que je souhaite, je préfère la fenêtre contextuelle dans la même application et j'y récupère les données de la carte et je les stocke.

Référence de bande de passage dans l'index (pour un accès global)

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

...autres

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <NavigateurRouter>
            <Magasin du fournisseur={magasin}>
                <Elements stripe={stripePromise}>
                    <Provider de thèmes>
                        <Application/>
                    </ThemeProvider>
                </Éléments>
            </Fournisseur>
        </NavigateurRouter>
    </React.StrictMode>
);</pré>
<p>Stripe CardInput Wrapper (comme dans la documentation)
REMARQUE : j'ai essayé ce code dans un projet vide avant d'imbriquer les composants et cela a parfaitement fonctionné.</p>
<pre class="brush:php;toolbar:false;">importer React, {useState} depuis 'react';
importer {CardElement} depuis '@stripe/react-stripe-js' ;
importer {styled} depuis "@mui/material/styles" ;
importer {Box, Stack, Typography} depuis "@mui/material" ;
importer EzLoadingBtn depuis "../../ezComponents/EzLoadingBtn/EzLoadingBtn" ;

const CARD_ELEMENT_OPTIONS = {
    style: {
        base: {
            'couleur' ​​: '#32325d',
            'fontFamily' : '"Helvetica Neue", Helvetica, sans-serif',
            'fontSmoothing' : 'anticrénelé',
            'Taille de police' : '16px',
            '::espace réservé' : {
                couleur : '#aab7c4',
            },
        },
        invalide: {
            couleur : '#fa755a',
            couleur de l'icône : '#fa755a',
        },
    },
} ;

const RootStyle = styled(Stack)(({thème}) => ({
    largeur : '400px',
    remplissage : '50px 30px 30px 30px'
}))

fonction d'exportation par défaut CardInput({onSubmit}) {
    const [chargement, setLoading] = useState(false);
    retour (
        <StyleRacine>
            <Box Component='form' onSubmit={onSubmit}>
                <Stack flexDirection='row' justifierContent='espace-entre' sx={{marginBottom : '25px'}}>
                    <Variante de typographie='span'>Carte</Typographie>
                </Pile>
                <Options CardElement={CARD_ELEMENT_OPTIONS}/>
                <EzLoadingBtn
                    sx={{marginTop : '25px'}}
                    color="hériter"
                    taille='grand'
                    type='soumettre'
                    variante='décrit'
                    chargement={chargement}
                >
                    Enregistrer la carte
                </EzLoadingBtn>
            ≪/Boîte>
        </StyleRacine>
    );
}

Answer 1

TERMINÉ - Le problème est que je pensais "emballer" l'intégralité de l'application

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

Cela suffit, mais ce n'est pas le cas. La clé est que vous n'avez pas besoin d'envelopper l'intégralité de votre application dans Elements, uniquement les sous-composants qui utilisent certains composants Stripe (CardElement, PaymentElement, etc.).

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

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

De cette façon, vous êtes prêt.