DEV Community

Cover image for How to Add Payment Buttons & Pricing Tables to Your Framer Website (No Code Required!)
Heet
Heet

Posted on

How to Add Payment Buttons & Pricing Tables to Your Framer Website (No Code Required!)

#framer #plugin #saas #nocode

Building a website is exciting, but when it comes to accepting payments, things can get complicated fast. Stripe integration? Payment forms? Subscription logic? It's enough to make anyone's head spin.

What if I told you there's a way to add beautiful, fully-functional payment buttons and pricing tables to your Framer website in under 15 minutes—without writing a single line of code?

Creem for Framer: a plugin that transforms payment integration from a developer nightmare into a designer's dream.

What You'll Build Today

By the end of this tutorial, you'll have:

✅ Professional checkout buttons with 7 different styles (gradient, shimmer, ghost, and more)

✅ Complete pricing tables with monthly/yearly toggles—perfect for SaaS products

✅ Fully responsive designs that look great on mobile, tablet, and desktop

✅ Real payment processing powered by Creem's secure checkout

Time needed: 10-15 minutes

Skill level: Complete beginner (seriously, if you can click buttons, you can do this)

Cost: Free to start (Creem offers test mode for development)

Prerequisites: What You Need Before Starting

Before we dive in, make sure you have:

  1. A Framer account → Sign up free at framer.com
  2. A Creem account → Get started at creem.io
  3. The Creem plugin installed → We'll cover installation in Step 2 below

💡 Note: This plugin isn't publicly available in the Framer marketplace yet, but you can install it manually from GitHub (instructions below). It takes 2 minutes!

Installation: Get the Plugin Running

Since the plugin is currently in development and not yet published to the Framer marketplace, you'll need to install it manually. Don't worry—it's easier than it sounds!

Option 1: Clone from GitHub (Recommended) 

# Clone the repository
git clone <https://github.com/Heet-Bhalodiya/creem-framer-plugin.git>

# Navigate to the project folder
cd creem-framer-plugin

# Install dependencies
pnpm install
# or: npm install

# Build the plugin
pnpm build
# or: npm run build
Enter fullscreen mode Exit fullscreen mode

Option 2: Download ZIP

  1. Visit the GitHub repository: https://github.com/Heet-Bhalodiya/creem-framer-plugin
  2. Click the green Code button → Download ZIP
  3. Extract the ZIP file
  4. Open a terminal in the extracted folder
  5. Run pnpm install then pnpm build

Load the Plugin in Framer

Once built, load it as a development plugin:

  1. In the terminal, run npm run dev or pnpm dev (keep this running!)
  2. Open Framer Desktop App and go to your project
  3. Open Framer menu (top-left) → Preferences → Plugins
  4. Enable Developer Tools
  5. Click the Plugins icon in the toolbar (top-right)
  6. Click Open Development Plugin
  7. The plugin opens and connects to your local dev server!

Open Creem Plugin

Part 1: Setting Up Your Creem Account & Products

Before we can accept payments, we need products to sell! Let's set those up in Creem.

Create Your Products (The Right Way!)

Here's where most people make a mistake when building SaaS products. Let me save you some headaches:

  1. Log into creem.io and navigate to Products
  2. Click + Create Product

Now here's the important part:

🎯 If You're Building a SaaS with Monthly & Yearly Plans

Create TWO separate products for each tier:

Example: "Pro Plan"

  • Product 1: Pro Plan - Monthly → Price: $29/month
  • Product 2: Pro Plan - Yearly → Price: $290/year (save $58!)

Why? The plugin automatically detects matching products and creates a billing toggle. When users switch between "Monthly" and "Yearly," it seamlessly switches products behind the scenes.

📦 Product Setup Checklist

For each product, fill in:

  • ✅ Name: Clear tier name (e.g., "Pro Plan - Monthly")
  • ✅ Price: Enter amount (e.g., 29.00)
  • ✅ Currency: USD, EUR, GBP, etc.
  • ✅ Type:
    • Choose Recurring for subscriptions
    • Choose One-time for courses, templates, etc.
  • ✅ Billing Period (for subscriptions): Monthly or Yearly

Creating Product - Creem Dashboard

Get Your API Key (Keep This Secret!)

Your API key is like a password that connects Framer to your Creem account.

  1. In Creem dashboard, click Developers → API & Webhooks
  2. You may visit the https://www.creem.io/dashboard/developers page directly
  3. Click Create API Key if you don't have one already

API-Keys

⚠️ Security Warning: Never commit API keys to GitHub or share them publicly. Treat them like passwords!

Part 2: Connect the Plugin to Your Framer Project

Now that we have products and an API key, let's connect everything.

Load Your Products into Framer

  1. Open your Framer project (create a new one if needed)
  2. Click Plugins icon in the left toolbar (looks like a puzzle piece 🧩)
  3. Find the Creem plugin (you installed it earlier)
  4. Click to open it

You'll see a setup screen. Here's what to do:

  1. Paste your Test Mode Key into the API Key field
  2. Toggle Test Mode to ON
  3. Click Save & Continue

Creem Plugin Framer Setup

The plugin fetches all your products from Creem instantly! 🎉

If you see your products listed, you're connected. If not, double-check:

  • API key is copied correctly (no extra spaces)
  • Test Mode is enabled
  • You have at least one product created in Creem

Part 3: Create Your First Payment Button

Let's add a beautiful "Buy Now" button that actually works.

Configure Your Button

In the plugin interface:

  1. Make sure the Button tab is selected (top of plugin)
  2. Select a Product from the dropdown (you'll see all your Creem products)
  3. Button Text: Type what you want (e.g., "Get Started," "Buy Now," "Subscribe")
  4. Checkout Type: Choose how checkout opens:
    • Embed → Opens in a popup/modal (smooth, keeps users on your site)
    • New Tab → Opens checkout in a new browser tab (traditional)
  5. Accent Color: Pick a color that matches your brand
  6. Click Insert Button
  7. Click anywhere on your Framer canvas to place the button

Creem Framer Button Configuration Panel

Customize the Button Style

This is where it gets fun. Select your button on the canvas, then look at Framer's right sidebar (properties panel).

You'll find Customization options:

Variant Styles (7 options):

  • Default → Solid fill, clean and professional
  • Outline → Border only, minimal and modern
  • Ghost → Subtle hover effect, great for secondary CTAs
  • Gradient → Eye-catching gradient animation
  • Shadow → Elevated with depth
  • Shimmer → Animated shine effect (attention-grabbing!)
  • Icon Slide → Arrow icon slides in on hover

Framer Properties Panel for Buttons

Colors:

  • Background color
  • Text color
  • Border color
  • Each has hover states too!

Sizing:

  • Font size (12px - 24px)
  • Padding X & Y (adjust button size)
  • Border radius (0 = sharp, 999 = pill shape)
  • Full Width toggle (stretch to container width)

Play around until it matches your design perfectly!

Test Your Button (The Fun Part!)

Before going live, let's make sure everything works:

  1. Click the Preview button (▶️ play icon) in Framer's top-right corner
  2. Click your payment button
  3. Creem's checkout should pop up (if using Embed) or open in new tab

Creem Framer - Preview Mode with Checkout Popup

Use Creem's test card to complete a fake purchase:

Card Number: 4242 4242 4242 4242
Expiry: Any future date (e.g., 12/28)
CVC: Any 3 digits (e.g., 123)
Enter fullscreen mode Exit fullscreen mode

If the checkout opens and processes successfully, congratulations! Your button works. 🎊

⚠️ Important: Buttons won't work in Framer's edit mode (only in Preview). This prevents accidental clicks while designing.

Part 4: Build a Complete Pricing Table

Buttons are great for single products, but what if you're building a SaaS with multiple tiers? That's where pricing tables shine.

Select Your Products & Configure

  1. Click the Pricing Table tab in the plugin
  2. Product Type: Choose one:
    • Subscription → For SaaS, memberships (shows monthly/yearly toggle)
    • One-time → For courses, templates, digital products
  3. Select 1-5 products by checking the boxes
    • For SaaS: Check your monthly/yearly pairs (e.g., "Pro - Monthly" and "Pro - Yearly")
  4. Reorder tiers using the ↑↓ arrows
    • Put your most popular plan in the middle (psychology trick!)
  5. Set your Accent Color (used for highlights and CTAs)
  6. Click Insert Pricing Table
  7. Click on canvas to place it

Pricing Selection - Creem Framer Plugin

🎯 Psychology Tip: The middle tier gets 3-4x more conversions than others. Make it your best value and mark it as "Most Popular"!

Customize Every Detail (40+ Options!)

Select your pricing table and explore the properties panel. You'll be amazed at how much control you have.

General Settings

  • Show Billing Toggle: Display monthly/yearly switcher (auto-shows for subscriptions)
  • Toggle Style: Choose "Pill" (rounded) or "Segmented" (iOS-style)
  • Checkout Type: Embed popup or New Tab
  • Layout: Cards automatically resize and wrap on mobile (fully responsive!)

Colors (10+ Options!)

  • Page background color
  • Card background & borders
  • Text colors (tier names, descriptions, prices, features)
  • Button colors (background, text, hover states)
  • Toggle colors (background, active state)

Pricing Colors

Typography

  • Tier name font size
  • Price font size
  • Feature list font size
  • Button text size

Spacing & Layout

  • Card padding (internal space)
  • Card border radius (rounded corners)
  • Container padding (outer margins)
  • Gap between cards
  • Max container width (for large screens)

Responsive Table

The best part? The table is fully responsive out of the box. Cards stack beautifully on mobile, maintain 2-column on tablets, and spread to full width on desktop.

Edit Tier Content (Names, Prices, Features)

Want to customize what each tier says? You have full control:

  1. Select your pricing table
  2. In properties, scroll to the Tiers array
  3. Click to expand Tier 1, Tier 2, etc.

For each tier, you can edit:

Tier Editor

  • Name: "Starter," "Pro," "Enterprise," etc.
  • Description: Short tagline (e.g., "Perfect for individuals")
  • Monthly Price: Enter number only (e.g., 29)
  • Yearly Price: Enter number only (e.g., 290)
  • Features: One per line (e.g., "10 projects\n50GB storage\nPriority support")
  • CTA Text: "Get Started," "Try Free," "Contact Sales"
  • Highlighted: Toggle ON to add "Most Popular" badge and accent styling

Real Example:

Name: "Pro Plan"
Description: "For growing teams"
Monthly Price: 49
Yearly Price: 470
Features:
  Unlimited projects
  500GB storage
  Priority support
  Advanced analytics
  Custom domains
CTA Text: "Start Free Trial"
Highlighted: ✅ ON
Enter fullscreen mode Exit fullscreen mode

💡 Conversion Tip: Always highlight your middle tier! Studies show it increases conversions by 30-40%. Use labels like "Most Popular," "Best Value," or "Recommended."

Preview Your Pricing Table

Let's see it in action:

  1. Click Preview (▶️) in Framer
  2. If you have subscriptions, toggle between Monthly and Yearly
    • Watch the prices and features update automatically
    • Notice the "Save X%" or annual discount messaging
  3. Click a "Get Started" button on any tier
  4. Complete a test purchase using: 4242 4242 4242 4242

Preview-Pricing-Creem Framer plugin

Everything working smoothly? Perfect! You now have a production-ready pricing table. 🚀

Part 5: Taking Your Site Live (Production Mode)

You've built and tested everything. Now it's time to accept real money.

Switch from Test to Production

Step 1: Get Your Production API Key

  1. Go to Creem Dashboard → Settings → API Keys
  2. Copy your Production Mode Key (⚠️ keep this SECRET!)

Step 2: Update Plugin Settings

  1. In Framer, open the Creem plugin
  2. Click the Settings/Gear icon
  3. Paste your Production Key
  4. Toggle Test Mode to OFF (very important!)
  5. Click Save

Step 3: Update Your Components

  1. Select each button/pricing table on your canvas
  2. In properties panel, find Test Mode toggle
  3. Turn it OFF for each component
  4. Double-check all components are in production mode

⚠️ Critical: If Test Mode is still ON, customers will see test checkout pages (and you won't get paid!). Always verify before publishing.

Publish Your Site to the Web

Final step: make your site live!

  1. Click Publish button in Framer's top-right corner
  2. Choose your domain:
    • Use a custom domain (e.g., yourapp.com)
    • Or use free Framer subdomain (e.g., yourapp.framer.app)
  3. Click Publish to Web

🎉 Congratulations! Your site is live with fully functional payments!

Post-Launch Checklist:

  • ✅ Test a real purchase (use a small amount first)
  • ✅ Verify payment appears in Creem dashboard
  • ✅ Check success redirect works (if you set one)
  • ✅ Test on mobile, tablet, and desktop
  • ✅ Share with a friend and watch them complete a purchase!

Helpful Resources

Final Thoughts

Building payment flows used to require developers, complex integrations, and weeks of work. With Creem for Framer, you can have a fully functional checkout system running in under an hour.

Whether you're launching a SaaS product, selling digital downloads, or monetizing your design templates, this plugin removes the technical barriers between you and your first sale.

The best part? Every component is fully customizable, production-ready, and responsive out of the box. No compromises on design. No limitations on functionality.

Now go build something amazing—and start getting paid for it! 💰

Have questions or feedback? Drop them in the comments below or open an issue on GitHub. Happy building!

Top comments (0)