私の電子商取引 Web サイト アプリケーションで Stripe に問題がある

Question

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

v3:1 Uncaught (約束どおり) IntegrationError: 指定された要素からデータを取得できません。
使用する要素がまだマウントされていることを確認してください。
    ニで (v3:1:319630)
    e._handleMessage (v3:1:324970) で
    e._handleMessage (v3:1:146061) で
    v3:1:322539 で
<p>このエラーが発生しました。コンポーネントがマウントされているかどうかを確認しましたが、常にマウントされています。これが Stripe の仕組みであるためです。すべての Stripe コンポーネントはアプリケーションに対して異なる設定になっています。余分な負荷がかかりますが、それは別の話題です。 </p>
<p>このエラーを解決する必要があります。 </p>
<p> Stripe.checkout.sessions.create を使用するルートがありますが、ユーザーを別のタブにリダイレクトしますが、これは私が望む動作ではありません。同じアプリ内のポップアップを好み、そこにカードデータを取得して保存します。 </p>
<p>インデックス内のストライプ参照を渡します (グローバル アクセス用)</p>
<pre class="brush:php;toolbar:false;">「@ストライプ/react-ストライプ-js」から {Elements} をインポートします;
{loadStripe} を「@ストライプ/ストライプ-js」からインポートします。
const StripePromise =loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

...その他

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <ブラウザルーター>
            <プロバイダストア={ストア}>
                <要素ストライプ={ストライププロミス}>
                    <テーマプロバイダー>
                        <アプリ/>
                    </ThemeProvider>
                </要素>
            </プロバイダー>
        </ブラウザルーター>
    </React.StrictMode>
);

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);
    戻る （
        <ルートスタイル>
            <Box コンポーネント='フォーム' onSubmit={onSubmit}>
                <Stack flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}>
                    <タイポグラフィ バリアント='span'>カード</タイポグラフィ>
                </スタック>
                <CardElement オプション={CARD_ELEMENT_OPTIONS}/>
                <EzLoadingBtn
                    sx={{marginTop: '25px'}}
                    color="継承"
                    サイズ='大'
                    type='送信'
                    バリアント='アウトライン'
                    読み込み={読み込み中}
                >
                    セーブカード
                </EzLoadingBtn>
            </ボックス>
        </RootStyle>
    );
}

Answer 1

完了 - 問題は、以前はアプリケーション全体を「ラップ」することを考えていたことです

リーリー

それで十分ですが、それだけではありません。 重要なのは、アプリケーション全体を Elements でラップする必要はなく、特定のストライプ コンポーネント (CardElement、PaymentElement など) を使用するサブコンポーネントだけをラップする必要があるということです。

リーリー

これで準備は完了です。