Framer + PayRequest

Add a payment button to your Framer site

Framer's native Stripe plugin is geo-limited and brand-bound. Drop in a single Embed element instead — one anchor, one stylesheet — and accept iDEAL, SEPA, Klarna, PayPal and cards on a checkout that looks like your site, not Stripe's.

Payment button for Framer sites
The wall

Framer's payment story today

Framer is a designer's dream — until you want to charge for something. The native Stripe plugin only supports a handful of countries, the checkout opens in a Stripe-branded popup that ignores your design tokens, and currencies and methods are restricted to whatever Framer surfaces in the UI. PayPal lives in a separate widget. Subscriptions live somewhere else. Every workaround leaves a seam between your beautiful Framer site and a generic checkout you didn't design.

  • Framer's Stripe plugin is region-limited (mostly US/UK).
  • Branded Stripe popup ignores your fonts, colours and corner radii.
  • No iDEAL, SEPA, Klarna or Bancontact in the native flow.
  • Subscriptions and one-time payments live in different widgets.
The fix

The fix: a button that lives inside your Framer design

PayRequest's Payment Button is a single HTML anchor styled by a tiny CSS file. Drop it in a Framer Embed element and it inherits your hero, your card layout, your CMS section. Click → land on your branded checkout (your handle, your colours, every payment method you've enabled). No plugin, no popup, no Stripe redirect.

One Embed, anywhere on the canvas

Hero CTA, pricing tier, blog post, CMS template, even a free-stay donation widget — drop the Embed and it's live.

Works on the free Framer plan

No paid plugin tier required. The Payment Button is just HTML, so every Framer plan supports it.

Custom domain, custom checkout

Customers stay in your-brand.com, click, land on payrequest.me/yourhandle/whatever in your colours. The seam disappears.

Reuse across CMS items

Build the button once in a Component, vary the href per CMS item with a property override. Sell different products from one design.

The snippet

The whole integration, in two lines of HTML

Paste both lines into a Framer Embed element. The first <link> loads the styles once per page, the second <a> is the button itself. Resize the Embed to button height — it inlines like text.

framer-embed.html
<!-- Paste both lines into a Framer Embed HTML element -->
<link rel="stylesheet"
      href="https://payrequest.app/embed/button.css">

<a href="https://payrequest.me/yourhandle/template-pack"
   class="pr-btn pr-btn--default"
   target="_blank"
   rel="noopener">Buy template — €29</a>

Three button styles ship with the stylesheet — pick one to match your Framer design tokens.

Walkthrough

Step-by-step: from Framer canvas to live payment

01

Create the Smart Link in PayRequest

Sign in to PayRequest → Payment Page → Smart Links → New. Set the amount, pick your methods (card, Apple Pay, iDEAL, PayPal), copy the URL.

30 sec
02

Open the Framer page or component

In the Framer editor, open the page (or the Component you want to reuse — Hero, Pricing card, CMS template).

5 sec
03

Add an Embed element

Insert → Embed → Embed HTML. Paste the snippet (link + anchor). The button appears in the canvas immediately — Framer renders Embed elements at design time.

15 sec
04

Resize the Embed to button height

Drag the Embed handles so the container hugs the button (around 48px tall). Set width to Auto if you want the anchor to size itself, or Fill if you want it stretched to the column.

10 sec
05

Publish to your custom domain

Hit Publish in Framer. The PayRequest stylesheet loads from our CDN, your visitors click, and the checkout opens in their flow. Test once, you're live.

Live
Comparison

Framer + Payment Button vs the alternatives

MethodSetup timeFramer planOn-brand checkoutPayment methodsWorks in CMS
Framer Stripe plugin
10 minPro+Stripe-branded popupCard + Apple/Google PayLimited
Framer PayPal widget
10 minPro+PayPal-brandedPayPal onlyManual
Code Component (custom dev)
Half a dayAnyManual stylingWhatever you buildIf you wire it
PayRequest Payment ButtonBest
1 minuteFree+Yours20+ including iDEAL, SEPA, KlarnaYes (per-item override)
What to ship

What Framer creators ship with the Payment Button

Designer portfolios with paid downloads

Sell your design files, Framer templates, or icon packs from the same hero where you show them off. No external Gumroad redirect.

European service businesses

iDEAL, Bancontact and SEPA on a Framer site without rebuilding in WordPress. The methods Framer's native Stripe doesn't expose.

Course landing pages and cohorts

Pricing card with a Pay button per tier, conversion-tracked. Variable-amount tiers possible (early-bird, full-price) using Smart Link parameters.

Indie products and one-page sites

Framer is fastest-to-publish; the Payment Button is fastest-to-charge. Together: from idea to first sale in an afternoon.

Why this scales

Why this is more flexible than the native Framer plugin

Framer's native Stripe and PayPal widgets are great for getting started in two countries. The moment you need iDEAL for the Netherlands, Bancontact for Belgium, SEPA for cross-border European invoicing, or a checkout that doesn't break out of your design system, you hit the wall. The Payment Button doesn't have a wall — it's just HTML, and PayRequest handles the rest.

  • 20+ payment methods, not 4. iDEAL, SEPA, Klarna, Bancontact, PayPal, cards, Apple/Google Pay.
  • Hosted checkout that inherits your handle and brand colours.
  • Variable amounts, multi-currency, recurring or one-time — all in one button.
  • Switch payment provider (Stripe → Mollie → PayPal) on PayRequest without re-publishing your Framer site.
FAQ

Frequently asked questions

Do I need Framer Pro to use the Payment Button?+
No. The Embed HTML element is available on every Framer plan, including Free. The button is plain HTML and the stylesheet loads from PayRequest's CDN — Framer's plan tier doesn't gate either of them.
Will the button look good without me styling it?+
Yes — the three default styles (Blue, Dark, Outline) are designed to drop into most Framer hero and pricing layouts cleanly. If you want it to match a specific brand colour, override the .pr-btn classes in a Custom Code element with a few lines of CSS.
Can I use the Payment Button in a Framer Component?+
Yes. Build an Embed-wrapped button inside a Component and reuse it across pages and CMS items. To vary the href per item (different products with different prices), expose the URL as a property override and bind it to your CMS field.
Does the button work inside a Framer CMS template?+
Yes. Add the Embed inside the CMS detail template and bind the anchor's href to a CMS "Payment URL" field. Each CMS item ends up with its own Smart Link — perfect for product catalogues, course modules, or templates.
What about subscriptions or recurring payments?+
PayRequest Smart Links can be one-time or recurring. The button HTML is identical — Framer doesn't care. Pick the recurring option in the Smart Link, paste the same anchor, and the checkout sets up the subscription on PayRequest.
Does it work on a Framer custom domain?+
Yes. The stylesheet is served from PayRequest's CDN with permissive CORS, so it loads on your-brand.com just like on .framer.website. No DNS or CSP changes required.
Framer + PayRequest

Ship your Framer site with real payments today

Sign up, create a Smart Link, paste the snippet into a Framer Embed. The whole loop takes under five minutes — no plugin, no Pro plan required.