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

# Tracer un flux de paiement Stripe de bout en bout

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="Tracer un flux de paiement Stripe de bout en bout" description="Utilisez Ask Devin pour cartographier chaque fichier et chaque fonction d’un flux de paiement Stripe Checkout, du bouton S’abonner jusqu’au gestionnaire de webhook, avant d’écrire la moindre ligne de code." prompt="J’ai besoin d’ajouter une logique de retry à notre gestionnaire de webhook de paiement. Avant de commencer, guide-moi à travers l’ensemble du flux de paiement — depuis le bouton de paiement en front-end, en passant par l’API, l’intégration Stripe, le traitement du webhook et les mises à jour de la base de données. Dresse la liste de tous les fichiers et fonctions concernés." category="Développement de fonctionnalités" features="MCP" agent="ada" />

<div className="uc-detail-wrapper">
  <Tip>Vous ne souhaitez pas effectuer cette configuration manuellement ? Collez un lien vers cette page dans une session Devin et demandez-lui de tout configurer pour vous.</Tip>

  <Steps>
    <Step title="Demandez à Devin de tracer le flux de paiement">
      On vous a attribué un ticket pour ajouter une logique de retry au gestionnaire de webhook Stripe, mais vous avez rejoint l'équipe il y a deux semaines et vous n'avez encore jamais travaillé sur la partie paiements. Au lieu de passer une heure à parcourir les fichiers source à la main, ouvrez [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) et demandez‑lui de tracer le flux pour vous.

      Sélectionnez **Ask Devin** dans la barre latérale de gauche, choisissez votre dépôt, puis décrivez le flux que vous devez comprendre :

      <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 lit la documentation [DeepWiki](/fr/work-with-devin/deepwiki) de votre dépôt, recherche dans le code source réel et suit les appels de fonctions entre fichiers pour construire une vue d'ensemble complète. Il renvoie une carte structurée de l'intégralité du flux :

      ```
      ## Flux de paiement : Abonnement → Base de données

      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()
         ⚠ Aucune logique de nouvelle tentative ici — c'est là que vous apporterez vos modifications

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

      En moins d’une minute, vous obtenez une cartographie du pipeline de paiement au niveau des fichiers : cinq fichiers, les noms de fonctions exacts et l’emplacement précis où appliquer votre modification.
    </Step>

    <Step title="Approfondir le gestionnaire de webhook grâce à des questions complémentaires">
      Ask Devin permet un dialogue naturel — vous pouvez poser autant de questions complémentaires que nécessaire. Maintenant que vous pouvez voir le pipeline, examinez en détail la partie que vous allez modifier :

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

      Continuez à poser des questions complémentaires jusqu’à ce que vous ayez une vision complète. Ask Devin conserve le contexte de toute la conversation, donc chaque question s’appuie sur les réponses précédentes. Vous pouvez également demander à Devin de décrire votre approche d’implémentation.
    </Step>

    <Step title="Démarrez une session de programmation directement depuis Ask Devin">
      Vous connaissez maintenant exactement le fichier à modifier (`src/webhooks/stripe.ts`), l’utilitaire de retry existant à réutiliser (`src/lib/retry.ts`) et la file de lettres mortes vers laquelle les autres gestionnaires envoient déjà les messages (`src/queues/dlq.ts`).

      Appuyez sur **⌥ Option + Entrée** (ou cliquez sur l’icône en forme de flèche) pour démarrer une session Devin directement depuis votre conversation Ask Devin. Devin conserve tout ce qu’il a appris — la map des fichiers, les modèles de gestion des erreurs, l’utilitaire de retry — ce qui lui permet de sauter la phase d’investigation et de passer directement à l’implémentation. Le **statut de la session sera visible directement dans votre conversation Ask Devin**, afin que vous puissiez suivre la progression sans changer de contexte.

      Vous pouvez également saisir une instruction d’implémentation spécifique avant d’appuyer sur ⌥ Entrée pour guider ce que Devin construit :

      <PromptBlock>
        ```txt Implémentez avec tout le contexte theme={null}
        Ajoutez une logique de retry avec backoff exponentiel au gestionnaire
        de webhook Stripe dans src/webhooks/stripe.ts. Réutilisez la classe
        RetryPolicy existante de src/lib/retry.ts que les autres gestionnaires
        de webhook utilisent déjà.

        Si le traitement du webhook échoue, réessayez jusqu’à 3 fois avec
        backoff (1s, 4s, 16s). Après épuisement de toutes les tentatives,
        envoyez l’événement vers la file de lettres mortes SQS existante à
        src/queues/dlq.ts.

        Ajoutez des tests couvrant les scénarios de retry et de DLQ.
        ```
      </PromptBlock>

      Comme la session hérite du contexte de votre conversation Ask, Devin produit une pull request (PR) plus précise avec moins d’itérations. Ce workflow Ask-to-Agent est le moyen le plus rapide de passer de "Je ne connais pas cette base de code" à "voici une PR." Pour en savoir plus, consultez le [guide Ask Devin](/fr/work-with-devin/ask-devin).
    </Step>
  </Steps>
</div>
