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

> Añade botones de compra de Dodo Payments a tu sitio de Framer con el plugin oficial. Vende productos de pago único y de suscripción con un checkout superpuesto o alojado.

## Descripción general

El plugin de Dodo Payments para Framer añade botones de compra para tus productos de Dodo Payments a un sitio de Framer. Cada botón abre el checkout como una superposición en tu página o envía al cliente a la página de checkout alojada, en modo de prueba o modo activo.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Instala el plugin de Dodo Payments desde Framer Marketplace.
</Card>

## Características

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Abre el checkout como una superposición en tu página o envía a los clientes a la página de checkout alojada.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Pega tu API key en el plugin, añade un botón de compra al canvas y publica.
  </Card>

  <Card title="Digital Delivery" icon="envelope">
    Envía enlaces de descarga o claves de licencia a los clientes por correo electrónico después del pago.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Vende a clientes en más de 220 países con tarjetas, wallets y métodos de pago locales.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    Como Merchant of Record, Dodo Payments calcula y remite el IVA, el GST y el impuesto sobre las ventas, y emite una factura por cada pago.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Los productos de suscripción obtienen el mismo botón de compra que los productos de pago único, sin necesidad de código.
  </Card>
</CardGroup>

## Guía de Configuración

<Steps>
  <Step title="Generate API Key">
    En el dashboard de Dodo Payments, ve a **Developer → API Keys** y haz clic en **Add API Key**. También puedes abrir directamente la [página API Keys](https://app.dodopayments.com/developer/api-keys).

    Una API key funciona en un solo modo. Antes de crearla, usa el interruptor **Live Mode** de la barra lateral para elegir el modo:

    <Tabs>
      <Tab title="Live Mode">
        Para producción. Los clientes pagan con métodos de pago reales.
      </Tab>

      <Tab title="Test Mode">
        Para desarrollo y pruebas. No se realizan cargos reales.
      </Tab>
    </Tabs>

    <Check>
      Copia la API key y guárdala de forma segura. El dashboard solo la muestra una vez y la pegarás en el plugin en el siguiente paso.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    <Warning>
      Mantén tu API key en secreto. Nunca la compartas ni la publiques.
    </Warning>

    1. Abre el plugin de Dodo Payments en Framer. Se abre en la página **Authenticate**.
    2. En **API Mode**, selecciona **Test Mode** o **Live Mode** para que coincida con tu API key.
    3. Pega tu API key en **API Key**.
    4. Haz clic en **Continue**.
  </Step>

  <Step title="Manage Products">
    Después de autenticarte, el plugin muestra los productos del modo que seleccionaste en **Products**:

    * **Existing products** aparecen automáticamente, cada uno marcado como **One-time** o **Subscription**.
    * **No products yet**: haz clic en el botón **Plus (+)** junto a **Products**.

    <Info>
      El botón **Plus (+)** abre el dashboard de Dodo Payments, donde puedes crear un producto y establecer su precio, descripción y otras opciones.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Selecciona un producto de la lista.
    2. Haz clic en **Add Buy Button**.

    El plugin añade a tu canvas un botón de compra con la etiqueta `Buy {product_name}`. En la misma pantalla del producto, **Edit** abre el producto en el dashboard de Dodo Payments y **Show Preview** abre su vista previa del checkout.

    <Warning>
      **Add Buy Button** está desactivado si no tienes permiso para añadir componentes y cambiar sus propiedades en el proyecto de Framer.
    </Warning>
  </Step>
</Steps>

## Personalización

Para cambiar cómo funciona un botón de compra, selecciónalo en el canvas y edita sus propiedades en Framer.

<Steps>
  <Step title="Select Checkout Experience">
    Configura **Type** para elegir cómo se abre el checkout:

    * **Overlay**: el checkout se abre como una superposición en tu página de Framer, de modo que los clientes permanecen en tu sitio. El plugin usa este tipo para los botones nuevos.
    * **Hosted**: el botón enlaza a la página de checkout alojada de Dodo Payments. **Link Target** establece si la página se abre en una pestaña nueva o en la misma pestaña.
  </Step>

  <Step title="Customize Appearance Options">
    Adapta el botón y el checkout a tu sitio con estas propiedades:

    * **Checkout Theme**: un checkout claro u oscuro.
    * **Label**: el texto del botón, como "Buy Now", "Purchase" o "Get Started".
    * Estilo del botón: el color de fondo, el color del texto, la fuente, el tamaño de fuente, el radio del borde y el relleno.
    * **Return URL**: la página de Framer o URL a la que regresan los clientes después del checkout.
    * **Environment**: **Live** o **Test**. El plugin lo establece según el modo con el que te autenticasti.
  </Step>
</Steps>

## Solución de problemas

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problema**: el plugin no se autentica.

    **Soluciones**:

    * Comprueba que hayas pegado la API key completa.
    * Comprueba que **API Mode** coincida con el modo en el que se creó la clave. Una clave del modo de prueba no funciona en el modo activo, y una clave del modo activo no funciona en el modo de prueba.
    * Comprueba tu conexión a Internet.
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problema**: **Add Buy Button** está desactivado.

    **Soluciones**:

    * Comprueba que tu rol en el proyecto de Framer te permita añadir componentes y cambiar sus propiedades.
    * Comprueba que el plugin esté autenticado.
    * Cierra y vuelve a abrir el plugin.
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problema**: los productos no aparecen en el plugin.

    **Soluciones**:

    * Comprueba que hayas creado productos en tu dashboard de Dodo Payments.
    * Comprueba que los productos existan en el mismo modo que tu API key. El plugin solo muestra los productos del modo con el que te autenticasti.
    * Vuelve a autenticar el plugin.
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.