Custom Code and an Embed component
Add a Stripe checkout to your Framer site
Framer designs the site. Plandalf adds the checkout, the countdown and the receipt, through Custom Code, an Embed component or a plain link.
No native Framer integration. Steps follow Framer’s own help articles; scripts run on the published site, not in the canvas.
Framer
Stripecheckout.completedinvoice.paid
How it connects
Framer is the site. Plandalf is the till.
A hosted link needs no code. A script in Custom Code opens the checkout on the page.
How Plandalf reaches Framer
Custom Code and an Embed component
The SDK in Site Settings, Custom Code. A hosted link on any Framer button works with no code at all.
A Framer button can link straight to a Plandalf hosted checkout. For a checkout that opens over the page, or an inline checkout and countdown, add the Plandalf script as site-wide custom code and place the markup in an Embed component. Stripe or PayPal takes the payment.
Checkout embed available
Framer owns
- Design, layout and CMS
- Hosting and publishing
- Forms and animations
Plandalf owns
- The Offer and its checkout
- Promo countdowns and pricing
- Payment, invoice and follow-up
Same on every platform: payment goes through your own Stripe or PayPal account, Plandalf keeps the invoice, and every Offer has a hosted link and a test mode link.
What syncs
What moves between Framer and Plandalf
Nothing syncs by integration. Framer shows the page, Plandalf records the sale.
| What | How it works | What it needs |
|---|---|---|
| Hosted link | Set a Framer button’s link to Your checkout link from the Offer’s Share tab. Buyers leave the site for a Plandalf page on your subdomain. | A published Offer |
| Overlay checkout | The SDK script goes in Site Settings, Custom Code. A button inside an Embed component then carries data-plandalf-present. | The script on the published site |
| Inline checkout and countdown | A div with data-plandalf-mount or data-plandalf-promo, inside an Embed component’s HTML section. | A frame tall enough for the checkout |
| Orders and delivery | The paid invoice lives in Plandalf. Framer has no order record for a Plandalf sale. | A step in Automations for delivery or email |
Why add Plandalf
What Framer doesn’t do for selling
Framer is a site builder, so the payment side comes from something you add.
No checkout for your own site that we could find
Framer’s help centre covers embeds, forms and custom code for your site. Taking payment means connecting a payment tool: a Stripe link, a Marketplace plugin or a checkout like Plandalf.
Scripts run only when published
Framer’s guidance is that custom code does not load in the canvas preview. You see the checkout only on the published site.
Some sites refuse to be embedded
Framer warns that some websites block embedding through their HTTP headers. A Plandalf checkout opens from a script on your page or a hosted link, not from an iframe of another site.
Sources: Framer: add an iframe or embed script, Framer Academy: Custom Code.
Set it up
Add Plandalf to Framer in four steps
Start with the hosted link. Add the script when you want the checkout to open over the page.
- 1
Try the hosted link first
Copy Your checkout link from the Offer’s Share tab and set it as a Framer button’s link. Publish and click it. This path needs no code.
- 2
Add the script as site-wide custom code
Open Site Settings, find Custom Code, and add your SDK script to the end of the body. To keep it off other routes, use the page-level Custom Code instead.
<script src="https://your-org.plandalf.dev/js/plandalf-sdk.js" async></script> - 3
Place the button in an Embed component
Drag the Embed component onto the canvas and put your markup in its HTML section. Script-based embeds sometimes need extra wrapping code.
<button data-plandalf-present="pro-plan" data-plandalf-mode="test">Buy now</button> - 4
Publish and test the live page
Open the published page signed out and buy in test mode. The canvas will not show it.
Gotchas
What catches people out on Framer
Nothing renders in the canvas
Custom code and script embeds only run on the published site. A blank Embed in the editor is normal.
An Embed component is a frame
Size it to fit the checkout or countdown so it is not cut off. Content in an embed frame does not resize with the page on its own.
Plan limits for Custom Code are not stated
Framer’s articles we checked do not say which site plan Custom Code needs. Check your plan in Framer before you rely on it.
Keep one copy of the script
Do not add it to both site-wide Custom Code and an Embed on the same page.
We have not published a tested walkthrough
These steps follow Framer’s help articles. We have not published screenshots from a Framer replay.
Integrations
Keep your site. Upgrade how it sells.
Plus a fully documented REST API and webhook layer for whatever’s not in the list.
Questions
Framer Stripe and checkout questions
The short answers. The docs have the long ones.
How do I accept Stripe payments on a Framer site?
Connect Stripe in Plandalf under Settings, Payments and Tax Integrations, publish an Offer, then link a Framer button to its checkout link or add the Plandalf script and a data-plandalf-present button. Payment lands in your Stripe account.
Does Framer have a built-in checkout?
We could not find a cart or checkout for your own site in Framer’s help centre. Payments come from a tool you add, which can be a Stripe link, a Marketplace plugin or Plandalf.
Can I add a countdown timer to a Framer page?
Yes. Put a div with data-plandalf-promo and your promo slug in an Embed component, and apply the same promo to the buy button so the price follows the deadline.
Can I add an upsell to a Framer checkout?
Yes, in the Plandalf Offer. A Framer button opens the Offer with its bumps and upsells, so the design stays in Framer and the sale mechanics stay in Plandalf.
Is there a Plandalf plugin on the Framer Marketplace?
No. There is no native Framer integration. Use the hosted link, or the script and an Embed component.
Why is my Plandalf button missing in the Framer editor?
Custom code and script embeds run only on the published site. Publish and open the live page.
The team
Built by a team obsessed with conversion.
15+ years testing every pricing model under the sun. Every part of Plandalf comes from a real checkout problem we’ve had to solve ourselves.
No credit card required. Nothing to migrate.