Stripeを活用した支払い処理の設定 🛒💳

このチャプターでは、Stripe の支払いゲートウェイを使って、安全かつ効率的なオンライン支払い処理システムを構築します。Stripe API の基本から、支払い方法の設定、顧客管理までの流れを詳しく解説。サーバーレス環境に Stripe を統合し、スムーズな取引体験を提供する方法を学びます。

📕 Stripe ドキュメント

Stripe アカウントの作成・API キーの取得

まずは、Stripe アカウントを作成し、API キーを取得します。
Developer → API keys から、API キーを取得します。

右上の test mode を押して設定を切り替えて API キーを本番用とテスト用の 2 つ取得します。

• STRIPE_SECRET_KEY
• STRIPE_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 では、支払いリンクを作成することができます。
先ほど作成したプロダクトを使用して、支払いリンクを作成します。

続いてペイメント画面の詳細を設定し、
支払いリンクを作成します。

これで、支払いリンクが作成されました。