Stripeの決済ボタンやCheckoutが表示されないときの対処

Stripe決済が表示される仕組み

Stripeの決済UIは、公式のStripe.jsライブラリをページに読み込み、公開可能キー(publishable key)で初期化して表示します。Checkoutはこの仕組みの上で、Stripeがホストする決済画面へ遷移させる方式です。

ライブラリの読み込み、キーの初期化、決済セッションの生成のいずれかが失敗すると、ボタンが出ない・Checkoutに進めないといった症状になります。

決済まわりは秘密鍵を扱う処理がサーバ側に必要で、フロントに置いてよいのは公開可能キーだけです。鍵の取り違えも表示不良やエラーの一因になります。

表示されない典型パターン

まず、Stripe.jsの読み込みに失敗しているケースです。scriptの記述ミスやネットワーク遮断、CSPでの不許可があると、ライブラリが読めず決済UIが描画されません。

次に、公開可能キーの誤り(コピー漏れやテスト/本番の取り違え)です。キーが不正だと初期化に失敗し、コンソールにエラーが出ます。

Checkoutへの遷移にはサーバ側でのセッション生成が必要なため、静的HTMLだけでは完結しない構成だと、ボタンを押しても進めないことがあります。これは設計上の制約で、フロントだけでは解決できません。

症状別チェック表

Stripeの決済ボタンやCheckoutが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

読み込み・キー・遷移の三段階に分けて確認すると、どこで止まっているかが見えます。

1. 開発者ツールのConsoleでStripe関連のエラーが出ていないか確認する
2. NetworkタブでStripe.jsの取得が成功しているか確認する
3. CSPでStripeの配信元スクリプトやフレームが許可されているか確認する
4. 埋め込んだ公開可能キーが正しく、テスト/本番の取り違えがないか確認する
5. ボタンは出るが進めない場合、サーバ側のセッション生成が動いているか確認する
6. Stripeダッシュボードでドメインや決済設定が整っているか確認する

ドメイン設定とCSPの注意点

Stripeの一部機能(Apple Payなど)では、利用するドメインの登録が必要です。確認共有用のドメインが未登録だと、その機能だけ表示されないことがあります。利用機能ごとにドメイン要件を確認します。

CSPが厳しいと、Stripe.jsやCheckoutのフレーム読み込みがブロックされます。コンソールのCSP違反を手がかりに、必要な配信元を script-src や frame-src に限定的に許可します。

テスト環境ではテストキーとテストカードで挙動を確認し、本番キーは実決済が発生するため確認段階では使わないのが安全です。

確認共有の場面での点検

決済まわりは秘密鍵やサーバ処理が絡むため、確認・共有では「決済UIが正しく表示・初期化されるか」までを目的にし、実決済はテスト環境で行うのが安全です。秘密鍵やAPIキーを含むコードを共有ファイルに混ぜないよう注意してください。

ギガサイト便はHTMLやZIPを同じURLのまま差し替えられるため、Stripe.jsの記述やCSP、公開可能キー(公開してよいキーのみ)を直した版をすぐ反映して再確認できます。認証を併用すれば関係者だけに見せられ、公開期限を設定すれば確認後に自動で閲覧を止められます。