Stripe 連携

要件

Stripe を連携する前に、以下を満たしていることを確認してください：

• 動作する MGX アプリケーション。
• MGX プロジェクトがすでに Supabase Project に連携されていること。(Supabase の詳細はこちら。)
• Stripe dashboard で商品と対応する価格を作成済みであること。

注: プレビュー モードでは決済機能のテストはできません。MGX アプリをデプロイし、Stripe を Test Mode に切り替えて連携を確認してください。

テストカード:

• カード番号: 4242 4242 4242 4242
• 有効期限: 将来の任意の日付
• CVC: 任意の 3 桁の数字

Stripe 決済設定

1. Supabase を連携

   • MGX の右上にある Supabase ボタンをクリックします
   • Supabase 連携ガイド に従って対象の Supabase Project を選択します
   • 連携が完了すると、Supabase 経由で決済設定を構成できます

2. サブスクリプション要件を自然言語で説明する

   • 例: 週額 $4.99、月額 $14.99、年額 $149.99 の 3 つのサブスクリプションプランをサポートする決済システムを作成してください。

   送信後、MGX エージェントが設定ボタンを生成します。少なくとも 2 つの項目を入力する必要があります。

3. Add Stripe Secret Key ボタンをクリックします

   

   • STRIPE_SECRET_KEY フィールドに Stripe の secret key を入力します。
   • 各プランについて、PRICE_ID で終わるフィールドに対応する Stripe Price ID を入力します。

   

   Stripe の secret key はここで取得できます: https://dashboard.stripe.com/test/apikeys

   Product Catalog > Products に移動し、以下のいずれかの方法で price ID を取得します：

   • "Pricing" リストで、対応する価格の右側にある “More” ボタンをクリックし、次に "Copy Price ID" をクリックします。

   

   価格名を直接クリックして詳細ページを開き、右上に表示される price ID をコピーすることもできます。

   

   最後に、各 price ID を対応する入力フィールドに正確に貼り付けます。

   

   注: プライバシーとセキュリティのため、secret key を MGX チャットに直接貼り付けないでください。漏洩すると、Stripe アカウントへの不正アクセスを許す可能性があります。代わりに、MGX の "Add API Key" ボタンを使用して安全に保存してください。

4. Add Stripe Webhook Secret Key ボタンをクリックします

   

   • Webhook Secret Key を入力します

5. Webhook Secret Key の見つけ方:

   Stripe で左下の “Developers” をクリックし、次に Webhooks オプションを選択します。

   

   Webhooks ページで、"Add destination" ボタンをクリックします。

   

   プロジェクトの要件に合った webhook event を選択します：

   • checkout.session.async_payment_failed
   • checkout.session.async_payment_succeeded
   • checkout.session.completed
   • checkout.session.expired

   

   "Continue" をクリックした後、"Webhook endpoint" を選択します。

   

   Supabase の endpoint URL を入力します。

   

6. Supabase の Endpoint URL の見つけ方:

   MGX で View Edge Function をクリックします。

   

   • 対応する _webhook サフィックスが付いた edge function をクリックして選択します。

     

   • 対応する edge function の Details パネルで Endpoint URL をコピーし、Stripe Event Destination に貼り付けます。

     

7. 連携をテストする

   Stripe の Test Mode を使って決済をテストします。

   テストカード情報:

   • カード番号: 4242 4242 4242 4242
   • 将来の任意の有効期限
   • 任意の 3 桁の CVC

FAQ

なぜプレビュー モードで決済をテストできないのですか？

プレビュー モードはローカル環境で実行されるため、公開アクセス可能な Webhook URL を提供しません。Stripe イベントを受信するには、アプリをデプロイする必要があります。

本番モードに切り替えるにはどうすればよいですか？

Stripe Dashboard で Test Mode を無効にし、本番用の Secret Key と Webhook Secret を使用できます。

テスト決済が成功したかどうかはどう確認できますか？

テスト決済の完了後、Stripe の Payments ページに移動してテスト取引記録を確認してください。