ReactとStripe Elementで作成した決済フォームの、CSS・見た目をカスタマイズする方法 - Qiita

Stripe Elementsで描画される決済フォームは、セキュリティなどの目的でiframeの中に配置されます。 そのため、CSSでの内容・見た目のカスタマイズはElement Appearance APIを利用して行う必要があります。 この記事では、Payment Elementsの見た目を調整する方法を紹介します。 プリセットスタイル（テーマ）で設定する StripeのPayment Elementsでは、いくつかのスタイルプリセットが用意されています。 ドキュメントサイトでデモを見る これらは、<Elements/>のoptions.appearanceで設定します。 export default function Root() { /** * Payment Intentを作成する処理 * React v18以降でのuseEffectが2回実行される挙動を、useRefを利用して