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

Quick Setup

Get started with the plugin in under 5 minutes with our step-by-step guide.

Customization

Learn how to customize checkout themes, button styles, and user experience.

​
Features

Flexible Checkout

Choose between embedded overlay or hosted checkout pages

Theme Support

Light and dark themes for seamless brand integration

Environment Support

Test and Live payment modes for development and production

Product Management

Direct integration with your Dodo Payments product catalog

​
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