Stripe 連携

Lovable の Stripe 連携を使ってアプリに決済を設定する方法

Lovable では、チャットだけで Stripe のセットアップができるようになりました。

チャットベースの自動セットアップ（推奨）
Supabase を接続し、Add API Key から Stripe Secret Key を保存したら、やりたいことをチャットで説明してください：

• 「サブスクリプションプランを 3 つ追加して…」
• 「e‑book 用に $29 の単発のチェックアウトを作成して」
  Lovable がチェックアウト／ポータル用のエッジ関数、RLS 対応のデータベーステーブル、UI ボタンを自動生成します。あなたが明示的に依頼しない限り、手動でのコーディングや webhook の設定は不要です。

• 単発販売 の場合は、カートまたは商品ページがすでに動作していることを確認してください。
• サブスクリプション の場合は、Supabase Auth が設定済みで、Lovable が Stripe の顧客を各ユーザーの id にリンクできるようになっていることを確認してください。

​

重要なポイント

• サブスクリプションと単発支払いの両方で、チャットベースのフローを使用してください。
• Stripe Secret Key をチャットに貼り付けないでください。 チャット内の Add API Key フォームから設定します。
• Webhook の利用はオプトインです。 リクエストしない限り、Lovable はエッジ関数によるポーリングに依存します。
• デバッグは Browser Console → Network/Errors、Supabase → Edge Functions → ログ、Stripe Dashboard → ログ で行います。
• 必ず Stripe Test Mode でテストしてからデプロイしてください。

​

必要条件

Stripe と連携する前に、次の前提条件が満たされていることを確認してください：

• プロジェクトが Supabase に接続されている必要があります。Supabase について詳しく見る
• 商品が適切に設定された Stripe アカウント。
• 正常に動作している フロントエンドとバックエンド：
  • 単体商品の販売の場合、ショッピングカートとチェックアウトページが機能していること。
  • サブスクリプションの場合、ログイン機能と複数の料金プランが設定されていること。

注意 Stripe 連携はプレビューでは動作しません。連携をテストするには、必ずデプロイしてください。また、機能を試す際は Stripe をテストモードにしていることも確認してください。支払いテスト時は、カード番号: 4242 4242 4242 4242、CVC は任意の 3 桁、有効期限は将来の日付であればどれでもテストカードとして利用できます。

​

Stripe 決済のセットアップ（ノーコード チャットフロー）

Lovable が Stripe の決済ロジックをすべて自動生成してくれます。チャット内の Add API Key フォームで Stripe Secret Key を設定し、プロジェクトが Supabase に接続されていれば、あとはチャットで Lovable にやりたいことを伝えるだけで完了です。手動で Payment Links を作成する必要はありません。

1. Step 1

   プロジェクトの準備

   • Supabase 接続済み
   • チャット内の Add API Key フォームから Stripe Secret Key を追加済み
   • （オプション）価格または商品 ID を用意
2. Step 2

   例:

   • 「Digital Course」の 1 回限りのチェックアウトを $29 で作成
   • 年額 $99 の Premium プランをセットアップし、各ユーザーの id に関連付ける
3. Step 3

   確認して適用 Lovable が Edge Functions、データベーステーブル、UI コンポーネントを自動でスキャフォールドします（いずれも Supabase 上のユーザーの id にひも付けられます）。プレビューを確認し、問題なければ Apply をクリックしてデプロイします。

• サブスクリプションは、常に Supabase 内の認証済みユーザーの id にひも付けて、ロールベースで安全にアクセスできるようにしておく必要があります。

​

高度な連携: Webhooks と Supabase

サブスクリプションやロールベースのアクセスなど、複雑な決済フローには、Stripe 連携を安全に処理するために Supabase を使用することを Lovable は推奨しています。これにより、支払いプランに基づく適切な webhook 処理、サブスクリプション管理、ロールベースのアクセス制御が可能になります。

ユーザーアカウントに必要な変更を処理するエッジ関数は、AI によって自動的にセットアップされます。

1. Supabase をプロジェクトに接続する

   はじめ方はとてもシンプルです。Lovable には Supabase と簡単に接続できるネイティブ連携機能が組み込まれています。

   1. Lovable 右上の Supabase ボタン をクリックします。
   2. 手順に従ってプロジェクトをリンクします。
   3. 接続が完了すると、Supabase によって安全な決済処理、サブスクリプション管理、webhook 処理、顧客データの保存、エラー処理が可能になります。
2. 安全な決済処理

   まずは Lovable へのプロンプトから始めます。

   Stripe をプロジェクトに接続しましょう。まずは安全な決済処理から始めます。

   Lovable は決済処理に必要な SQL スキーマを生成します。これにはユーザー、サブスクリプション、支払い用のデータベーステーブルが含まれます。変更を適用する前に、これらのテーブルを確認し、自分のプロダクトの要件に合わせてカスタマイズできます。

3. Webhooks 用のエッジ関数を実装する

   Supabase の Edge Functions は、小さく高性能なサーバーレス関数としてユーザーに近い場所で実行され、高速な応答を実現します。これらは支払い確認などの webhook イベントを処理し、その後データベースを更新します。
4. APIキーを安全に追加する

   Stripe を安全に連携するには、APIキーをチャットで直接共有しないでください。代わりに次の手順を行います。

   
5. 連携をテストする

   • Stripe のテストモード を使って、安全に決済をテストします。
   • テスト用カード情報:
     • カード番号: 4242 4242 4242 4242
     • 有効期限は将来の日付なら任意
     • 3桁の任意の CVC
   • アプリをデプロイ します—Stripe 連携はプレビューモードでは動作しません。

​

デバッグとトラブルシューティング

コンソールログを確認する

1. ステップ 1

   Developer Tools を開きます（Chrome で右クリック > 検証 > Console）。

2. ステップ 2

   エラーを探し、Webhook イベントのログを確認します。

3. ステップ 3

   エラーメッセージをコピーして、Lovable にデバッグの相談をします。

Supabase のログを確認する

1. ステップ 1

   Supabase Dashboard に移動します。

2. ステップ 2

   Edge Functions を開きます。

3. ステップ 3

   Webhook エラーを確認するためにログをチェックします。

Stripe で Webhook イベントを検証する

1. ステップ 1

   Stripe Dashboard に移動します。

2. ステップ 2

   Webhook ログを開きます。

3. ステップ 3

   Stripe がデータを正しく送信していることを確認します。

Lovable の Chat Mode を使う

1. ステップ 1

   chat mode に切り替えます。

2. ステップ 2

   Lovable に追加の質問をします。

3. ステップ 3

   Rubber Duck Method（ラバーダック・メソッド）を使い、問題を明確にするために、課題を一つずつ説明します。