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

Official Plugin

Access the official Dodo Payments plugin on the Framer marketplace.

​
Features

Hosted or Overlay Checkout

Choose a full-page flow or an inline overlay that feels native to your site.

Drag-and-Drop Setup

Add the component, paste your keys, publish.

Instant Digital Delivery

Secure download links or license keys emailed the moment payment clears.

Worldwide Coverage

Bank-level acquiring on six continents, local methods built-in.

Automatic Tax & Invoicing

VAT, GST, sales tax, and receipts handled for every order.

No-Code Subscriptions

Flip a switch to sell subscription plans for your products.

​
Setup Guide

1

Generate API Key

Visit the Dodo Payments Dashboard and create a new API key.
For production use with real payment processing.
Copy your API key securely - you’ll need it for the next step.
2

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
Keep your API keys secure and never share them publicly.
3

Manage Products

After authentication, you’ll see your products list:
  • Existing products: Displayed automatically
  • No products: Click the Plus (+) button next to ‘Products’
You’ll be redirected to the Dodo Payments Dashboard to create products with pricing, descriptions, and settings.
4

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
The Add Buy Button will be disabled if you don’t have the correct project permissions.

​
Customization

1

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

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.

​
Troubleshooting