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

> Integra la funcionalidad de pago de Dodo Payments en tus proyectos de Framer con nuestro potente plugin. Acepta pagos con experiencias de pago personalizables.

## Descripción general

El plugin de Dodo Payments para Framer integra sin problemas el procesamiento de pagos en tus sitios web de Framer. Crea experiencias de pago personalizables con soporte para entornos de prueba y producción.

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

## Características

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Elige un flujo de página completa o una superposición en línea que se sienta nativa en tu sitio.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Agrega el componente, pega tus claves, publica.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Enlaces de descarga seguros o claves de licencia enviados por correo en el momento en que se confirma el pago.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Adquisición de nivel bancario en seis continentes, métodos locales incluidos.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    IVA, GST, impuestos sobre ventas y recibos gestionados para cada pedido.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Activa un interruptor para vender planes de suscripción para tus productos.
  </Card>
</CardGroup>

## Guía de Configuración

<Steps>
  <Step title="Generate API Key">
    Visita el [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys) y crea una nueva clave de API.

    <Tabs>
      <Tab title="Live Mode">
        Para uso en producción con procesamiento real de pagos.
      </Tab>

      <Tab title="Test Mode">
        Perfecto para desarrollo y pruebas sin cargos reales.
      </Tab>
    </Tabs>

    <Check>
      Copia tu clave de API de forma segura: la necesitarás en el siguiente paso.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Abre el plugin de Dodo Payments en Framer
    2. Ve a la página de Autenticación
    3. Pega tu clave de API
    4. Selecciona el modo adecuado (Test o Live)
    5. Haz clic en **Continue** para autenticarte

    <Warning>
      Mantén tus claves de API seguras y nunca las compartas públicamente.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Después de la autenticación, verás la lista de tus productos:

    * **Productos existentes**: Se muestran automáticamente
    * **Sin productos**: Haz clic en el botón **Más (+)** junto a 'Productos'

    <Info>
      Serás redirigido al Panel de Dodo Payments para crear productos con precios, descripciones y configuraciones.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Selecciona un producto de tu lista disponible
    2. Haz clic en el botón `Add Buy Button`
    3. Se agregará a tu lienzo un botón de compra con el texto `Buy {product_name}`

    <Warning>
      El botón Agregar compra estará deshabilitado si no tienes los permisos adecuados del proyecto.
    </Warning>
  </Step>
</Steps>

## Personalización

<Steps>
  <Step title="Select Checkout Experience">
    Elige la experiencia de pago que prefieras:

    * **Overlay (Embedded)**: El proceso de pago aparece como una superposición dentro de tu proyecto de Framer, manteniendo a los usuarios en tu sitio.
    * **Hosted**: Los usuarios son redirigidos a una página de pago alojada por Dodo Payments para una experiencia simplificada.
  </Step>

  <Step title="Customize Appearance Options">
    Personaliza tu experiencia de pago con los siguientes ajustes de apariencia:

    * **Checkout Theme**: Elige entre temas claro u oscuro para que coincida con la estética de tu marca.
    * **Button Label**: Personaliza el texto (por ejemplo, 'Buy Now', 'Purchase', 'Get Started').
    * **Button Styles**: Ajusta colores, fuentes, tamaños y otras propiedades de estilo.
    * **Return URL**: Establece una página de Framer a la que el usuario regresará después del pago.
  </Step>
</Steps>

## Solución de Problemas

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

    **Solutions**:

    * Verifica que tu clave de API sea correcta
    * Asegúrate de estar usando el modo adecuado (Test/Live)
    * Verifica tu conexión a internet
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problema**: El botón Agregar compra está deshabilitado

    **Solutions**:

    * Verifica que tengas los permisos correctos en tu proyecto de Framer
    * Asegúrate de estar autenticado correctamente
    * Intenta actualizar el plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problema**: Los productos no se muestran

    **Solutions**:

    * Asegúrate de tener productos creados en tu panel de Dodo Payments
    * Comprueba que tu clave de API tenga los permisos correctos
    * Intenta volver a autenticarte
  </Accordion>
</AccordionGroup>