Voeg een betaalknop toe aan je Framer-site
Framer's eigen Stripe-plugin is geo-beperkt en merk-gebonden. Plaats in plaats daarvan één Embed-element — één anchor, één stylesheet — en accepteer iDEAL, SEPA, Klarna, PayPal en kaarten op een checkout die op jouw site lijkt, niet op die van Stripe.
Het betalingsverhaal van Framer vandaag
Framer is een droom voor designers — totdat je iets wilt verkopen. De native Stripe-plugin werkt maar in een handvol landen, de checkout opent in een Stripe-popup die je design tokens negeert, en betaalmethodes/valuta zijn beperkt tot wat Framer in de UI toont. PayPal zit in een aparte widget. Abonnementen zitten ergens anders. Elke workaround laat een naad zien tussen je mooie Framer-site en een generieke checkout die je niet zelf hebt ontworpen.
- Framer's Stripe-plugin is regio-beperkt (vooral US/UK).
- Stripe-popup negeert je fonts, kleuren en hoekradii.
- Geen iDEAL, SEPA, Klarna of Bancontact in de native flow.
- Abonnementen en eenmalige betalingen zitten in verschillende widgets.
De oplossing: een knop die in je Framer-design leeft
PayRequest's Betaalknop is één HTML-anchor met een klein CSS-bestand. Plak hem in een Framer Embed-element en hij erft je hero, je card-layout, je CMS-sectie. Klik → land op je eigen checkout (jouw handle, jouw kleuren, alle methodes die je hebt aangezet). Geen plugin, geen popup, geen Stripe-redirect.
Eén Embed, overal op het canvas
Hero CTA, prijsplan, blogpost, CMS-template, zelfs een fooi-widget — drop de Embed en hij staat live.
Werkt op het gratis Framer-plan
Geen betaalde plugin nodig. De Betaalknop is gewoon HTML, dus elk Framer-plan ondersteunt hem.
Custom domain, eigen checkout
Klanten blijven op jouw-merk.nl, klikken, landen op payrequest.me/jouwhandle/iets in jouw kleuren. De naad verdwijnt.
Hergebruik in CMS-items
Bouw de knop één keer in een Component, varieer de href per CMS-item via een property override. Verkoop verschillende producten vanuit één design.
De hele integratie, in twee regels HTML
Plak beide regels in een Framer Embed-element. De eerste <link> laadt de styles eenmalig per pagina, de tweede <a> is de knop zelf. Maak de Embed even hoog als de knop — hij gedraagt zich als tekst.
<!-- 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>De stylesheet bevat drie knopstijlen — kies er één die past bij je Framer-design tokens.
Stap voor stap: van Framer-canvas naar live betaling
Maak de Smart Link in PayRequest
Log in op PayRequest → Betaalpagina → Smart Links → Nieuw. Stel het bedrag in, kies methodes (kaart, Apple Pay, iDEAL, PayPal), kopieer de URL.
Open de Framer-pagina of -component
Open in de Framer-editor de pagina (of de Component die je wilt hergebruiken — Hero, Prijskaart, CMS-template).
Voeg een Embed-element toe
Insert → Embed → Embed HTML. Plak de snippet (link + anchor). De knop verschijnt direct in het canvas — Framer rendert Embeds in design-time.
Maak de Embed even hoog als de knop
Sleep de Embed-handvatten zodat de container om de knop strak zit (zo'n 48px hoog). Zet de breedte op Auto als je de anchor zichzelf wilt laten schalen, of Fill om hem over de kolom te rekken.
Publiceer naar je custom domain
Klik Publiceren in Framer. De PayRequest-stylesheet komt van onze CDN, je bezoekers klikken, en de checkout opent in hun flow. Eén keer testen, je bent live.
Framer + Betaalknop vs. de alternatieven
| Methode | Setuptijd | Framer-plan | Eigen checkout | Betaalmethodes | Werkt in CMS |
|---|---|---|---|---|---|
Framer Stripe-plugin | 10 min | Pro+ | Stripe-popup | Card + Apple/Google Pay | Beperkt |
Framer PayPal-widget | 10 min | Pro+ | PayPal-merk | Alleen PayPal | Handmatig |
Code Component (eigen dev) | Halve dag | Elke | Handmatig stylen | Wat je bouwt | Als je het koppelt |
PayRequest BetaalknopBest | 1 minuut | Gratis+ | Jouw merk | 20+ inclusief iDEAL, SEPA, Klarna | Ja (override per item) |
Wat Framer-makers met de Betaalknop bouwen
Designer-portfolio's met betaalde downloads
Verkoop je designbestanden, Framer-templates of icon-packs vanaf dezelfde hero waar je ze toont. Geen externe Gumroad-redirect.
Europese diensten
iDEAL, Bancontact en SEPA op een Framer-site zonder over te stappen naar WordPress. Methodes die Framer's native Stripe niet aanbiedt.
Cursus-landingspagina's en cohorten
Prijskaart met een Pay-knop per tier, met conversie-tracking. Variabele bedragen mogelijk (early-bird, full-price) via Smart Link-parameters.
Indie producten en one-page sites
Framer is het snelst gepubliceerd; de Betaalknop het snelst betalend. Samen: van idee tot eerste verkoop in één middag.
Waarom dit flexibeler is dan de native Framer-plugin
De native Stripe- en PayPal-widgets van Framer zijn prima voor twee landen. Op het moment dat je iDEAL voor Nederland, Bancontact voor België, SEPA voor cross-border facturatie, of een checkout zonder design-bruch nodig hebt, loop je tegen een muur. De Betaalknop heeft geen muur — het is gewoon HTML, en PayRequest doet de rest.
- 20+ betaalmethodes in plaats van 4. iDEAL, SEPA, Klarna, Bancontact, PayPal, kaarten, Apple/Google Pay.
- Hosted checkout die je handle en merkkleuren erft.
- Variabele bedragen, multi-currency, recurring of one-time — allemaal in één knop.
- Wissel van betaalprovider (Stripe → Mollie → PayPal) in PayRequest zonder je Framer-site opnieuw te publiceren.
Veelgestelde vragen
Heb ik Framer Pro nodig om de Betaalknop te gebruiken?+
Ziet de knop er goed uit zonder zelf te stylen?+
Kan ik de Betaalknop in een Framer-component gebruiken?+
Werkt de knop in een Framer CMS-template?+
Hoe zit het met abonnementen of terugkerende betalingen?+
Werkt het op een Framer custom domain?+
Lanceer je Framer-site vandaag met echte betalingen
Maak een account, maak een Smart Link, plak de snippet in een Framer Embed. Het hele proces duurt minder dan vijf minuten — geen plugin, geen Pro-plan vereist.