<p>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. </p> <pre class="brush:php;toolbar:false;">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</pre> <p>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. </p> <p>Je dois me débarrasser de cette erreur. </p> <p>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. </p> <p>Référence de bande de passage dans l'index (pour un accès global)</p> <pre class="brush:php;toolbar:false;">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> ); }</pre></p>

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

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

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