Skip to main content

​
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.

Official Plugin

Install the Dodo Payments plugin from the Framer Marketplace.

​
Features

Hosted or Overlay Checkout

Open checkout as an overlay on your page, or send customers to the hosted checkout page.

Drag-and-Drop Setup

Paste your API key into the plugin, add a buy button to the canvas, and publish.

Digital Delivery

Deliver download links or license keys to customers by email after payment.

Worldwide Coverage

Sell to customers in 220+ countries with cards, wallets, and local payment methods.

Automatic Tax & Invoicing

As Merchant of Record, Dodo Payments calculates and remits VAT, GST, and sales tax, and issues an invoice for each payment.

No-Code Subscriptions

Subscription products get the same buy button as one-time products, with no code.

​
Setup Guide

1

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 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:
For production. Customers pay with real payment methods.
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.
2

Authenticate Plugin

Keep your API key secret. Never share it or publish it.
  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.
3

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.
The Plus (+) button opens the Dodo Payments dashboard, where you create a product and set its price, description, and other settings.
4

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.
Add Buy Button is disabled if you don’t have permission to add components and change their properties in the Framer project.

​
Customization

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

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.
2

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.

​
Troubleshooting

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.
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.
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.
Last modified on September 26, 2026