> ## 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.

# Trace a Stripe Payment Flow End-to-End

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="Trace a Stripe Payment Flow End-to-End" description="Use Ask Devin to map every file and function in a Stripe checkout flow, from the Subscribe button to the webhook handler, before writing a single line of code." prompt="I need to add retry logic to our payment webhook handler. Before I start, walk me through the full payment flow — from the frontend checkout button through the API, Stripe integration, webhook processing, and database updates. List every file and function involved." category="Feature Development" features="MCP" agent="ada" />

<div className="uc-detail-wrapper">
  <Tip>Don't want to set this up manually? Paste a link to this page into a Devin session and ask it to set everything up for you.</Tip>

  <Steps>
    <Step title="Ask Devin to trace the payment flow">
      You've been assigned a ticket to add retry logic to the Stripe webhook handler, but you joined the team two weeks ago and haven't touched payments before. Instead of spending an hour clicking through source files, open [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) and ask it to trace the flow for you.

      Select **Ask Devin** from the left sidebar, choose your repo, and describe the flow you need to understand:

      <PromptBlock agent="ada">
        ```txt Trace the payment flow theme={null}
        I need to add retry logic to our payment webhook handler. Before I
        start, walk me through how payments work end-to-end:

        1. What happens when a user clicks "Subscribe" on the pricing page?
        2. Which API route handles the request?
        3. How does the Stripe integration work — where are subscriptions created?
        4. How do webhooks get processed and where does the DB get updated?

        For each step, give me the file path, function name, and a one-line
        summary of what it does.
        ```
      </PromptBlock>

      Devin reads the [DeepWiki](/work-with-devin/deepwiki) documentation for your repo, searches through the actual source code, and traces function calls across files to build a complete picture. It returns a structured map of the entire flow:

      ```
      ## 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
      ```

      In under a minute you have a file-level map of the payment pipeline — five files, the exact function names, and the spot where your change goes.
    </Step>

    <Step title="Drill into the webhook handler with follow-ups">
      Ask Devin is conversational — you can ask as many follow-up questions as you need. Now that you can see the pipeline, drill into the area you'll be changing:

      <PromptBlock agent="ada">
        ```txt Find error handling patterns theme={null}
        Show me how other webhook handlers in this codebase handle failures.
        Are there any existing retry mechanisms or dead letter queues I should
        reuse? Check src/webhooks/ and any shared middleware.
        ```
      </PromptBlock>

      <PromptBlock agent="ada">
        ```txt Check for related callers theme={null}
        Find all places that call SubscriptionService — I want to make sure
        my retry logic won't break any other callers. Also check if there's a
        shared StripeClient wrapper with built-in retry support.
        ```
      </PromptBlock>

      Keep asking follow-ups until you have the full picture. Ask Devin retains context from the entire conversation, so each question builds on the previous answers. You can also ask Devin to outline your implementation approach.
    </Step>

    <Step title="Start a coding session directly from Ask Devin">
      You now know the exact file to change (`src/webhooks/stripe.ts`), the existing retry utility to reuse (`src/lib/retry.ts`), and the dead letter queue that other handlers already push to (`src/queues/dlq.ts`).

      Press **⌥ Option + Enter** (or click the arrow icon) to start a Devin session directly from your Ask Devin conversation. Devin carries over everything it learned — the file map, the error handling patterns, the retry utility — so it skips the investigation phase and goes straight to implementation. The **session status will be visible directly in your Ask Devin conversation**, so you can monitor progress without switching context.

      You can also type a specific implementation prompt before pressing ⌥ Enter to guide what Devin builds:

      <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>

      Because the session inherits context from your Ask conversation, Devin produces a more accurate PR with fewer iterations. This Ask-to-Agent workflow is the fastest way to go from "I don't know this codebase" to "here's a PR." Learn more in the [Ask Devin guide](/work-with-devin/ask-devin).
    </Step>
  </Steps>
</div>
