遇到Stripe问题的我的电子商务网站应用程序

Question

<p>我需要创建一个自定义组件，只是为了获取卡片信息并将其存储在Stripe上，以便以后可以对其进行收费。</p> <pre class="brush:php;toolbar:false;">v3:1 Uncaught (in promise) IntegrationError: 我们无法从指定的元素中检索数据。 请确保您要使用的元素仍然已挂载。 at 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>
    );
}

这样你就准备好了。