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


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

📕 Stripe ドキュメント

https://stripe.com/docs/api

https://stripe.com/docs/stripe-cli


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

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

![](https://storage.googleapis.com/zenn-user-upload/47e71fec848a-20231116.png)

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

- `STRIPE_SECRET_KEY`
- `STRIPE_SECRET_KEY_TEST`

そしてコンソールから Skeet CLI を使って、API キーを Secret Manager に登録します。

```bash
skeet add secret STRIPE_SECRET_KEY
? Enter value for STRIPE_SECRET_KEY: <yourStripeSecretKey>
```

同様に、テスト用の API キーも登録します。

```bash
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 の設定を行います。

![](https://storage.googleapis.com/zenn-user-upload/cfd25e5e9f9a-20231116.png)

まだ `stripeRouter` のエンドポイントをデプロイしていないので、
ここでは、キー取得のために一時的に `https://example.com` を設定します。

そして、リッスンするイベントを設定します。
ここでは、支払いが完了したときのイベントを設定します。

![](https://storage.googleapis.com/zenn-user-upload/ceb254ad1647-20231116.png)

Select Eventをクリックします。
`Checkout` → `checkout.session.completed` を選択し,
Add Event をクリックします。

次に、右側コードにある `endpointSecret` の値をコピーし、
`STRIPE_WEBHOOK_SECRET_KEY` として登録します。

```bash
skeet add secret STRIPE_WEBHOOK_SECRET_KEY
? Enter value for STRIPE_WEBHOOK_SECRET_KEY: <yourStripeWebhookSecretKey>
```

同様に、テスト用の Webhook の設定も行い、
シークレットキーも　`STRIPE_WEBHOOK_SECRET_KEY_TEST` として登録します。

```bash
skeet add secret STRIPE_WEBHOOK_SECRET_KEY_TEST
? Enter value for STRIPE_WEBHOOK_SECRET_KEY_TEST: <yourStripeWebhookSecretKeyTest>
```

## Stripe Webhook の追加

`skeet add webhook` コマンドを使って、Stripe Webhook を追加します。

```bash
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` ディレクトリが作成され、
必要なファイルが追加されました。

```bash
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 に定義するファイル

## アプリのデプロイ

変更したエンドポイントを更新するために再度デプロイします。

```bash
skeet deploy --function skeet:stripeRouter
```

カンマ区切りで複数のエンドポイントを指定することもできます。

```bash
skeet deploy --function skeet:discordRouter,skeet:stripeRouter
```

これで、Stripe Webhook のエンドポイントがデプロイされました。

## Stripe Webhook エンドポイントの更新

これで先ほど、一時的に設定した `https://example.com` を、
`stripeRouter` のエンドポイントに更新します。

```bash
skeet get https
```

表示されたエンドポイントをコピーし、
Stripe Webhooks の Endpoint URL に設定し保存します。

これで、Stripe Webhook の設定が完了しました。

## Stripe プロダクトの作成

Stripe では、支払いに関するプロダクトを作成することができます。
サブスクリプションタイプと、単発の支払いタイプの 2 つがあります。

Stripeから送信されるイベントの `mode` はそれぞれ、
`subscription` と `payment` となります。

ユーザーの支払い情報を Stripe の UI を使用し、登録することで、
こちら側で機密情報を持つことなく、支払いに関する情報を管理することができます。
ここでは、サブスクリプションから作成します。

Stripe ダッシュボードから、
`Products` → `Add product` から、
プロダクトを作成します。

![](https://storage.googleapis.com/zenn-user-upload/042750509c65-20231116.png)

ここでは月額プレミアム会員サブスクリプションを作成します。

## Payment リンクの作成

Stripe では、支払いリンクを作成することができます。
先ほど作成したプロダクトを使用して、支払いリンクを作成します。

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

![](https://storage.googleapis.com/zenn-user-upload/c8cd4de60425-20231116.png)

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