私の電子商取引 Web サイト アプリケーションで Stripe に問題がある
<p>カード情報を取得し、後でチャージできるように Stripe に保存するためだけにカスタム コンポーネントを作成する必要があります。 </p>
<pre class="brush:php;toolbar:false;">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>
);</pre>
<p>Stripe CardInput Wrapper (ドキュメントと同様)
注: コンポーネントをネストする前に、空のプロジェクトでこのコードを試してみましたが、完全に機能しました。</p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre></p>
