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

> Integrate Dodo Payments checkout functionality into your Framer projects with our powerful plugin. Accept payments with customizable checkout experiences.

## Overview

The Dodo Payments Framer Plugin seamlessly integrates payment processing into your Framer websites. Create customizable checkout experiences with support for both test and production environments.

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

## Features

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Choose a full-page flow or an inline overlay that feels native to your site.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Add the component, paste your keys, publish.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Secure download links or license keys emailed the moment payment clears.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Bank-level acquiring on six continents, local methods built-in.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    VAT, GST, sales tax, and receipts handled for every order.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Flip a switch to sell subscription plans for your products.
  </Card>
</CardGroup>

## Setup Guide

<Steps>
  <Step title="Generate API Key">
    Visit the [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys) and create a new API key.

    <Tabs>
      <Tab title="Live Mode">
        For production use with real payment processing.
      </Tab>

      <Tab title="Test Mode">
        Perfect for development and testing with no real charges.
      </Tab>
    </Tabs>

    <Check>
      Copy your API key securely - you'll need it for the next step.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Open the Dodo Payments plugin in Framer
    2. Navigate to the Authentication page
    3. Paste your API key
    4. Select the appropriate mode (Test or Live)
    5. Click **Continue** to authenticate

    <Warning>
      Keep your API keys secure and never share them publicly.
    </Warning>
  </Step>

  <Step title="Manage Products">
    After authentication, you'll see your products list:

    * **Existing products**: Displayed automatically
    * **No products**: Click the **Plus (+)** button next to 'Products'

    <Info>
      You'll be redirected to the Dodo Payments Dashboard to create products with pricing, descriptions, and settings.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Select a product from your available list
    2. Click the `Add Buy Button` button
    3. A buy button with the text `Buy {product_name}` will be added to your canvas

    <Warning>
      The Add Buy Button will be disabled if you don't have the correct project permissions.
    </Warning>
  </Step>
</Steps>

## Customization

<Steps>
  <Step title="Select Checkout Experience">
    Choose your preferred checkout experience:

    * **Overlay (Embedded)**: Checkout appears as an overlay within your Framer project, keeping users on your site.
    * **Hosted**: Users are redirected to a Dodo Payments hosted checkout page for a streamlined experience.
  </Step>

  <Step title="Customize Appearance Options">
    Customize your checkout experience with the following appearance settings:

    * **Checkout Theme**: Choose between light or dark themes to match your brand aesthetic.
    * **Button Label**: Customize text (e.g., 'Buy Now', 'Purchase', 'Get Started').
    * **Button Styles**: Adjust colors, fonts, sizes, and other styling properties.
    * **Return URL**: Set a Framer page for the user to return to after checkout.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problem**: Plugin won't authenticate

    **Solutions**:

    * Verify your API key is correct
    * Ensure you're using the right mode (Test/Live)
    * Check your internet connection
  </Accordion>

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

    **Solutions**:

    * Verify you have the correct permissions in your Framer project
    * Ensure you're authenticated properly
    * Try refreshing the plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problem**: Products not showing

    **Solutions**:

    * Make sure you have products created in your Dodo Payments dashboard
    * Check that your API key has the correct permissions
    * Try re-authenticating
  </Accordion>
</AccordionGroup>