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

# Criar um fluxo de Checkout da 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="Criar um fluxo de checkout da Stripe" description="Entregue ao Devin uma especificação de checkout com suas chaves de sandbox da Stripe e obtenha um fluxo de pagamento funcional — página de preços, sessão de checkout, handler de webhook e página de confirmação — validado no navegador." prompt="Implemente um fluxo de checkout da Stripe para nosso app SaaS. Página de preços em /pricing com três planos: Starter US$ 19/mês (5 projetos, 10GB, suporte por e-mail), Pro US$ 49/mês (projetos ilimitados, 100GB, suporte prioritário), Team US$ 99/mês (Pro + gerenciamento de equipe, SSO (Single Sign-On), registro de auditoria). Cada card tem um botão Subscribe que cria uma sessão do Stripe Checkout via POST /api/checkout/sessions. O webhook em /api/webhooks/stripe trata checkout.session.completed — atualize o plano do usuário e o subscription_id no banco de dados, verifique a assinatura com STRIPE_WEBHOOK_SECRET. A página de sucesso em /checkout/success mostra o nome do plano, o valor e um botão Go to Dashboard. Antes de escrever código, apresente seu plano para revisão. Use nosso app Next.js, Prisma ORM, siga os padrões em src/pages/settings/billing.tsx. STRIPE_SECRET_KEY e STRIPE_WEBHOOK_SECRET vêm das variáveis de ambiente. Escreva testes para verificação do webhook, criação de sessão e lógica de atualização de plano. Inicie o servidor de desenvolvimento e verifique todo o fluxo no navegador com o cartão de teste da Stripe 4242 4242 4242 4242. Não abra um PR até que tudo funcione de ponta a ponta." category="Desenvolvimento de funcionalidades" features="" />

<div className="uc-detail-wrapper">
  <Tip>Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça para ele configurar tudo para você.</Tip>

  <Steps>
    <Step title="(Opcional) Defina o escopo da base de código com o Ask Devin">
      Se você não tiver certeza de como seu app lida com pagamentos hoje — ou de quais arquivos e padrões você deve referenciar na sua spec — use o [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) para investigar primeiro:

      <PromptBlock agent="ada">
        ```txt Scope the checkout implementation theme={null}
        How does our app currently handle billing? Show me:
        1. Where user plans/subscriptions are stored in the database
        2. Any existing Stripe integration files or API routes
        3. How other payment-related pages are structured (e.g., settings/billing)
        4. What ORM we use and how migrations are typically created
        ```
      </PromptBlock>

      Use as respostas para preencher sua spec — faça referência a arquivos específicos, nomes de tabelas e padrões, para que o Devin construa algo que se integre naturalmente à sua base de código. Você também pode iniciar uma sessão do Devin diretamente pelo Ask Devin, e ele levará tudo o que aprendeu como contexto.
    </Step>

    <Step title="Adicionar chaves de teste da Stripe">
      Devin precisa de chaves do Stripe em **modo de teste** para criar sessões de checkout e verificar o manipulador de webhook. Sempre use credenciais de sandbox — nunca forneça chaves do Stripe de produção para o Devin.

      A abordagem mais simples é armazená-las como [segredos da organização](/pt-BR/product-guides/secrets) antes de iniciar a sessão:

      1. Vá para **Settings > Secrets** e adicione:
         * `STRIPE_SECRET_KEY` — sua chave secreta em modo de teste no [Stripe Dashboard](https://dashboard.stripe.com/test/apikeys)
         * `STRIPE_WEBHOOK_SECRET` — o segredo de assinatura nas suas [configurações do endpoint de webhook](https://dashboard.stripe.com/test/webhooks)
      2. Devin acessa esses valores como variáveis de ambiente, portanto eles nunca ficam gravados diretamente no seu código-fonte.

      <Note>Os segredos da organização devem ser adicionados **antes** de iniciar a sessão — eles são injetados no início da sessão. Alternativamente, você pode fornecer segredos durante a sessão usando o chat, e o Devin também solicitará proativamente qualquer credencial de que precisar quando encontrar variáveis de ambiente ausentes.</Note>
    </Step>

    <Step title="Entregue sua especificação de checkout">
      Cole sua especificação — de um PRD, um ticket do Linear ou uma mensagem detalhada no Slack — diretamente no Devin. Uma boa especificação de checkout cobre os planos de preços, o fluxo de pagamento e o que acontece após um pagamento bem-sucedido. Quanto mais estruturada, melhor.

      <PromptBlock>
        ```txt Implementar fluxo de checkout da Stripe theme={null}
        Implemente um fluxo de checkout da Stripe para nosso aplicativo SaaS:

        ## Página de preços
        - Nova rota em /pricing com três cartões de plano:
          - Starter: US$19/mês — 5 projetos, 10GB de armazenamento, suporte por e-mail
          - Pro: US$49/mês — projetos ilimitados, 100GB de armazenamento, suporte prioritário
          - Team: US$99/mês — tudo do Pro + gerenciamento de times, SSO, log de auditoria
        - Cada cartão tem um botão "Subscribe" que inicia o checkout

        ## Checkout
        - POST /api/checkout/sessions — cria uma sessão de Stripe Checkout
          com o ID de preço selecionado, e-mail do cliente e URLs de sucesso/cancelamento
        - Redirecione o usuário para a página de checkout hospedada pela Stripe
        - Em caso de sucesso, redirecione para /checkout/success?session_id={CHECKOUT_SESSION_ID}

        ## Webhook
        - POST /api/webhooks/stripe — recebe eventos da Stripe
        - Trate checkout.session.completed: atualize o plano do usuário e
          subscription_id no banco de dados
        - Verifique a assinatura do webhook usando STRIPE_WEBHOOK_SECRET

        ## Página de sucesso
        - /checkout/success — busque os detalhes da sessão na Stripe,
          exiba o nome do plano, o valor e um botão "Go to Dashboard"

        ## Planejamento
        - Antes de escrever qualquer código, descreva seu plano de implementação e compartilhe
          comigo para aprovação. Liste os arquivos que você vai criar ou modificar,
          as mudanças de banco de dados e a ordem de implementação.

        ## Notas técnicas
        - Siga os padrões em src/pages/settings/billing.tsx para a UI
        - Use Prisma: adicione uma tabela subscriptions (id, user_id, stripe_subscription_id,
          plan, status, current_period_end)
        - STRIPE_SECRET_KEY e STRIPE_WEBHOOK_SECRET estão disponíveis como variáveis de ambiente

        ## 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 lê sua spec, explora a base de código em busca de padrões correspondentes e depois implementa em toda a stack. Antes de abrir um PR, ele executa seu app localmente e abre seu [navegador integrado](/pt-BR/work-with-devin/devin-session-tools) para verificar se o fluxo de checkout funciona de ponta a ponta.

      Veja como isso fica no exemplo de checkout da Stripe:

      1. **Cria a migration** — Adiciona a tabela `subscriptions` com colunas para `user_id`, `stripe_subscription_id`, `plan`, `status` e `current_period_end`
      2. **Cria a página de preços** — Cria os três cartões de preço em `/pricing`, cada um com um botão "Subscribe" que envia uma requisição para a API de checkout
      3. **Implementa a criação da sessão de checkout** — Cria `POST /api/checkout/sessions`, que gera uma sessão do Stripe Checkout com o ID de preço correto, o e-mail do cliente e as URLs de redirecionamento
      4. **Adiciona o manipulador de webhook** — Implementa `POST /api/webhooks/stripe` com verificação de assinatura, tratamento do evento `checkout.session.completed` e atualizações no banco de dados
      5. **Cria a página de sucesso** — Cria `/checkout/success`, que busca a sessão do Stripe, exibe o nome do plano, o valor cobrado e um link "Go to Dashboard"
      6. **Escreve testes** — Testes para verificação da assinatura do webhook (válida, inválida, ausente), criação da sessão de checkout e lógica de atualização do plano no banco de dados
      7. **Abre o navegador** — Inicia o servidor de desenvolvimento, navega até `/pricing`, clica em "Subscribe" no nível Pro, verifica se o redirecionamento do Stripe Checkout funciona e confere se a página de sucesso é renderizada corretamente após um pagamento de teste
      8. **Abre um PR** — Entrega todas as mudanças com um resumo do que foi implementado e de como tudo foi verificado

      A etapa de verificação no navegador captura problemas que testes de unidade não cobrem — um card de preços que não dispara o checkout, uma URL de redirecionamento que retorna 404 ou uma página de sucesso que falha ao carregar os detalhes da sessão. Se você definiu uma [skill de testes local](/pt-BR/product-guides/skills), Devin segue essas etapas automaticamente para cada funcionalidade que implementa.
    </Step>

    <Step title="Iterate from the PR">
      Once the PR is open, send follow-up prompts in the same session to extend or adjust the checkout flow.

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