> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe 決済フローをエンドツーエンドでトレースする

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Stripeの支払いフローをエンドツーエンドでトレースする" description="Ask Devin を使って、サブスクライブボタンから Webhook ハンドラーまで、Stripe のチェックアウトフローに含まれるすべてのファイルと関数を、コードを書く前に洗い出します。" prompt="支払いの Webhook ハンドラーにリトライロジックを追加する必要があります。始める前に、フロントエンドのチェックアウトボタンから、API、Stripe 連携、Webhook 処理、データベース更新まで、支払いフロー全体を順を追って説明してください。関与するすべてのファイルと関数を挙げてください。" category="機能開発" features="MCP" agent="ada" />

<div className="uc-detail-wrapper">
  <Tip>手動で設定したくないですか？このページへのリンクをDevinセッションに貼り付け、すべて設定するよう依頼してください。</Tip>

  <Steps>
    <Step title="Devin に支払いフローのトレースを依頼する">
      チームに参加してまだ2週間で、決済まわりのコードを触ったことがないのに、Stripe の webhook ハンドラーにリトライロジックを追加するチケットが割り当てられました。ソースコードを1時間クリックしながら追いかける代わりに、[Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) を開いて、フローをトレースするよう依頼しましょう。

      左サイドバーから **Ask Devin** を選択し、リポジトリを選んで、理解したいフローを説明します:

      <PromptBlock agent="ada">
        ```txt Trace the payment flow theme={null}
        決済用の webhook ハンドラーにリトライロジックを追加する必要があります。作業を始める前に、決済がエンドツーエンドでどのように動くかを説明してください:

        1. ユーザーが料金ページで "Subscribe" をクリックしたとき、何が起こりますか？
        2. どの API ルートがそのリクエストを処理しますか？
        3. Stripe 連携はどのように機能していますか？サブスクリプションはどこで作成されますか？
        4. webhook はどのように処理され、DB はどこで更新されますか？

        各ステップについて、ファイルパス、関数名、およびその処理内容を1行で要約して教えてください。
        ```
      </PromptBlock>

      Devin は、あなたのリポジトリ向けの [DeepWiki](/ja/work-with-devin/deepwiki) ドキュメントを読み、実際のソースコードを検索し、ファイルをまたいだ関数呼び出しをトレースして全体像を構築し、フロー全体の構造化されたマップを返します:

      ```
      ## Payment Flow: Subscribe → Database

      1. src/pages/pricing/PricingCard.tsx:45
         handleSubscribe() → POST /api/v2/subscriptions

      2. src/api/v2/subscriptions/create.ts:12
         Validates input, checks eligibility → calls SubscriptionService.create()

      3. src/services/SubscriptionService.ts:89
         Creates Stripe subscription via stripe.subscriptions.create()
         Stores pending record with status="pending"

      4. src/webhooks/stripe.ts:34
         Receives invoice.payment_succeeded → calls SubscriptionService.activate()
         ⚠ No retry logic here — this is where you'll make changes

      5. src/services/SubscriptionService.ts:134
         Updates status to "active", creates invoice record, emits event
      ```

      1分もかからずに、決済パイプラインのファイルレベルのマップが手に入ります — 5つのファイル、それぞれの正確な関数名、そして変更を加えるべき箇所まで一目で分かります。
    </Step>

    <Step title="フォローアップで Webhook ハンドラーを詳しく見ていく">
      Ask Devin は会話型なので、必要なだけフォローアップの質問ができます。パイプラインが確認できたら、これから変更する箇所を深掘りしていきましょう:

      <PromptBlock agent="ada">
        ```txt Find error handling patterns theme={null}
        このコードベース内の他の webhook handler が、失敗時の処理をどのように行っているかを教えてください。
        既存のリトライ機構やデッドレタキューで再利用すべきものはありますか？
        src/webhooks/ と、共有されている middleware を確認してください。
        ```
      </PromptBlock>

      <PromptBlock agent="ada">
        ```txt Check for related callers theme={null}
        SubscriptionService を呼び出している箇所をすべて見つけてください — 自分のリトライロジックが他の呼び出し元を壊さないようにしたいです。
        さらに、リトライ対応が組み込まれた共通の StripeClient wrapper があるかどうかも確認してください。
        ```
      </PromptBlock>

      全体像を把握できるまでフォローアップを続けてください — Ask Devin は会話全体のコンテキストを保持するため、各質問は前の回答内容に基づいて積み上がっていきます。さらに、実装アプローチの概要を作成するよう Devin に依頼することもできます。
    </Step>

    <Step title="Ask Devin から直接コーディングセッションを開始する">
      これで、変更すべき正確なファイル (`src/webhooks/stripe.ts`) 、再利用できる既存のリトライ用ユーティリティ (`src/lib/retry.ts`) 、そして他のハンドラーがすでにプッシュしているデッドレターキュー (`src/queues/dlq.ts`) が特定できました。

      **⌥ Option + Enter** を押す (または矢印アイコンをクリックする) と、Ask Devin の会話から直接 Devin セッションを開始できます。Devin は、これまでに得た情報 ― ファイルマップ、エラーハンドリングパターン、リトライユーティリティ ― をすべて引き継ぐため、調査フェーズをスキップして、すぐに実装に入ります。**セッションのステータスは Ask Devin の会話内で直接確認できるため**、コンテキストを切り替えることなく進捗をモニタリングできます。

      また、⌥ Enter を押す前に具体的な実装プロンプトを入力して、Devin にどのような実装を行わせたいかを指示することもできます:

      <PromptBlock>
        ```txt Implement with full context theme={null}
        Add exponential backoff retry logic to the Stripe webhook handler at
        src/webhooks/stripe.ts. Reuse the existing RetryPolicy class from
        src/lib/retry.ts that other webhook handlers already use.

        If webhook processing fails, retry up to 3 times with backoff
        (1s, 4s, 16s). After all retries are exhausted, push the event to
        the existing SQS dead letter queue at src/queues/dlq.ts.

        Add tests covering the retry and DLQ scenarios.
        ```
      </PromptBlock>

      このセッションは Ask の会話からコンテキストを継承するため、Devin はより精度が高く、少ない反復で済む PR を生成できます。この Ask から Agent へのワークフローは、「このコードベースについて何も知らない」状態から「これが PR です」という状態まで到達するための最速の方法です。詳しくは [Ask Devin guide](/ja/work-with-devin/ask-devin) を参照してください。
    </Step>
  </Steps>
</div>
