> Sell from a Framer site with a Plandalf checkout. Add one script in Custom Code, then use an Embed component or a link to open a Stripe-backed checkout. Source: https://plandalf.com/platforms/framer 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. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[How it works](#setup) No native Framer integration. Steps follow Framer’s own help articles; scripts run on the published site, not in the canvas. **Framer** **Plandalf** **Stripe** - `checkout.completed` - `invoice.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](https://www.framer.com/help/articles/how-to-add-an-iframe-or-embed-script/), [Framer Academy: Custom Code](https://www.framer.com/academy/lessons/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. 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. 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. ``` ``` 3. 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. ``` ``` 4. 4 ### Publish and test the live page Open the published page signed out and buy in test mode. The canvas will not show it. Plandalf · Framer ![The Plandalf offer editor: the checkout a website buy button opens.](https://plandalf.com/images/stacks/api-first/numi-offer-editor.png) 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. - ![Stripe](https://plandalf.com/images/integrations/stripe.svg) - ![PayPal](https://plandalf.com/images/integrations/paypal.png) - ![Klaviyo](https://plandalf.com/images/integrations/klaviyo.png) - ![Mailchimp](https://plandalf.com/images/integrations/mailchimp.png) - ![ConvertKit](https://plandalf.com/images/integrations/convertkit.png) - ![ActiveCampaign](https://plandalf.com/images/integrations/activecampaign.png) - ![MailerLite](https://plandalf.com/images/integrations/mailerlite.png) - ![Drip](https://plandalf.com/images/integrations/drip.png) - ![Flodesk](https://plandalf.com/images/integrations/flodesk.png) - ![Beehiiv](https://plandalf.com/images/integrations/beehiiv.png) - ![Customer.io](https://plandalf.com/images/integrations/customer_io.png) - ![Postmark](https://plandalf.com/images/integrations/postmark.png) - ![SendGrid](https://plandalf.com/images/integrations/sendgrid.png) - ![HubSpot](https://plandalf.com/images/integrations/hubspot.png) - ![Intercom](https://plandalf.com/images/integrations/intercom.png) - ![Kajabi](https://plandalf.com/images/integrations/kajabi.png) - ![Teachable](https://plandalf.com/images/integrations/teachable.png) - ![Circle](https://plandalf.com/images/integrations/circle.png) - ![Ghost](https://plandalf.com/images/integrations/ghost.png) - ![MemberPress](https://plandalf.com/images/integrations/memberpress.png) - ![Webflow](https://plandalf.com/images/integrations/webflow.png) - ![Framer](https://plandalf.com/images/integrations/framer.png) - ![Shopify](https://plandalf.com/images/integrations/shopify.png) - ![WordPress](https://plandalf.com/images/integrations/wordpress.png) - ![Squarespace](https://plandalf.com/images/integrations/squarespace.png) - ![Wix](https://plandalf.com/images/integrations/wix.png) - ![Next.js](https://plandalf.com/images/integrations/nextjs.png) - ![React](https://plandalf.com/images/integrations/react_app.png) - ![Vue](https://plandalf.com/images/integrations/vue_app.png) - ![Avalara](https://plandalf.com/images/integrations/avalara.svg) - ![TaxJar](https://plandalf.com/images/integrations/taxjar.svg) - ![Slack](https://plandalf.com/images/integrations/slack.png) - ![Zapier](https://plandalf.com/images/integrations/zapier.svg) - ![Tolt](https://plandalf.com/images/integrations/tolt.png) - [\+ more](https://plandalf.com/integrations "All integrations") 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. ![Aarogorn](https://plandalf.com/images/faces/aarongorn.png)![Bilbert](https://plandalf.com/images/faces/bilbert.png)![Buildo](https://plandalf.com/images/faces/buildo.png)![Foundo](https://plandalf.com/images/faces/foundo.png)![Legoli](https://plandalf.com/images/faces/legoli.png) 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. [Start your 14-day free trial](https://admin.plandalf.dev/signup) No credit card required. Nothing to migrate.