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

# Den Stripe-Zahlungsablauf End-to-End nachverfolgen

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="Einen Stripe-Zahlungsfluss End-to-End nachverfolgen" description="Verwende Ask Devin, um jede Datei und Funktion in einem Stripe-Checkout-Flow zu erfassen, vom Subscribe-Button bis zum Webhook-Handler, bevor du eine einzige Zeile Code schreibst." prompt="Ich muss unseren Payment-Webhook-Handler um Retry-Logik erweitern. Bevor ich beginne, führe mich durch den vollständigen Zahlungsfluss – vom Checkout-Button im Frontend über die API, Stripe-Integration und Webhook-Verarbeitung bis hin zu den Datenbank-Updates. Liste jede beteiligte Datei und Funktion auf." category="Feature-Entwicklung" features="MCP" agent="ada" />

<div className="uc-detail-wrapper">
  <Tip>Möchtest du das nicht manuell einrichten? Füge einen Link zu dieser Seite in eine Devin-Sitzung ein und bitte es, alles für dich einzurichten.</Tip>

  <Steps>
    <Step title="Bitten Sie Devin, den Zahlungsfluss nachzuvollziehen">
      Dir wurde ein Ticket zugewiesen, um Retry-Logik zum Stripe-Webhook-Handler hinzuzufügen, aber du bist erst vor zwei Wochen zum Team gestoßen und hast zuvor noch nie mit Zahlungen gearbeitet. Anstatt eine Stunde damit zu verbringen, dich durch Quelldateien zu klicken, öffne [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) und bitte es, den Ablauf für dich nachzuverfolgen.

      Wähle **Ask Devin** in der linken Seitenleiste aus, wähle dein Repo und beschreibe den Ablauf, den du verstehen musst:

      <PromptBlock agent="ada">
        ```txt Trace the payment flow theme={null}
        Ich muss Retry-Logik zu unserem Zahlungs-Webhook-Handler hinzufügen. Bevor ich
        beginne, führe mich bitte einmal durch, wie Zahlungen end-to-end funktionieren:

        1. Was passiert, wenn ein Nutzer auf der Preisseite auf "Subscribe" klickt?
        2. Welche API-Route verarbeitet die Anfrage?
        3. Wie funktioniert die Stripe-Integration – wo werden Abonnements erstellt?
        4. Wie werden Webhooks verarbeitet und wo wird die Datenbank aktualisiert?

        Gib mir für jeden Schritt den Dateipfad, den Funktionsnamen und eine
        einzeilige Zusammenfassung seiner Funktion.
        ```
      </PromptBlock>

      Devin liest die [DeepWiki](/de/work-with-devin/deepwiki)-Dokumentation für dein Repo, durchsucht den tatsächlichen Quellcode und verfolgt Funktionsaufrufe über Dateien hinweg, um ein vollständiges Bild zu erstellen. Es gibt eine strukturierte Darstellung des gesamten Ablaufs zurück:

      ```
      ## Zahlungsablauf: Abonnieren → Datenbank

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

      2. src/api/v2/subscriptions/create.ts:12
         Validiert Eingabe, prüft Berechtigung → ruft SubscriptionService.create() auf

      3. src/services/SubscriptionService.ts:89
         Erstellt Stripe-Abonnement über stripe.subscriptions.create()
         Speichert ausstehenden Datensatz mit status="pending"

      4. src/webhooks/stripe.ts:34
         Empfängt invoice.payment_succeeded → ruft SubscriptionService.activate() auf
         ⚠ Keine Retry-Logik vorhanden — hier werden die Änderungen vorgenommen

      5. src/services/SubscriptionService.ts:134
         Aktualisiert Status auf "active", erstellt Rechnungsdatensatz, löst Ereignis aus
      ```

      In weniger als einer Minute haben Sie eine Übersicht auf Dateiebene über die Payment-Pipeline – mit fünf Dateien, den exakten Funktionsnamen und der Stelle, an der Ihre Änderung hingehört.
    </Step>

    <Step title="Webhook-Handler mit Folgefragen näher untersuchen">
      Ask Devin ist dialogorientiert – Sie können so viele Rückfragen stellen, wie Sie brauchen. Jetzt, da Sie die Pipeline sehen können, vertiefen Sie sich in den Bereich, den Sie ändern werden:

      <PromptBlock agent="ada">
        ```txt Fehlerbehandlungsmuster finden theme={null}
        Zeigen Sie mir, wie andere Webhook-Handler in dieser Codebasis mit Fehlern
        umgehen. Gibt es bestehende Retry-Mechanismen oder Dead-Letter-Queues, die ich
        wiederverwenden sollte? Prüfen Sie src/webhooks/ und gemeinsam genutzte Middleware.
        ```
      </PromptBlock>

      <PromptBlock agent="ada">
        ```txt Auf zugehörige Aufrufer prüfen theme={null}
        Finden Sie alle Stellen, an denen SubscriptionService aufgerufen wird – ich möchte
        sicherstellen, dass meine Retry-Logik keine anderen Aufrufer beeinträchtigt. Prüfen Sie außerdem,
        ob es einen gemeinsamen StripeClient-Wrapper mit integrierter Retry-Unterstützung gibt.
        ```
      </PromptBlock>

      Stellen Sie so lange Rückfragen, bis Sie das vollständige Bild haben – Ask Devin behält den Kontext der gesamten Unterhaltung, sodass jede Frage auf den vorherigen Antworten aufbaut. Sie können Devin außerdem bitten, Ihren Implementierungsansatz zu skizzieren.
    </Step>

    <Step title="Starte eine Coding-Session direkt über Ask Devin">
      Du kennst jetzt die genaue Datei, die geändert werden muss (`src/webhooks/stripe.ts`), das bestehende Retry-Utility zur Wiederverwendung (`src/lib/retry.ts`) und die Dead-Letter-Queue, in die andere Handler bereits schreiben (`src/queues/dlq.ts`).

      Drücke **⌥ Option + Enter** (oder klicke auf das Pfeilsymbol), um direkt aus deinem Ask Devin-Gespräch eine Devin-Session zu starten. Devin übernimmt alles, was es gelernt hat – die Dateiübersicht, die Fehlerbehandlungsmuster, das Retry-Utility – sodass es die Untersuchungsphase überspringt und direkt in die Implementierung wechselt. Der **Session-Status ist direkt in deinem Ask Devin-Gespräch sichtbar**, sodass du den Fortschritt überwachen kannst, ohne den Kontext zu wechseln.

      Du kannst auch vor dem Drücken von ⌥ Enter einen konkreten Implementierungs-Prompt eingeben, um zu steuern, was Devin baut:

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

      Da die Session den Kontext aus deinem Ask-Gespräch erbt, erzeugt Devin einen präziseren Pull Request (PR) mit weniger Iterationen. Dieser Ask-to-Agent-Workflow ist der schnellste Weg von "Ich kenne diese Codebase nicht" zu "Hier ist ein PR." Mehr dazu erfährst du im [Ask Devin-Leitfaden](/de/work-with-devin/ask-devin).
    </Step>
  </Steps>
</div>
