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

> Add Dodo Payments buy buttons to your Framer site with the official plugin. Sell one-time and subscription products with overlay or hosted checkout.

## Overview

The Dodo Payments Framer plugin adds buy buttons for your Dodo Payments products to a Framer site. Each button opens checkout as an overlay on your page or sends the customer to the hosted checkout page, in test mode or live mode.

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

## Features

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Open checkout as an overlay on your page, or send customers to the hosted checkout page.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Paste your API key into the plugin, add a buy button to the canvas, and publish.
  </Card>

  <Card title="Digital Delivery" icon="envelope">
    Deliver download links or license keys to customers by email after payment.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Sell to customers in 220+ countries with cards, wallets, and local payment methods.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    As Merchant of Record, Dodo Payments calculates and remits VAT, GST, and sales tax, and issues an invoice for each payment.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Subscription products get the same buy button as one-time products, with no code.
  </Card>
</CardGroup>

## Setup Guide

<Steps>
  <Step title="Generate API Key">
    In the Dodo Payments dashboard, go to **Developer → API Keys** and click **Add API Key**. You can also open the [API Keys page](https://app.dodopayments.com/developer/api-keys) directly.

    An API key works in one mode only. Before you create the key, use the **Live Mode** switch in the sidebar to choose the mode:

    <Tabs>
      <Tab title="Live Mode">
        For production. Customers pay with real payment methods.
      </Tab>

      <Tab title="Test Mode">
        For development and testing. No real charges are made.
      </Tab>
    </Tabs>

    <Check>
      Copy the API key and store it securely. The dashboard shows it only once, and you paste it into the plugin in the next step.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    <Warning>
      Keep your API key secret. Never share it or publish it.
    </Warning>

    1. Open the Dodo Payments plugin in Framer. It opens on the **Authenticate** page.
    2. Under **API Mode**, select **Test Mode** or **Live Mode** to match your API key.
    3. Paste your API key into **API Key**.
    4. Click **Continue**.
  </Step>

  <Step title="Manage Products">
    After you authenticate, the plugin lists the products from the mode you selected under **Products**:

    * **Existing products** appear automatically, each marked **One-time** or **Subscription**.
    * **No products yet**: click the **Plus (+)** button next to **Products**.

    <Info>
      The **Plus (+)** button opens the Dodo Payments dashboard, where you create a product and set its price, description, and other settings.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Select a product from the list.
    2. Click **Add Buy Button**.

    The plugin adds a buy button with the label `Buy {product_name}` to your canvas. On the same product screen, **Edit** opens the product in the Dodo Payments dashboard, and **Show Preview** opens its checkout preview.

    <Warning>
      **Add Buy Button** is disabled if you don't have permission to add components and change their properties in the Framer project.
    </Warning>
  </Step>
</Steps>

## Customization

To change how a buy button works, select it on the canvas and edit its properties in Framer.

<Steps>
  <Step title="Select Checkout Experience">
    Set **Type** to choose how checkout opens:

    * **Overlay**: Checkout opens as an overlay on your Framer page, so customers stay on your site. The plugin uses this type for new buttons.
    * **Hosted**: The button links to the Dodo Payments hosted checkout page. **Link Target** sets whether the page opens in a new tab or the same tab.
  </Step>

  <Step title="Customize Appearance Options">
    Match the button and checkout to your site with these properties:

    * **Checkout Theme**: A light or dark checkout.
    * **Label**: The button text, such as "Buy Now", "Purchase", or "Get Started".
    * Button styling: The background color, text color, font, font size, border radius, and padding.
    * **Return URL**: The Framer page or URL that customers return to after checkout.
    * **Environment**: **Live** or **Test**. The plugin sets it to the mode you authenticated with.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problem**: The plugin doesn't authenticate.

    **Solutions**:

    * Check that you pasted the complete API key.
    * Check that **API Mode** matches the mode the key was created in. A test mode key doesn't work in live mode, and a live mode key doesn't work in test mode.
    * Check your internet connection.
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problem**: **Add Buy Button** is disabled.

    **Solutions**:

    * Check that your role in the Framer project lets you add components and change their properties.
    * Check that the plugin is authenticated.
    * Close and reopen the plugin.
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problem**: Products don't appear in the plugin.

    **Solutions**:

    * Check that you created products in your Dodo Payments dashboard.
    * Check that the products exist in the same mode as your API key. The plugin lists only the products from the mode you authenticated with.
    * Authenticate the plugin again.
  </Accordion>
</AccordionGroup>


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