このチャプターでは、Stripe の支払いゲートウェイを使って、安全かつ効率的なオンライン支払い処理システムを構築します。Stripe API の基本から、支払い方法の設定、顧客管理までの流れを詳しく解説。サーバーレス環境に Stripe を統合し、スムーズな取引体験を提供する方法を学びます。
📕 Stripe ドキュメント
Stripe アカウントの作成・API キーの取得
まずは、Stripe アカウントを作成し、API キーを取得します。
Developer → API keys から、API キーを取得します。
右上の test mode を押して設定を切り替えて API キーを本番用とテスト用の 2 つ取得します。
STRIPE_SECRET_KEYSTRIPE_SECRET_KEY_TEST
そしてコンソールから Skeet CLI を使って、API キーを Secret Manager に登録します。
skeet add secret STRIPE_SECRET_KEY
? Enter value for STRIPE_SECRET_KEY: <yourStripeSecretKey>
同様に、テスト用の API キーも登録します。
skeet add secret STRIPE_SECRET_KEY_TEST
? Enter value for STRIPE_SECRET_KEY_TEST: <yourStripeSecretKeyTest>
Stripe Webhook の登録
Stripe Webhook を設定することで、支払いが完了したときに、サーバー側で処理を行うことができます。
Stripe Webhook の設定は、Stripe のダッシュボードから行います。
Developer → Webhooks から、Webhook の設定を行います。
まだ stripeRouter のエンドポイントをデプロイしていないので、
ここでは、キー取得のために一時的に https://example.com を設定します。
そして、リッスンするイベントを設定します。
ここでは、支払いが完了したときのイベントを設定します。
Select Eventをクリックします。
Checkout → checkout.session.completed を選択し,
Add Event をクリックします。
次に、右側コードにある endpointSecret の値をコピーし、
STRIPE_WEBHOOK_SECRET_KEY として登録します。
skeet add secret STRIPE_WEBHOOK_SECRET_KEY
? Enter value for STRIPE_WEBHOOK_SECRET_KEY: <yourStripeWebhookSecretKey>
同様に、テスト用の Webhook の設定も行い、
シークレットキーも STRIPE_WEBHOOK_SECRET_KEY_TEST として登録します。
skeet add secret STRIPE_WEBHOOK_SECRET_KEY_TEST
? Enter value for STRIPE_WEBHOOK_SECRET_KEY_TEST: <yourStripeWebhookSecretKeyTest>
Stripe Webhook の追加
skeet add webhook コマンドを使って、Stripe Webhook を追加します。
skeet add webhook
? Select Webhook Type (Use arrow keys)
discord
❯ stripe
./functions/skeet/src/lib/stripe/webhook/subscription.ts
✅ stripeRouter added 🎉
✅ webhook/subscription added 🎉
✅ webhook/payment added 🎉
✔ Successfully exported to ./functions/skeet/src/index.ts 🎉
Stripe Webhook のエンドポイント stripeRouter 及び、
以下のツリーのように stripe ディレクトリが作成され、
必要なファイルが追加されました。
tree -L 3 functions/skeet/src/lib
functions/skeet/src/lib
├── config.ts
├── discord
└── stripe
├── createSession.ts
├── getPlinks.ts
└── webhook
├── payment.ts
└── subscription.ts
...
- webhook - Stripe Webhook の関数を定義するディレクトリ
- payment.ts - 支払いに関する Webhook の関数を定義するファイル
- subscription.ts - サブスクリプションに関する Webhook の関数を定義するファイル
- stripeRouter.ts - Stripe Webhook のエンドポイントを Firebase Function に定義するファイル
アプリのデプロイ
変更したエンドポイントを更新するために再度デプロイします。
skeet deploy --function skeet:stripeRouter
カンマ区切りで複数のエンドポイントを指定することもできます。
skeet deploy --function skeet:discordRouter,skeet:stripeRouter
これで、Stripe Webhook のエンドポイントがデプロイされました。
Stripe Webhook エンドポイントの更新
これで先ほど、一時的に設定した https://example.com を、
stripeRouter のエンドポイントに更新します。
skeet get https
表示されたエンドポイントをコピーし、
Stripe Webhooks の Endpoint URL に設定し保存します。
これで、Stripe Webhook の設定が完了しました。
Stripe プロダクトの作成
Stripe では、支払いに関するプロダクトを作成することができます。
サブスクリプションタイプと、単発の支払いタイプの 2 つがあります。
Stripeから送信されるイベントの mode はそれぞれ、
subscription と payment となります。
ユーザーの支払い情報を Stripe の UI を使用し、登録することで、
こちら側で機密情報を持つことなく、支払いに関する情報を管理することができます。
ここでは、サブスクリプションから作成します。
Stripe ダッシュボードから、
Products → Add product から、
プロダクトを作成します。
ここでは月額プレミアム会員サブスクリプションを作成します。
Payment リンクの作成
Stripe では、支払いリンクを作成することができます。
先ほど作成したプロダクトを使用して、支払いリンクを作成します。
続いてペイメント画面の詳細を設定し、
支払いリンクを作成します。
これで、支払いリンクが作成されました。