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

# Stripe-Checkout-Flow erstellen

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-Checkout-Flow erstellen" description="Gib Devin eine Checkout-Spezifikation zusammen mit deinen Stripe-Sandbox-Keys und erhalte einen funktionsfähigen Zahlungsablauf – Pricing-Seite, Checkout-Session, Webhook-Handler und Bestätigungsseite –, der im Browser verifiziert ist." prompt="Implementiere einen Stripe-Checkout-Flow für unsere SaaS-App. Pricing-Seite unter /pricing mit drei Tarifen: Starter 19 $/Monat (5 Projekte, 10 GB, E-Mail-Support), Pro 49 $/Monat (unbegrenzte Projekte, 100 GB, Priority-Support), Team 99 $/Monat (Pro + Team-Management, SSO, Audit-Log). Jede Karte hat einen „Abonnieren“-Button, der eine Stripe-Checkout-Session via POST /api/checkout/sessions erstellt. Der Webhook unter /api/webhooks/stripe verarbeitet checkout.session.completed – aktualisiere den Nutzerplan und subscription_id in der Datenbank und verifiziere die Signatur mit STRIPE_WEBHOOK_SECRET. Die Erfolgsseite unter /checkout/success zeigt den Tarifnamen, den Betrag und einen „Go to Dashboard“-Button. Bevor du Code schreibst, skizziere deinen Plan zur Überprüfung. Nutze unsere Next.js-App, Prisma ORM, und folge den Mustern in src/pages/settings/billing.tsx. STRIPE_SECRET_KEY und STRIPE_WEBHOOK_SECRET kommen aus den Umgebungsvariablen. Schreibe Tests für die Webhook-Verifikation, die Session-Erstellung und die Logik zur Aktualisierung des Tarifs. Starte den Dev-Server und überprüfe den gesamten Flow im Browser mit der Stripe-Testkarte 4242 4242 4242 4242. Öffne keine PR, bevor nicht alles End-to-End funktioniert." category="Feature-Entwicklung" features="" />

<div className="uc-detail-wrapper">
  <Tip>Möchten Sie dies nicht manuell einrichten? Fügen Sie einen Link zu dieser Seite in eine Devin-Sitzung ein und bitten Sie Devin, alles für Sie einzurichten.</Tip>

  <Steps>
    <Step title="(Optional) Codebasis mit Ask Devin erkunden">
      Wenn Sie nicht sicher sind, wie Ihre App heute Zahlungen verarbeitet — oder welche Dateien und Muster Sie in Ihrer Spezifikation referenzieren sollen — verwenden Sie [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery), um dies zuerst zu untersuchen:

      <PromptBlock agent="ada">
        ```txt Checkout-Implementierung erkunden theme={null}
        Wie verarbeitet unsere App derzeit die Abrechnung? Zeige mir:
        1. Wo Benutzerpläne/Abonnements in der Datenbank gespeichert sind
        2. Vorhandene Stripe-Integrationsdateien oder API-Routen
        3. Wie andere zahlungsbezogene Seiten strukturiert sind (z. B. Einstellungen/Abrechnung)
        4. Welches ORM wir verwenden und wie Migrationen typischerweise erstellt werden
        ```
      </PromptBlock>

      Verwenden Sie die Antworten, um Ihre Spezifikation auszufüllen — referenzieren Sie spezifische Dateien, Tabellennamen und Muster, damit Devin etwas erstellt, das natürlich in Ihre Codebasis passt. Sie können auch eine Devin-Sitzung direkt aus Ask Devin starten, und es wird alles, was es gelernt hat, als Kontext übernehmen.
    </Step>

    <Step title="Stripe-Sandbox-Schlüssel hinzufügen">
      Devin benötigt Stripe-**Testmodus**-Schlüssel, um Checkout-Sitzungen zu erstellen und den Webhook-Handler zu verifizieren. Verwenden Sie immer Sandbox-Anmeldedaten — geben Sie Devin niemals produktive Stripe-Schlüssel.

      Der einfachste Ansatz ist, sie als [Organisationsgeheimnisse](/de/product-guides/secrets) zu speichern, bevor die Sitzung gestartet wird:

      1. Gehen Sie zu **Einstellungen > Geheimnisse** und fügen Sie hinzu:
         * `STRIPE_SECRET_KEY` — Ihr Testmodus-Geheimschlüssel aus dem [Stripe-Dashboard](https://dashboard.stripe.com/test/apikeys)
         * `STRIPE_WEBHOOK_SECRET` — das Signierungsgeheimnis aus Ihren [Webhook-Endpunkteinstellungen](https://dashboard.stripe.com/test/webhooks)
      2. Devin greift auf diese als Umgebungsvariablen zu, sodass sie niemals fest in Ihrem Quellcode kodiert werden.

      <Note>Organisationsgeheimnisse müssen **vor** dem Start der Sitzung hinzugefügt werden — sie werden beim Sitzungsstart eingefügt. Alternativ können Sie Geheimnisse während der Sitzung über den Chat bereitstellen, und Devin wird Sie auch proaktiv nach allen benötigten Anmeldedaten fragen, wenn es auf fehlende Umgebungsvariablen stößt.</Note>
    </Step>

    <Step title="Ihre Checkout-Spezifikation übergeben">
      Fügen Sie Ihre Spezifikation — aus einem PRD, einem Linear-Ticket oder einer detaillierten Slack-Nachricht — direkt in Devin ein. Eine gute Checkout-Spezifikation umfasst die Preisstufen, den Zahlungsablauf und was nach einer erfolgreichen Zahlung passiert. Je strukturierter, desto besser.

      <PromptBlock>
        ```txt Stripe-Checkout-Flow implementieren theme={null}
        Implementiere einen Stripe-Checkout-Flow für unsere SaaS-App:

        ## Pricing page
        - New route at /pricing with three tier cards:
          - Starter: $19/mo — 5 projects, 10GB storage, email support
          - Pro: $49/mo — unlimited projects, 100GB storage, priority support
          - Team: $99/mo — everything in Pro + team management, SSO, audit log
        - Each card has a "Subscribe" button that initiates checkout

        ## Checkout
        - POST /api/checkout/sessions — creates a Stripe Checkout session
          with the selected price ID, customer email, and success/cancel URLs
        - Redirect the user to Stripe's hosted checkout page
        - On success, redirect to /checkout/success?session_id={CHECKOUT_SESSION_ID}

        ## Webhook
        - POST /api/webhooks/stripe — receives Stripe events
        - Handle checkout.session.completed: update the user's plan and
          subscription_id in the database
        - Verify the webhook signature using STRIPE_WEBHOOK_SECRET

        ## Success page
        - /checkout/success — fetch the session details from Stripe,
          display the plan name, amount, and a "Go to Dashboard" button

        ## Planning
        - Before writing any code, outline your implementation plan and share
          it with me for approval. List the files you'll create or modify,
          the database changes, and the order of implementation.

        ## Technical notes
        - Follow the patterns in src/pages/settings/billing.tsx for the UI
        - Use Prisma: add a subscriptions table (id, user_id, stripe_subscription_id,
          plan, status, current_period_end)
        - STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET are available as env vars

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

      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.
    </Step>

    <Step title="Devin builds and verifies in the browser">
      Devin liest Ihre Spezifikation, erkundet die Codebasis nach passenden Mustern und implementiert dann über den gesamten Stack hinweg. Bevor eine PR geöffnet wird, führt Devin Ihre App lokal aus und öffnet den [integrierten Browser](/de/work-with-devin/devin-session-tools), um zu überprüfen, ob der Checkout-Flow Ende-zu-Ende funktioniert.

      So sieht das beim Stripe-Checkout-Beispiel aus:

      1. **Erstellt die Migration** — Fügt die Tabelle `subscriptions` mit den Spalten `user_id`, `stripe_subscription_id`, `plan`, `status` und `current_period_end` hinzu
      2. **Erstellt die Pricing-Seite** — Erstellt unter `/pricing` die drei Preisstufen-Karten, jeweils mit einer Schaltfläche "Subscribe", die an die Checkout-API postet
      3. **Implementiert die Erstellung der Checkout-Sitzung** — Erstellt `POST /api/checkout/sessions`, das eine Stripe-Checkout-Sitzung mit der korrekten Preis-ID, Kunden-E-Mail und den Redirect-URLs erzeugt
      4. **Fügt den Webhook-Handler hinzu** — Implementiert `POST /api/webhooks/stripe` mit Signaturprüfung, Verarbeitung des Events `checkout.session.completed` und Datenbankaktualisierungen
      5. **Erstellt die Erfolgsseite** — Erstellt `/checkout/success`, das die Stripe-Sitzung abruft, den Namen des Plans, den berechneten Betrag und einen Link "Go to Dashboard" anzeigt
      6. **Schreibt Tests** — Tests für die Webhook-Signaturprüfung (gültig, ungültig, fehlend), die Erstellung der Checkout-Sitzung und die Datenbanklogik für Planaktualisierungen
      7. **Öffnet den Browser** — Startet den Dev-Server, navigiert zu `/pricing`, klickt bei der Pro-Ebene auf "Subscribe", verifiziert, dass der Stripe-Checkout-Redirect funktioniert, und prüft, dass die Erfolgsseite nach einer Testzahlung korrekt gerendert wird
      8. **Öffnet eine PR** — Liefert alle Änderungen mit einer Zusammenfassung dessen, was implementiert wurde und wie es verifiziert wurde

      Der Verifizierungsschritt im Browser erkennt issues, die Unit-Tests übersehen — eine Pricing-Karte, die den Checkout nicht auslöst, eine Redirect-URL, die einen 404 zurückgibt, oder eine Erfolgsseite, die Sitzungsdetails nicht laden kann. Wenn Sie ein [lokales Testing-Skill](/de/product-guides/skills) definiert haben, folgt Devin diesen Schritten automatisch für jedes Feature, das es erstellt.
    </Step>

    <Step title="Iterate from the PR">
      Sobald die PR offen ist, senden Sie in derselben Sitzung Folge-Prompts, um den Checkout-Flow zu erweitern oder anzupassen.

      <PromptBlock>
        ```txt Add subscription management theme={null}
        Add a "Manage Subscription" section to /settings/billing that shows the
        current plan, next billing date, and a "Cancel Subscription" button.
        Use the Stripe customer portal for cancellation — create a portal session
        and redirect the user.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add annual pricing toggle theme={null}
        Add a monthly/annual toggle on the pricing page. Annual plans get a 20%
        discount. Show the per-month price with a "billed annually" note and a
        "Save 20%" badge on each card when annual is selected.
        ```
      </PromptBlock>
    </Step>

    <Step title="Review the PR with Devin Review">
      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.
    </Step>
  </Steps>
</div>