遇到Stripe問題的我的電子商務網站應用程式

Question

<p>我需要建立一個自訂元件，只是為了獲取卡片資訊並將其儲存在Stripe上，以便以後可以對其進行收費。 </p> <pre class="brush:php;toolbar:false;">v3:1 Uncaught (in promise) IntegrationError: 我們無法從指定的元素中檢索資料。 請確保您要使用的元素仍然已掛載。 在 ni (v3:1:319630) at e._handleMessage (v3:1:324970) at e._handleMessage (v3:1:146061) at v3:1:322539</pre> <p>出現了這個錯誤，我已經檢查了組件是否已掛載，但是一直以來都是掛載的，因為這是Stripe的工作方式，所有的Stripe組件都在不同的，為我們的應用程序帶來了額外的負載，但這是另一個主題。 </p> <p>我需要擺脫這個錯誤。 </p> <p>我有一個使用stripe.checkout.sessions.create的路由，但它會將用戶重定向到另一個標籤頁，這不是我想要的行為，我更喜歡在同一個應用程式中彈出窗口並在那裡獲取卡片數據並存儲。 </p> <p>在index中傳遞stripe引用（用於全域存取）</p> <pre class="brush:php;toolbar:false;">import {Elements} from "@stripe/react-stripe-js"; import {loadStripe} from "@stripe/stripe-js"; const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); ....others const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <Provider store={store}> <Elements stripe={stripePromise}> <ThemeProvider> <App/> </ThemeProvider> </Elements> </Provider> </BrowserRouter> </React.StrictMode> );</pre> <p>Stripe CardInput Wrapper（就像文檔中的一樣） 注意：我在嵌套組件之前在一個空專案中嘗試了這段程式碼，可以完美運行。</p>

從 'react' 匯入 React, {useState};
從 '@stripe/react-stripe-js' 導入 {CardElement}；
從“@mui/material/styles”導入{styled}；
從“@mui/material”導入{Box, Stack, Typography}；
從“../../ezComponents/EzLoadingBtn/EzLoadingBtn”導入 EzLoadingBtn；

常量 CARD_ELEMENT_OPTIONS = {
    風格： {
        根據： {
            '顏色': '#32325d',
            'fontFamily': ''Helvetica Neue', Helvetica, sans-serif',
            'fontSmoothing': '抗鋸齒',
            '字體大小': '16px',
            '::佔位符': {
                顏色：'#aab7c4'，
            },
        },
        無效的： {
            顏色: '#fa755a',
            圖示顏色: '#fa755a',
        },
    },
};

const RootStyle = styled(Stack)(({主題}) => ({
    寬度：'400px'，
    內邊距：'50px 30px 30px 30px'
}））

導出預設函數 CardInput({onSubmit}) {
    const [正在加載，setLoading] = useState(false);
    返回 （
        <根樣式>
            
                ;
                    <排版變體='span'>卡</排版>
                </堆疊>
                <CardElement選項={CARD_ELEMENT_OPTIONS}/>
                
                    儲存卡
                
            </框>
        </根樣式>
    ）；
}</pre></p>            

Answer 1

DONE - 問題是，我曾經認為「包裝」整個應用程式

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

足夠了，但事實並非如此。 關鍵在於不必將整個應用程式都包裝在Elements中，只需將要使用某些stripe元件（CardElement、PaymentElement等）的子元件包裝起來即可。

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

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

這樣你就準備好了。