Stripeダッシュボード操作ガイド（テスト/本番切替・APIキー確認・動作チェック）
Stripe の操作で詰まりやすいのは、**「テスト環境/本番環境の切り替え」**と、そこで表示される API キー（公開キー/シークレットキー） の場所です。この記事では、ダッシュボード上での確認手順と、キーが本当に正しいかを短時間で検証する方法までまとめます。
1. Stripeのアカウント名（Name）を変更する
Stripe ダッシュボードで次の順に進みます。
- 左上三本線（メニュー）
- 設定
- ビジネス
- アカウントの詳細
- アカウント名
2. テスト環境に切り替える（テストモード ON）
Stripe ダッシュボードで次の操作をします。
- 左上三本線（メニュー）
- テスト環境をオンにする
以後、ダッシュボード上のデータ（顧客・支払い・商品など）や API キーが テスト用 の表示に切り替わります。
3. 本番環境に切り替える（テストモード OFF）
Stripe ダッシュボードで次の操作をします。
- 左上三本線（メニュー）
- テスト環境をオフにする
以後、ダッシュボード上のデータや API キーが 本番用 の表示に切り替わります。
4. テスト環境の公開キー・シークレットキーの確認方法
まず テスト環境をオン にしてから、次のどちらかで確認します。
- 開発者（左下）
- 概要 → 下にスクロール
- APIキー
5. 本番環境の公開キー・シークレットキーの確認方法
まず テスト環境をオフ にしてから、次のどちらかで確認します。
- 開発者（左下）
- 概要 → 下にスクロール
- APIキー
6. 公開キーとシークレットキーの違い（超重要）
- 公開キー（Publishable key）
- 例:
pk_test_.../pk_live_... - ブラウザ（フロント）で使ってよいキーです（「トークン化」など）
- 例:
- シークレットキー（Secret key）
- 例:
sk_test_.../sk_live_... - サーバー側だけ で使うキーです（課金・返金・サブスク作成など）
- 例:
実装上は、多くのプロジェクトで次のように環境変数に置きます（例）。
STRIPE_SECRET_KEY=sk_test_xxxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxx
注意点：
- シークレットキーは絶対にフロントへ渡さない（漏洩すると不正課金などのリスク）
.env.localは Git に含めない（このリポジトリは.env*が ignore 対象です）
7. Stripe決済処理の全体像（理解用）
典型的なカード決済の流れは次の通りです。
- ユーザーがカード情報を入力
- ブラウザが 公開キー で Stripe に送信
- Stripe が トークン（または PaymentMethod など）を返す
- そのトークンをサーバーへ送る
- サーバーが シークレットキー を使う
- サーバーが Stripe に「このトークンで課金して」と命令
- 決済完了
8. Stripeの簡単セットアップ（初回導線）について
Stripe ダッシュボード初回に出る「簡単セットアップ」は、必須でなければ 閉じてOK です（あとから設定できます）。
9. 公開キーが正しいかを最短で確認する（check.html）
目的: 「公開キーが正しいか」「ブラウザから Stripe.js が動くか」を素早く確認します。
9.1 check.html を作る
手元に check.html を作って、Stripe("ここ") の部分を あなたの公開キー に置き換えます。
<!doctype html>
<html>
<body>
<script src="https://js.stripe.com/v3/"></script>
<div id="card" style="border:1px solid #ccc;padding:10px;width:300px;"></div>
<button id="btn">test</button>
<pre id="out"></pre>
<script>
const stripe = Stripe("あなたの開発環境または本番環境の公開キー");
// ここを、pk_test_... もしくは pk_live_... に置き換える
const elements = stripe.elements();
const card = elements.create("card");
card.mount("#card");
document.getElementById("btn").onclick = async () => {
const result = await stripe.createToken(card);
document.getElementById("out").textContent =
JSON.stringify(result, null, 2);
};
</script>
</body>
</html>
9.2 ブラウザで開いてテストする
入力例（テストモードの場合）：
- Card number:
4242 4242 4242 4242 - 期限:
12 / 30 - CVC:
123 - ZIP:
12345
9.3 結果を確認する
クリック後に、エラーではなくトークン情報など 必要な結果が返ってきていれば OK です。
補足：
- テスト用のカード番号はテストモードでのみ 使えます
- 本番モードでこのテストカードを使うとエラーになります（それが正常です）
10. シークレットキーが正しいかを確認する（Stripe CLI）
目的: 「シークレットキーが有効か」をサーバー実装前に確認します。
Stripe CLI が入っている前提で、次を実行します（あなたの... を置き換え）。
stripe balance retrieve --api-key あなたの開発環境または本番環境のシークレットキー
結果が取得できれば、そのキーは少なくとも API 呼び出しに使える状態です。
11. 価格ID（Price ID）の確認方法（本番運用で必須になりがち）
サブスクや固定料金を扱う場合、アプリ側で Price ID を保持することが多いです。
- 左メニュー
- 商品カタログ
- 対象商品の
... - 価格ID
12. 返金方法（メモ）
返金は、まず以下から辿れます。
- 左メニュー
- 取引
（返金の詳細手順は、実際の画面キャプチャや運用フローに合わせて追記していくのがおすすめです）