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

# Aceite pagamentos com o Stripe

> Aceite pagamentos com o connector Stripe do Replit ou com suas próprias chaves do Stripe. Escolha uma configuração, teste o checkout e configure pagamentos ao vivo.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Aceite pagamentos no seu app com o connector Stripe do Replit ou com suas próprias chaves de API do Stripe.
Escolha o connector para uma configuração de sandbox gerenciada, ou use suas próprias chaves quando precisar de controle sobre a integração.

## Escolha um método por ambiente

| Método | Configuração | Onde fica |
| - | - | - |
| [Connector Stripe do Replit](#connector-stripe-do-replit) | O Agent configura um sandbox do Stripe e depois você conecta sua conta ao vivo. Disponível em planos pagos. | **Integrations > Stripe** |
| [Suas próprias chaves do Stripe](#suas-próprias-chaves-do-stripe) | Você gerencia as chaves de API, o SDK do Stripe e os endpoints de webhook por conta própria. | **Secrets** |

Use um método em cada ambiente, não os dois ao mesmo tempo. Combiná-los no mesmo ambiente causa conflitos de conexão.
Você pode usar métodos diferentes em ambientes diferentes, como o sandbox do connector em desenvolvimento e suas próprias chaves ao vivo em produção.

## Ideal para

* Fundadores que gerenciam reservas, aluguéis ou agendamentos e precisam de depósitos que protejam seu tempo.
* Desenvolvedores que querem pagamentos funcionando em um sandbox hoje e pagamentos ao vivo sem uma configuração manual de chaves.
* Equipes com uma conta Stripe existente ou requisitos que exigem uma integração de SDK e webhook gerenciada manualmente.

## Connector Stripe do Replit

Use este método para cobrar um depósito reembolsável na reserva e cobrar o saldo depois, sem colar chaves de API.

### Connectors

<Connectors
  items={[
{
  id: "stripe",
  name: "Stripe",
  why: "Checkout em sandbox, formas de pagamento salvas, reembolsos e a conexão com a conta ao vivo",
},
]}
/>

### Antes de começar

Comece a partir de um App com backend, login e banco de dados, para que cada reserva possa armazenar seu status de
pagamento. Depois escolha os valores:

* **Depósito na reserva:** um valor fixo, como US\$ 500, ou uma porcentagem do total.
* **Saldo depois:** o restante do preço, cobrado no cartão salvo quando o cliente chegar.
* **Janela de reembolso:** até quando um cliente pode cancelar e ainda receber o depósito de volta. 48 horas é um padrão comum.

### Peça ao Agent

<AiPrompt>
  Adicione pagamentos de depósito e saldo a este app com o connector Stripe do Replit, começando no
  sandbox do Stripe. Na reserva, cobre um depósito reembolsável de \[US\$ 500] e salve a forma de
  pagamento do cliente. Quando o cliente chegar, cobre o saldo restante na forma de pagamento salva.
  Se o cliente cancelar mais de \[48 horas] antes da reserva, reembolse o depósito integralmente.
  Dentro dessa janela, fique com ele. Salve o status do depósito e a referência do cartão salvo em
  cada reserva. Me dê um checklist de teste para sucesso do depósito, recusa do depósito, cobrança
  do saldo e reembolso por cancelamento.
</AiPrompt>

O Agent propõe o connector do Stripe e configura um sandbox do Stripe para você. Você não precisa copiar
chaves do Stripe Dashboard.

### O que esperar

O Agent adiciona o checkout, os fluxos de depósito e saldo e a regra de reembolso. Teste-os no Preview com
o cartão de teste do Stripe `4242 4242 4242 4242`, qualquer validade futura e qualquer CVC de 3 dígitos:

1. Faça uma reserva e pague o depósito. Confirme que a reserva mostra o depósito como pago e um cartão salvo.
2. Cobre o saldo a partir da reserva. Confirme que ele aparece como pago.
3. Cancele uma segunda reserva fora da janela de reembolso. Confirme o reembolso no painel do sandbox do Stripe.
4. Cancele uma terceira reserva dentro da janela. Confirme que o app mantém o depósito e explica o motivo.
5. Pague com o cartão de teste de recusa do Stripe `4000 0000 0000 0002`. Confirme que a reserva não é confirmada.

Quando os fluxos funcionarem, conecte sua conta Stripe ao vivo a partir do painel **Publish**. Siga
[Vá para produção](/pt/features/monetization/stripe-payments#vá-para-produção) na página Stripe Payments e depois faça uma
reserva real de baixo custo com seu próprio cartão antes de compartilhar o app.

### Adapte ao seu caso

<AiPrompt>
  Mude para um pagamento integral na reserva em vez de depósito e saldo.
</AiPrompt>

<AiPrompt>
  Envie ao cliente um recibo por e-mail após o depósito e após a cobrança do saldo.
</AiPrompt>

### Solução de problemas

* **O depósito é aprovado, mas a reserva não é confirmada:** peça ao Agent para conectar o evento de sucesso de pagamento do Stripe ao status da reserva no banco de dados e teste outra reserva.
* **O Agent pede para você colar chaves do Stripe ou configurar um webhook:** diga ao Agent para usar o connector Stripe do Replit. Misturar o connector e suas próprias chaves no mesmo ambiente causa conflitos.
* **A publicação pede para conectar uma conta Stripe ao vivo:** o sandbox só aceita pagamentos de teste. Conecte sua conta ao vivo a partir do painel **Publish**, como descrito em [Vá para produção](/pt/features/monetization/stripe-payments#vá-para-produção).
* **Você precisa de assinaturas para um app mobile:** use as [assinaturas do RevenueCat](/pt/features/monetization/revenuecat-subscriptions).

## Suas próprias chaves do Stripe

Conecte o Stripe por conta própria: armazene suas próprias chaves de API em Secrets, receba pagamentos com o SDK do Stripe e
receba eventos de pagamento por meio de um webhook. Use este caminho quando você já gerencia uma conta Stripe
e quer controle total sobre a configuração.

<Warning>
  Esta é uma configuração manual. Você cria e rotaciona as chaves, registra o webhook e mantém a
  integração funcionando. O Replit não a gerencia. Para uma configuração sem chaves de API, use o
  [connector Stripe do Replit](/pt/use-cases/accept-payments-with-stripe#connector-stripe-do-replit).
</Warning>

### Antes de começar com suas próprias chaves

Copie suas chaves de API de teste do Stripe Dashboard e adicione-as aos **Secrets** do seu app.
Adicione o segredo de assinatura do webhook mais tarde, quando iniciar o listener descrito abaixo.

| Secret | Valor |
| - | - |
| `STRIPE_SECRET_KEY` | Sua chave secreta (`sk_...`) ou chave restrita (`rk_...`). Este nome exato é obrigatório. |
| `STRIPE_PUBLISHABLE_KEY` | Sua chave publicável (`pk_...`), usada no navegador. |
| `STRIPE_WEBHOOK_SECRET` | O segredo de assinatura (`whsec_...`) do seu listener de desenvolvimento, ou do seu endpoint de webhook ao vivo em produção. |

Mantenha as chaves de teste em desenvolvimento. Configure as chaves ao vivo separadamente nos secrets do seu app publicado.

Para adicionar uma chave, selecione **Tools** no Project Editor e depois **Secrets** em **Setup**.
Selecione **New Secret**, digite o nome exato em **Key**, digite sua chave do Stripe em **Value** e selecione **Add Secret**.

<Frame caption="Digite o nome exato do secret em Key. O exemplo deixa Value vazio; digite sua própria chave ali.">
  <img src="https://mintcdn.com/replit/2n-A_ptJoYn-gb3a/images/stripe/secret-name-context.png?fit=max&auto=format&n=2n-A_ptJoYn-gb3a&q=85&s=1133c28885534c63747df325de6ba576" alt="Project Editor com Secrets selecionado em Setup e o formulário de novo secret destacado, mostrando STRIPE_SECRET_KEY em Key e um campo Value vazio" width="2720" height="2040" data-path="images/stripe/secret-name-context.png" />
</Frame>

Depois de concluir a configuração do webhook abaixo, sua lista de Secrets contém os três nomes com seus valores ocultos:

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-payments/stripe-secrets.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=80f25ad62982cb96274ab45692f7baff" alt="Painel de Secrets do Replit mostrando os secrets STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY e STRIPE_WEBHOOK_SECRET" width="1280" height="720" data-path="images/velocity/add-payments/stripe-secrets.png" />
</Frame>

### Peça ao Agent a configuração manual

<AiPrompt>
  Adicione o Stripe Checkout a este app com o SDK do Stripe e minhas próprias chaves. Não use o
  connector Stripe do Replit. Leia a chave secreta de STRIPE\_SECRET\_KEY e a chave publicável de
  STRIPE\_PUBLISHABLE\_KEY. Adicione um endpoint de webhook que verifique as assinaturas do Stripe com
  STRIPE\_WEBHOOK\_SECRET e marque os pedidos como pagos em checkout.session.completed. Me diga o
  caminho do endpoint a registrar no Stripe e me dê um checklist de teste.
</AiPrompt>

### Teste a integração manual

O Agent adiciona o checkout e um endpoint de webhook. Para desenvolvimento, siga o
[guia rápido de webhooks](https://docs.stripe.com/webhooks/quickstart) do Stripe para instalar e autenticar a
Stripe CLI no Shell do seu projeto. Peça ao Agent a porta local do seu servidor e o caminho do webhook.

Execute o listener nesse mesmo ambiente, substituindo a porta e o caminho de exemplo pelos valores do seu app:

```sh theme={null}
stripe listen --forward-to localhost:4242/webhook
```

Salve o segredo de assinatura exibido por `stripe listen` como `STRIPE_WEBHOOK_SECRET` nos Secrets de
desenvolvimento e depois reinicie seu app para que ele leia o valor. Mantenha o app e o listener em execução
enquanto testa no Preview. O listener encaminha eventos de teste para o servidor de desenvolvimento, então você
ainda não precisa de uma URL publicada nem de um endpoint de webhook público de desenvolvimento.

Assista ao passo a passo para ver a configuração completa:

<YouTubeEmbed videoId="TW8xaPERcRU" title="Stripe Checkout no Replit" />

Teste com o cartão de teste do Stripe `4242 4242 4242 4242`, qualquer validade futura e qualquer CVC de 3 dígitos.
Confirme que o pedido aparece como pago no seu app e que a Stripe CLI relata uma resposta bem-sucedida
do seu endpoint de webhook.

### Publique com suas próprias chaves ao vivo

Mantenha inalteradas suas chaves de teste de desenvolvimento e o segredo do listener. Em **Publishing > Adjust settings >
Production app secrets**, defina `STRIPE_SECRET_KEY` e `STRIPE_PUBLISHABLE_KEY` com suas chaves ao vivo.
Veja [Gerencie secrets de produção](/pt/core-concepts/project-editor/app-setup/secrets#gerenciar-secrets-de-produção).

Registre um endpoint de webhook separado em modo ao vivo no Stripe usando a URL do seu app publicado mais o caminho do
webhook. Defina `STRIPE_WEBHOOK_SECRET` em **Production app secrets** com o segredo de assinatura desse endpoint,
não com o do listener da CLI, e depois publique ou publique novamente.
Se esta for sua primeira publicação, estabeleça primeiro a URL publicada, depois conclua a configuração do endpoint e do
secret e publique novamente antes de aceitar pagamentos.

Se o desenvolvimento usa o sandbox do connector Stripe do Replit e a produção usa suas próprias chaves,
a publicação verifica `STRIPE_SECRET_KEY`:

* Ela deve conter uma chave secreta ao vivo (`sk_live_...`) ou uma chave restrita ao vivo (`rk_live_...`). Chaves de teste, chaves publicáveis e chaves armazenadas com outros nomes não contam.
* Sem uma chave ao vivo válida, a publicação é interrompida com **Connect a live Stripe account before publishing.**
* Produtos e preços não são sincronizados do sandbox para sua conta ao vivo. Crie-os você mesmo na sua conta Stripe ao vivo.

### Personalize a integração manual

<AiPrompt>
  Trate reembolsos e pagamentos com falha pelo webhook e mostre o status em cada pedido.
</AiPrompt>

<AiPrompt>
  Adicione uma assinatura mensal com o Stripe Billing, usando as mesmas chaves e o mesmo webhook.
</AiPrompt>

### Solução de problemas da integração manual

* **A publicação diz "Connect a live Stripe account before publishing":** verifique se o secret se chama exatamente `STRIPE_SECRET_KEY` e contém uma chave ao vivo que começa com `sk_live_` ou `rk_live_`.
* **Eventos de webhook falham nas verificações de assinatura:** certifique-se de que `STRIPE_WEBHOOK_SECRET` corresponde ao segredo de assinatura do endpoint e de que você usa o segredo do modo ao vivo em produção.
* **O connector e suas próprias chaves estão ambos configurados em um ambiente:** remova um deles. Para remover o connector, veja [Atualizar ou remover a conexão do Stripe](/pt/features/monetization/stripe-payments#atualizar-ou-remover-a-conexão-do-stripe).

## Relacionado

<CardGroup cols={2}>
  <Card title="Ajuda sobre pagamentos e Stripe" href="/pt/help/payments-and-stripe">
    Respostas sobre métodos de configuração, nomes de secrets obrigatórios e erros de publicação.
  </Card>

  <Card title="Stripe Payments" href="/pt/features/monetization/stripe-payments">
    Como o connector do Stripe funciona, do sandbox à conta ao vivo.
  </Card>
</CardGroup>