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

# Framer Plugin

> Integre a funcionalidade de checkout do Dodo Payments em seus projetos Framer com nosso poderoso plugin. Aceite pagamentos com experiências de checkout personalizáveis.

## Visão Geral

O Plugin Framer do Dodo Payments integra perfeitamente o processamento de pagamentos em seus sites Framer. Crie experiências de checkout personalizáveis com suporte para ambientes de teste e produção.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Acesse o plugin oficial da Dodo Payments no marketplace do Framer.
</Card>

## Recursos

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Escolha um fluxo em página inteira ou uma sobreposição inline que pareça nativo ao seu site.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Adicione o componente, cole suas chaves, publique.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Links de download ou chaves de licença seguros são enviados por e-mail assim que o pagamento é aprovado.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Adquirência em nível bancário em seis continentes, métodos locais integrados.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    IVA, GST, imposto sobre vendas e recibos são tratados para cada pedido.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Ative um interruptor para vender planos de assinatura dos seus produtos.
  </Card>
</CardGroup>

## Guia de Configuração

<Steps>
  <Step title="Generate API Key">
    Visite o [Painel do Dodo Payments](https://app.dodopayments.com/developer/api-keys) e crie uma nova chave de API.

    <Tabs>
      <Tab title="Live Mode">
        Para uso em produção com processamento de pagamento real.
      </Tab>

      <Tab title="Test Mode">
        Perfeito para desenvolvimento e testes sem cobranças reais.
      </Tab>
    </Tabs>

    <Check>
      Copie sua chave de API com segurança — você precisará dela no próximo passo.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Abra o plugin Dodo Payments no Framer
    2. Navegue até a página de Autenticação
    3. Cole sua chave de API
    4. Selecione o modo apropriado (Teste ou Produção)
    5. Clique em **Continuar** para autenticar

    <Warning>
      Mantenha suas chaves de API seguras e nunca as compartilhe publicamente.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Após a autenticação, você verá sua lista de produtos:

    * **Produtos existentes**: Exibidos automaticamente
    * **Sem produtos**: Clique no botão **Mais (+)** ao lado de 'Produtos'

    <Info>
      Você será redirecionado ao Painel do Dodo Payments para criar produtos com preços, descrições e configurações.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Selecione um produto da sua lista disponível
    2. Clique no botão `Add Buy Button`
    3. Um botão de compra com o texto `Buy {product_name}` será adicionado à sua tela

    <Warning>
      O botão Adicionar Compra ficará desativado se você não tiver as permissões corretas no projeto.
    </Warning>
  </Step>
</Steps>

## Personalização

<Steps>
  <Step title="Select Checkout Experience">
    Escolha sua experiência de checkout preferida:

    * **Sobreposição (Embutido)**: O checkout aparece como uma sobreposição dentro do seu projeto Framer, mantendo os usuários no seu site.
    * **Hospedado**: Os usuários são redirecionados para uma página de checkout hospedada pelo Dodo Payments para uma experiência simplificada.
  </Step>

  <Step title="Customize Appearance Options">
    Personalize sua experiência de checkout com as seguintes configurações de aparência:

    * **Tema do Checkout**: Escolha entre temas claro ou escuro para combinar com a estética da sua marca.
    * **Rótulo do Botão**: Personalize o texto (por exemplo, 'Compre agora', 'Adquirir', 'Começar').
    * **Estilos do Botão**: Ajuste cores, fontes, tamanhos e outras propriedades de estilo.
    * **URL de Retorno**: Defina uma página do Framer para o usuário retornar após o checkout.
  </Step>
</Steps>

## Solução de Problemas

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problema**: O plugin não autentica

    **Soluções**:

    * Verifique se sua chave de API está correta
    * Certifique-se de que você está usando o modo certo (Teste/Produção)
    * Verifique sua conexão com a internet
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problema**: O botão Adicionar Compra está desativado

    **Soluções**:

    * Verifique se você tem as permissões corretas no seu projeto Framer
    * Garanta que você está autenticado corretamente
    * Tente atualizar o plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problema**: Os produtos não aparecem

    **Soluções**:

    * Certifique-se de que você tem produtos criados no painel do Dodo Payments
    * Verifique se sua chave de API tem as permissões corretas
    * Tente reautenticar
  </Accordion>
</AccordionGroup>