Transform your Framer websites into revenue-generating products with Creem.
Add checkout buttons, pricing tables, and payment flows directly inside Framer with zero coding.
Perfect for SaaS founders, creators, agencies, and digital product businesses.
Creem for Framer is a payment plugin that allows you to accept payments, sell subscriptions, and create pricing pages in Framer using Creem’s checkout system.
Tutorial • Documentation • Report Bug • Request Feature
Transform your Framer projects into revenue-generating machines with Creem for Framer. Accept payments with zero coding—just drag, drop, and customize.
Perfect for SaaS landing pages, online courses, membership sites, and digital products. Built for the Creem Scoops Competition with accessibility and performance at its core.
🛒 Checkout Button - 7 variants (Default, Outline, Ghost, Gradient, Shadow, Shimmer, Icon Slide)
💳 Pricing Tables - Up to 5 tiers with monthly/yearly toggle & auto-pairing
♿️ WCAG 2.1 AA - Full keyboard nav, screen readers, reduced motion support
🎨 60+ Controls - Colors, typography, spacing—everything customizable
📱 Responsive - Mobile, tablet, desktop breakpoints built-in
⚡️ Auto-Setup - Components created on first insert
🔒 Test Mode - Try before going live with real payments
🎯 Two Modes - Embed popup or new tab checkout
Framer is a powerful website builder, but adding payments usually requires custom code or external tools.
Creem for Framer solves this by providing:
- No-code payment integration
- Built-in checkout buttons and pricing tables
- Subscription and one-time payment support
- Fast setup directly inside Framer
This makes it easy to launch SaaS products, sell digital goods, or monetize websites without engineering effort.
Creem for Framer is ideal for:
- SaaS landing pages with subscription checkout
- Online courses and digital products
- Membership websites
- Agencies selling services
- Indie hackers launching MVPs
- Startups validating product ideas
If you want to accept payments in Framer, this plugin provides a complete monetization solution.
⚠️ Note: This plugin is currently in development and not yet published to the Framer marketplace. You can install it manually from GitHub.
# Clone the repository
git clone https://github.com/Heet-Bhalodiya/creem-framer-plugin.git
cd creem-framer-plugin
# Install dependencies
pnpm install
# or: npm install
# Start development server
pnpm dev
# or: npm run dev
# Build the plugin
pnpm build
# or: npm run build- Open Framer Desktop App
- Go to your project → Plugins panel
- Click Development tab
- Click New Plugin from Folder
- Select the
creem-framer-pluginfolder - Plugin appears in your plugins list!
- Get your API key from Creem Dashboard → Settings → API Keys
- Open the Creem plugin in Framer
- Paste your Test Mode key
- Toggle Test Mode ON
- Start building! 🎉
Grab your key from Creem Dashboard (test or production).
Plugin → Button tab → Select product → Customize → Insert
Plugin → Pricing tab → Select 1-5 products → Reorder → Insert
Use Framer's property panel to fine-tune colors, sizes, text, and more.
7 Variants: Default, Outline, Ghost, Gradient, Shadow, Shimmer, Icon Slide
Customization: Colors, text, sizes, padding, borders, discount codes, success URLs
Modes: Embed (popup) or New Tab
Tiers: 1-5 pricing tiers with full customization
Toggle: Monthly/yearly billing switcher
Auto-Pairing: Automatically detects matching subscription products
60+ Controls: Separate controls for colors, fonts, spacing, borders, toggle styles
Responsive: Flexbox layout adapts to any screen size
💡 SaaS Product Tip: For subscription products with monthly and yearly billing options, create TWO separate products in Creem:
- Example: "Pro Plan - Monthly" ($29/month) and "Pro Plan - Yearly" ($290/year)
- The plugin automatically pairs products with matching names that include "monthly/yearly" or "month/year" keywords
- This enables the billing period toggle in your pricing table!
WCAG 2.1 Level AA compliant:
✅ Keyboard navigation (Tab, Enter, Space, Arrows, Escape)
✅ Screen reader support with ARIA labels & live regions
✅ Focus indicators with proper contrast
✅ Reduced motion support
✅ 44px minimum touch targets
- Vite 6 + React 18 + TypeScript
- Tailwind CSS 4
- Framer Plugin SDK v3
- Lucide React icons
Components not inserting?
→ Grant file creation permission when prompted
API key error?
→ Verify key from Creem dashboard, check test/prod mode
Preview not working?
→ Components disabled in canvas—use Preview mode or Publish
Styles not applying?
→ Switch to preview mode, clear Framer cache, or republish
MIT License - Copyright (c) 2026 Heet Bhalodiya
See LICENSE for full text.
Give a ⭐️ if this plugin helped you build better payment experiences!