DEV Community: Heet

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

Heet — Sat, 28 Feb 2026 15:46:08 +0000

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:

A Framer account → Sign up free at framer.com
A Creem account → Get started at creem.io
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

Option 2: Download ZIP

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

Load the Plugin in Framer

Once built, load it as a development plugin:

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

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:

Log into creem.io and navigate to Products
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

Get Your API Key (Keep This Secret!)

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

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

⚠️ 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

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

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

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

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:

Make sure the Button tab is selected (top of plugin)
Select a Product from the dropdown (you'll see all your Creem products)
Button Text: Type what you want (e.g., "Get Started," "Buy Now," "Subscribe")
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)
Accent Color: Pick a color that matches your brand
Click Insert Button
Click anywhere on your Framer canvas to place the button

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

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:

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

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)

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

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

🎯 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)

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)

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:

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

For each tier, you can edit:

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

💡 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:

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

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

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

Step 2: Update Plugin Settings

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

Step 3: Update Your Components

Select each button/pricing table on your canvas
In properties panel, find Test Mode toggle
Turn it OFF for each component
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!

Click Publish button in Framer's top-right corner
Choose your domain:
- Use a custom domain (e.g., yourapp.com)
- Or use free Framer subdomain (e.g., yourapp.framer.app)
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

Creem Documentation: docs.creem.io
Framer Help Center: framer.com/help
GitHub Repository: github.com/Heet-Bhalodiya/creem-framer-plugin
Report Issues: Open an issue on GitHub

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!

How to Automatically Split Revenue with Creem (Co-Founders, Affiliates & Partners)

Heet — Fri, 27 Feb 2026 19:43:36 +0000

If you run a SaaS, Affiliate program, or digital product business, you’ve probably faced this challenge:

How do I split SaaS revenue with my co-founder?
How do I automatically pay affiliates?
How do I share revenue with contractors or partners?

As your business grows, managing payouts manually becomes complicated and time-consuming. ⚠️

That’s where Creem’s Revenue Splits feature helps.

It enables automated revenue sharing by distributing payments between recipients automatically whenever a transaction occurs.⚡ Instead of using spreadsheets or sending manual transfers, you configure the split once and Creem handles the rest.

In this guide, we’ll explore how to split SaaS revenue automatically using Creem, along with real-world examples and step-by-step setup instructions.

What Are Revenue Splits? 💡

Revenue Splits allow you to automatically distribute payments between multiple recipients whenever a transaction happens.

Instead of receiving 100% of revenue, calculating commissions manually and sending transfers to each party, Creem distributes revenue automatically based on your configured split rules. This improves transparency and builds trust between all parties involved.

This is ideal for:🚀

Co-founders Partnerships
Affiliate Programs
External Partners

Note: Split payments incur a 2% fee.💰 This fee is deducted from the transaction amount before any commission is distributed to recipients.

Creem Revenue Splits is designed for SaaS companies, Affiliate programs, and digital businesses that need to share revenue between multiple stakeholders automatically..

Real-World Use Cases 🌍

Now, let's explore some real world uses cases...

1. Co-Founder Revenue Sharing

Let’s say you’re selling a digital product for $200, and you and your co-founder have agreed to a 70/30 revenue split.

When a purchase occurs:

2% split fee = $4
Remaining amount = $196
Your co-founder receives 30% = $58.80
You receive 70% = $137.20

No manual transfers. Complete transparency. Fully automated.

2. SaaS Affiliate Program (Recurring)

For example, You sell a $49/month SaaS subscription and you offer 30% recurring commission to affiliates.

Every time a customer subscribes:

2% split fee ≈ $0.98
Remaining amount ≈ $48.02
Affiliate receives 30% ≈ $14.41

And this repeats automatically every billing cycle. Affiliates can track their earnings from their dashboard. This works perfectly for influencers, YouTubers and partnership programs.

3. Paying Contractors or Agencies

Let’s say:

Your developer earns 20% of product revenue.
Your design agency earns 10%.

Instead of monthly invoicing, assign the split to your product & revenue is automatically shared. This is ideal for Growth Agencies, Technical co-founders & revenue-sharing partnerships.

Step-by-Step: Setting Up a Revenue Split in Creem ⚙️

Before you start setting up revenue split in Creem, make sure that you meet the basic requirements as listed below:

✅ Requirements

An active and verified store
Store should be in good standing
Have at least one product created

Once you fulfill all the requirements, you can start setting up splits.

Step 1: Navigate to Splits Hub 📍

In your Creem dashboard, you can find the splits hub in the Growth section in the sidebar.

Step 2: Configure Split. 🧩

Once you’re in the Splits Hub, navigate to the Splits page from the left sidebar.

I have attached the screenshot for splits page:

On this page, you can find the create split button on the top right corner of the screen.

Let’s create a new split. Once you click on the create split button it will open a screen like below:

Select your store, Product on which you want to create a split and provide a description for a split. You can also preview a split on the right side of the screen.

Step 3: Add Recipients 👤

You can invite recipients of a split using:

Their Store ID (found under Settings)
Their Email address

You also need to assign the revenue split percentage to each recipient.

Once everything is configured, click Create Split.

You can check all your product’s splits at the splits overview page. I am attaching the screenshot for your reference:

Your all splits

If you invite via email, recipients will receive an invitation email to accept the split.
If you invite via Store ID, the split will appear instantly in their dashboard.

After accepting the invitation, recipients must complete their onboarding on Creem and set up their payout method.

Recipients can also see their commission payments in the splits Dashboard or in their Activity tab under their Store account on the main Creem dashboard.

Recipients are paid on the same payout schedule as the merchant.

Once the setup is complete and a payment is received, the revenue is automatically distributed according to the defined split rules among the recipients.

Managing Your Revenue Splits 📊

Once you have configured the revenue splits, Creem provides tools to efficiently manage the revenue splits:

1. Real-Time Dashboard

Monitor your split performance and recipient payments.

2. Automated Distribution

Funds are distributed automatically according to your configured rules.

3. Recipient Management

Easily Add, remove, or modify recipients and their payout preferences.

4. Compliance Support

Revenue splits are handled with proper tax documentation and reporting.

This makes creem suitable even for formal partnership agreements.

Why Revenue Splits Are a Growth Multiplier? 🚀

Revenue splits aren’t just about payments. They enable new business models like revenue-share partnerships, affiliate-first growth, and global collaborations without financial friction.

By setting up splits in Creem, you can:

Reward partners and affiliates automatically
Structure co-founder revenue transparently
Pay contractors without headaches
Scale collaboration without adding manual work

Instead of managing finances yourself, you configure the split once and it runs automatically, transaction by transaction.

Final Thoughts 🎯

Whether you’re building a SaaS, running an affiliate program, or working with partners, learning how to split SaaS revenue efficiently becomes important as your business grows. Managing payouts manually with spreadsheets and transfers takes time and can create confusion between stakeholders.

Creem’s Revenue Splits feature solves this by enabling automated revenue sharing. You can distribute payments between co-founders, affiliates, contractors, or partners automatically whenever a transaction happens.

Instead of handling payouts yourself, you set up the split once and Creem manages the rest. This reduces manual work, improves transparency, and makes it easier to scale partnerships.

If you want a simple way to automate payouts and share revenue with confidence, Creem makes it straightforward to get started.

🔗 Sources