<p>Saya perlu mencipta komponen tersuai hanya untuk mendapatkan maklumat kad dan menyimpannya pada Stripe supaya saya boleh mengecasnya kemudian. </p> <pre class="brush:php;toolbar:false;">v3:1 Uncaught (in promise) IntegrationError: Kami tidak boleh mendapatkan semula data daripada elemen yang ditentukan. Pastikan elemen yang anda ingin gunakan masih dipasang. at ni (v3:1:319630) di e._handleMessage (v3:1:324970) di e._handleMessage (v3:1:146061) pada v3:1:322539</pre> <p>Saya mendapat ralat ini, saya telah menyemak untuk melihat sama ada komponen itu dipasang, tetapi ia dipasang sepanjang masa kerana ini adalah cara Stripe berfungsi, semua komponen Stripe berada dalam tetapan berbeza untuk aplikasi kami Membawa beban tambahan, tetapi itu topik lain. </p> <p>Saya perlu menyingkirkan ralat ini. </p> <p>Saya mempunyai laluan menggunakan stripe.checkout.sessions.create tetapi ia mengubah hala pengguna ke tab lain yang bukan tingkah laku yang saya mahu, saya lebih suka pop timbul dalam apl yang sama Dan dapatkan data kad di sana dan simpannya. </p> <p>Luluskan rujukan jalur dalam indeks (untuk akses global)</p> <pre class="brush:php;toolbar:false;">import {Elements} daripada "@stripe/react-stripe-js"; import {loadStripe} daripada "@stripe/stripe-js"; const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); ... lain-lain const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Penghala Penyemak Imbas> <Kedai pembekal={kedai}> <Elemen jalur={stripePromise}> <Pembekal Tema> <Apl/> </ThemeProvider> </Elements> </Pembekal> </BrowserRouter> </React.StrictMode> );</pra> <p>Pembungkus CardInput Strip (sama seperti dalam dokumentasi) Nota: Saya mencuba kod ini dalam projek kosong sebelum meletakkan komponen dan ia berfungsi dengan sempurna.</p> <pre class="brush:php;toolbar:false;">import React, {useState} daripada 'react'; import {CardElement} daripada '@stripe/react-stripe-js'; import {styled} daripada "@mui/material/styles"; import {Box, Stack, Typography} daripada "@mui/material"; import EzLoadingBtn dari "../../ezComponents/EzLoadingBtn/EzLoadingBtn"; const CARD_ELEMENT_OPTIONS = { gaya: { asas: { 'warna': '#32325d', 'fontFamily': '"Helvetica Neue", Helvetica, sans-serif', 'fontSmoothing': 'antialiased', 'fontSize': '16px', '::tempat letak': { warna: '#aab7c4', }, }, tidak sah: { warna: '#fa755a', Warna ikon: '#fa755a', }, }, }; const RootStyle = digayakan(Timbunan)(({tema}) => ({ lebar: '400px', padding: '50px 30px 30px 30px' })) eksport fungsi lalai CardInput({onSubmit}) { const [loading, setLoading] = useState(false); kembali ( <RootStyle> <Komponen kotak='form' onSubmit={onSubmit}> <Timbunan flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}> <Varian tipografi='span'>Kad</Tipografi> </Timbunan> <CardElement options={CARD_ELEMENT_OPTIONS}/> <EzLoadingBtn sx={{marginTop: '25px'}} color="warisi" saiz = 'besar' type='serahkan' varian='digariskan' loading={loading} > Simpan Kad </EzLoadingBtn> </Kotak> </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>
    );
}