カード情報を取得し、後でチャージできるように Stripe に保存するためだけにカスタム コンポーネントを作成する必要があります。

v3:1 Uncaught (約束どおり) IntegrationError: 指定された要素からデータを取得できません。 使用する要素がまだマウントされていることを確認してください。 ニで (v3:1:319630) e._handleMessage (v3:1:324970) で e._handleMessage (v3:1:146061) で v3:1:322539で 
このエラーが発生しました。コンポーネントがマウントされているかどうかを確認しましたが、常にマウントされています。これが Stripe の仕組みであるためです。すべての Stripe コンポーネントはアプリケーションに対して異なる設定になっています。余分な負荷がかかりますが、それは別の話題です。 
 
このエラーを解決する必要があります。 
 
 Stripe.checkout.sessions.create を使用するルートがありますが、ユーザーを別のタブにリダイレクトしますが、これは私が望む動作ではありません。同じアプリ内のポップアップを好み、そこにカードデータを取得して保存します。 
 
インデックス内のストライプ参照を渡します (グローバル アクセス用)
 
「@ストライプ/react-ストライプ-js」から {Elements} をインポートします; {loadStripe} を「@ストライプ/ストライプ-js」からインポートします。 const StripePromise =loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); ...その他 const root = ReactDOM.createRoot(document.getElementById('root')); root.render(  <ブラウザルーター> <プロバイダストア={ストア}> <要素ストライプ={ストライププロミス}> <テーマプロバイダー> <アプリ/>      );
 
Stripe CardInput Wrapper (ドキュメントと同様) 注: コンポーネントをネストする前に、空のプロジェクトでこのコードを試してみましたが、完全に機能しました。
 
import React、{useState} from 'react'; {CardElement} を '@ストライプ/react-ストライプ-js' からインポートします。 {styled} を「@mui/material/styles」からインポートします。 import {ボックス、スタック、タイポグラフィ} から "@mui/material"; EzLoadingBtn を「../../ezComponents/EzLoadingBtn/EzLoadingBtn」からインポートします。 const CARD_ELEMENT_OPTIONS = { スタイル： { ベース： { 'カラー': '#32325d', 'fontFamily': '「Helvetica Neue」、Helvetica、サンセリフ', 'fontSmoothing': 'アンチエイリアス済み', 'フォントサイズ': '16px', '::プレースホルダー': { 色: '#aab7c4'、 }、 }、 無効： { 色: '#fa755a'、 アイコンの色: '#fa755a', }、 }、 }; const RootStyle = styled(Stack)(({テーマ}) => ({ 幅: '400px', パディング: '50px 30px 30px 30px' })) デフォルト関数 CardInput({onSubmit}) をエクスポート { const [ロード中、setLoading] = useState(false); 戻る （ <ルートスタイル>   <タイポグラフィ バリアント='span'>カード    セーブカード    ); }