Stripe SUBSCRIPTIONS with Next.js & Supabase

Summary

このビデオでは、Stripe、Next.js、Superbaseを使用して、定期的なサブスクリプションのセットアップ方法を解説しています。まず、Next.jsプロジェクトの設定と、Superbaseを使用したユーザー認証の構築から始めます。次に、Stripeでのアカウント作成とAPIキーの取得、ウェブフックの設定を行い、サブスクリプションのフローを構築します。最後に、支払いの成功時にユーザーのサブスクリプション状態をデータベースに反映させる方法を紹介し、実際にテストを行って確認します。このチュートリアルを通じて、定期的な支払いのシステムを簡単に導入できます。

Takeaways

• 😀 SuperbaseとNext.jsを使用して、インターネットで定期購読サービスを構築する方法を学べる。
• 😀 Next.jsプロジェクトに基本的なホームページ、ログインページ、購読ページを作成する。
• 😀 Stripeアカウントを作成し、テストモードでAPIキーを取得する。
• 😀 Stripeのウェブフックを設定し、ローカル環境でテストする方法を紹介。
• 😀 Stripeのシークレットキーと署名シークレットを.env.localファイルに設定して、開発環境を構築する。
• 😀 購読ボタンを作成し、クリック時にStripeのチェックアウトセッションを開始する。
• 😀 新しいAPIルートを作成して、Stripeのウェブフックイベントを処理し、ユーザーの購読ステータスを更新する。
• 😀 フロントエンドの購読ボタンに、ユーザーIDを含めて、クリック後にStripeの決済ページにリダイレクトする。
• 😀 Stripeの「checkout.session.completed」イベントを使用して、支払い完了後にユーザー情報をデータベースで更新する。
• 😀 定期購読が正常に処理されると、ユーザーの購読状態をデータベースで更新し、アプリを再確認することで最新の情報を反映させる。

Q & A

Next.js プロジェクトに Stripe を組み込むための最初のステップは何ですか？

最初に、Stripe アカウントを作成し、API キーを取得します。次に、取得したテスト用 API キーを Next.js プロジェクトの `env.local` ファイルに保存します。これにより、Stripe API を使用する準備が整います。

Stripe で新しいサブスクリプションプランを作成する方法は？

Stripe ダッシュボードで新しい製品を作成し、その価格を月額 $10 として設定します。この製品の価格 ID を取得して、Next.js プロジェクトに統合することで、サブスクリプションが開始されます。

Webhook の役割は何ですか？

Webhook は、Stripe がサブスクリプションの支払い処理が完了した際に、指定された URL に HTTP リクエストを送信する機能です。これにより、支払いが成功した場合にアプリケーション内でユーザー情報を更新できます。

`checkout.session.completed` イベントはどのように処理されますか？

Webhook 内で `checkout.session.completed` イベントをリッスンし、支払いが成功している場合 (`payment_status: paid`) に、ユーザーのサブスクリプション状態をデータベース内で更新します。

サブスクリプションボタンの作成方法は？

Next.js の `SubscribeButton.tsx` コンポーネントを作成し、ボタンがクリックされた際に `subscribeAction` を呼び出して、Stripe のチェックアウトページにリダイレクトします。これにより、サブスクリプションの処理が開始されます。

Superbase でユーザー情報を更新する際に注意すべき点は？

Superbase の `users` テーブルで、支払いが成功したユーザーの `is_subscribed` フィールドを `true` に更新します。これにより、ユーザーのサブスクリプション状態が正しく反映されます。

環境変数の設定はどう行いますか？

Next.js プロジェクトの `env.local` ファイルに、Stripe のシークレットキーと Webhook のサインインシークレットを設定します。これにより、開発環境で正しく動作させることができます。

テストモードで支払いをシミュレートする方法は？

Stripe のテストモードを使用して、`42 42 42 42 42 42 42 42` というカード番号を使ったテスト支払いをシミュレートできます。この方法で、実際の決済処理なしに支払いフローを確認できます。

Next.js で `useTransition` を使用する理由は何ですか？

`useTransition` は、非同期操作（例えば、サブスクリプションの処理中）を実行する際に UI をスムーズに更新するために使用されます。これにより、ユーザーがボタンを連打しないように防ぎ、操作中の状態を表示できます。

本番環境に移行する際に気を付けるべき点は何ですか？

本番環境に移行する際は、`env.local` の設定を本番用の Stripe API キーと URL に更新する必要があります。また、Stripe ダッシュボードで本番用の Webhook エンドポイントも設定し、テストモードから本番モードに切り替えます。