Aplikasi tapak web e-dagang saya menghadapi masalah dengan Stripe

Question

Saya perlu mencipta komponen tersuai hanya untuk mendapatkan maklumat kad dan menyimpannya pada Stripe supaya saya boleh mengecasnya kemudian.

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

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.

Saya perlu menyingkirkan ralat ini.

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.

Luluskan rujukan jalur dalam indeks (untuk akses global)

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>
    );
}

Answer 1

SELESAI - Masalahnya, saya pernah berfikir untuk "membungkus" keseluruhan aplikasi

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

Cukup, tetapi tidak. Kuncinya ialah anda tidak perlu membungkus keseluruhan aplikasi anda dalam Elements, hanya subkomponen yang menggunakan komponen jalur tertentu (CardElement, PaymentElement, dll.).

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

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

Dengan cara itu anda sudah bersedia.