手動でのセットアップが面倒ですか？このページのリンクを Devin セッションに貼り付けて、すべてのセットアップを依頼してください。現在アプリがどのように決済を処理しているか、また仕様でどのファイルやパターンを参照すべきかよく分からない場合は、まず [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) を使って調査してください: ```txt チェックアウト実装のスコープを把握する theme={null} 現在、アプリではどのように請求処理を行っていますか？次を教えてください: 1. ユーザーのプラン／サブスクリプションがデータベースのどこに保存されているか 2. 既存の Stripe 連携用ファイルや API ルート 3. その他の決済関連ページ（例: settings/billing）がどのような構造になっているか 4. どの ORM を使っているかと、マイグレーションを通常どのように作成しているか ``` 回答をもとに仕様を補完し、Devin があなたのコードベースに自然にフィットするものを構築できるよう、特定のファイル名、テーブル名、パターンを必ず明記してください。また、Ask Devin からそのまま Devin セッションを開始でき、そこで得られた内容はすべてコンテキストとして引き継がれます。 Devin がチェックアウトセッションを作成し、webhook ハンドラーを検証するには、Stripe の **テストモード** キーが必要です。必ずサンドボックス用の認証情報のみを使用し、本番用の Stripe キーを Devin に渡さないでください。最も簡単な方法は、セッションを開始する前にそれらを [組織シークレット](/ja/product-guides/secrets) として保存しておくことです。 1. **Settings > Secrets** に移動し、次を追加します: * `STRIPE_SECRET_KEY` — [Stripe Dashboard](https://dashboard.stripe.com/test/apikeys) から取得したテストモードのシークレットキー * `STRIPE_WEBHOOK_SECRET` — [webhook endpoint settings](https://dashboard.stripe.com/test/webhooks) に表示される署名シークレット 2. Devin はこれらを環境変数として参照するため、ソースコード内にハードコードされることはありません。組織シークレットはセッション開始時に注入されるため、セッションを開始する**前に**追加しておく必要があります。別の方法として、セッション中にチャットを使ってシークレットを渡すこともできますし、環境変数が不足している場合には、Devin が必要な認証情報を求めてプロアクティブに確認します。 PRD、Linear のチケット、あるいは詳しい Slack メッセージなどから、仕様をそのまま Devin に貼り付けてください。良いチェックアウト用の仕様書では、料金プラン、決済フロー、決済成功後に何が起きるかをカバーします。構造化されているほど効果的です。 ```txt Implement Stripe checkout flow theme={null} 私たちの SaaS アプリ向けに Stripe のチェックアウトフローを実装してください: ## Pricing page - /pricing に 3 つの料金プランカードを表示する新しいルートを作成する: - Starter: $19/mo — プロジェクト 5 件、ストレージ 10GB、メールサポート - Pro: $49/mo — プロジェクト無制限、ストレージ 100GB、優先サポート - Team: $99/mo — Pro のすべて + チーム管理、SSO、監査ログ - 各カードにチェックアウトを開始する "Subscribe" ボタンを配置する ## Checkout - POST /api/checkout/sessions — 選択された price ID、顧客メールアドレス、 success/cancel URL を使って Stripe Checkout セッションを作成する - ユーザーを Stripe がホストするチェックアウトページへリダイレクトする - 成功時は /checkout/success?session_id={CHECKOUT_SESSION_ID} にリダイレクトする ## Webhook - POST /api/webhooks/stripe — Stripe のイベントを受信する - checkout.session.completed を処理し、ユーザーのプランとデータベース内の subscription_id を更新する - STRIPE_WEBHOOK_SECRET を使って webhook シグネチャを検証する ## Success page - /checkout/success — Stripe からセッション詳細を取得し、プラン名、金額、および "Go to Dashboard" ボタンを表示する ## Planning - コードを書く前に、実装プランのアウトラインを作成し、承認のために私と共有すること。作成・変更するファイル、データベースの変更内容、および実装の順序を列挙すること。 ## Technical notes - UI については src/pages/settings/billing.tsx のパターンに従うこと - Prisma を使用する: subscriptions テーブル (id, user_id, stripe_subscription_id, plan, status, current_period_end) を追加する - STRIPE_SECRET_KEY と STRIPE_WEBHOOK_SECRET は環境変数として利用可能 ## Testing & verification - Write tests for webhook signature verification, session creation, and the plan-update logic - After implementing, spin up the local dev server and verify the entire flow in the browser: navigate to /pricing, click Subscribe, complete a test payment with Stripe's test card (4242 4242 4242 4242), confirm the success page renders, and verify the database was updated - Do not open a PR until you've confirmed everything works end-to-end ``` A good spec for Devin includes three things: **what** to build (pricing tiers, checkout flow, webhook handler), **where** it lives (routes, tables, files), and **how** it fits in (existing patterns to follow). You don't need to specify every implementation detail — Devin investigates your codebase to fill in the gaps. Devin reads your spec, explores the codebase for matching patterns, then implements across the full stack. Before opening a PR, it runs your app locally and opens its [built-in browser](/ja/work-with-devin/devin-session-tools) to verify the checkout flow works end-to-end. Here's what that looks like for the Stripe checkout example: 1. **Creates the migration** — Adds the `subscriptions` table with columns for `user_id`, `stripe_subscription_id`, `plan`, `status`, and `current_period_end` 2. **Builds the pricing page** — Creates the three-tier pricing cards at `/pricing`, each with a "Subscribe" button that posts to the checkout API 3. **Implements checkout session creation** — Builds `POST /api/checkout/sessions` that creates a Stripe Checkout session with the correct price ID, customer email, and redirect URLs 4. **Adds the webhook handler** — Implements `POST /api/webhooks/stripe` with signature verification, `checkout.session.completed` event handling, and database updates 5. **Builds the success page** — Creates `/checkout/success` that fetches the Stripe session, displays the plan name, amount charged, and a "Go to Dashboard" link 6. **Writes tests** — Tests for webhook signature verification (valid, invalid, missing), checkout session creation, and the plan-update database logic 7. **Opens the browser** — Starts the dev server, navigates to `/pricing`, clicks "Subscribe" on the Pro tier, verifies the Stripe Checkout redirect works, and checks that the success page renders correctly after a test payment 8. **Opens a PR** — Delivers all changes with a summary of what was implemented and how it was verified The browser verification step catches issues that unit tests miss — a pricing card that doesn't trigger checkout, a redirect URL that 404s, or a success page that fails to load session details. [ローカルテストのスキル](/ja/product-guides/skills) を定義していれば、Devin は作成するすべての機能に対して、その手順を自動的に実行します。 PR が作成されたら、同じセッションでフォローアッププロンプトを送り、チェックアウトフローを拡張または調整します。 ```txt Add subscription management theme={null} /settings/billing に "Manage Subscription" セクションを追加し、現在のプラン、次回請求日、そして "Cancel Subscription" ボタンを表示します。解約には Stripe のカスタマーポータルを使用し、ポータルセッションを作成してユーザーをリダイレクトします。 ``` ```txt Add annual pricing toggle theme={null} 料金ページに月額／年額の toggle を追加します。年額プランには 20% の割引を適用します。年額が選択されている場合は、各カードに月あたりの価格、 "billed annually" の注記、そして "Save 20%" バッジを表示します。 ``` Once Devin opens the PR, use [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) to review the changes. Devin Review has full context of your codebase and can catch bugs, security issues, and style inconsistencies across the diff. You can ask follow-up questions in the review chat — for instance, "Does the webhook handler validate the event type before processing?" — and Devin will answer grounded in the actual code.

{title}