> Add a Stripe-backed Plandalf checkout to a Webflow site with Footer code and a custom attribute on a button. Keep the design in Designer; try the template. Source: https://plandalf.com/apps/stripe/integrations/webflow Last modified: 2026-10-26 Checkout embed # Stripe + Webflow integration Style the button in Webflow Designer, add one custom attribute, and a Plandalf checkout charging your Stripe account opens from it. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **Stripe** **Webflow** ## Does Stripe integrate with Webflow? Plandalf is not Webflow Ecommerce and does not sync with it. You add the Plandalf script under Site settings, Custom code, then give a Webflow button a custom attribute naming the offer. The checkout that opens takes payment through the Stripe account you connected in Plandalf, so Webflow Designer keeps the look. ## What moves between Stripe and Webflow Event From and to Through What happens Visitor clicks a styled button WebflowPlandalf Checkout embed A custom attribute `data-plandalf-present` on the Designer element opens the offer. The SDK finds elements Webflow renders from attributes, so no embed is needed for a button. Payment PlandalfStripe Payment connection Stripe processes the card in your own account. Payment and commission records stay in Plandalf and its connected services, not in Webflow. Inline checkout or countdown WebflowPlandalf Checkout embed An embed element with `data-plandalf-mount` shows the checkout in the page, and a Div Block with `data-plandalf-promo` shows a countdown tied to the promo. Checkout completed Plandalf (paid via Stripe)Webflow By hand The guide does not configure Webflow Ecommerce order sync or delivery. Set follow-up in Plandalf, for example a receipt, and test fulfilment separately. ## Open a Stripe checkout from a Webflow button You need a Webflow site on a plan that allows custom code, and a published Plandalf offer with a Stripe price. 1. ### Connect Stripe and publish In Plandalf authorize Stripe, attach a price to the offer and publish it. Keep the offer slug and your organization's SDK URL to hand. 2. ### Add the script once In Webflow open Site settings, then Custom code, and paste the Plandalf script into Footer code. Save, and do not add it again in page code or an embed. 3. ### Style a normal button Design the button or link in Designer first. A generic embed is only needed when Webflow requires raw HTML. 4. ### Add the custom attributes Select the button, open Element settings, then Custom attributes. Add `data-plandalf-present` with the offer slug, and `data-plandalf-mode` set to test for this walkthrough. 5. ### Publish and test the live page Custom code shows in preview but needs publishing to reach visitors. Open the published page signed out, check the product and total, and pay with a Stripe test card after confirming the Stripe test connection. 6. ### Check mobile and decline Repeat on a phone width, and again with a declined test card. If you use an inline checkout, buy from that placement too, because a working popup does not prove it. ## What sellers do with Stripe and Webflow ### Designer-built landing page for a workshop A freelancer's workshop page keeps its Webflow layout, and the Reserve a seat button opens a Plandalf offer that charges the freelancer's Stripe account. ### Launch week countdown A Div Block carries `data-plandalf-promo` and the buy button carries `data-plandalf-apply-promo` with the same slug, so the Stripe charge follows the countdown tier. ### Start from the published template Someone setting up a site can clone the Webflow and Stripe checkout template as a starting point, then change the copy and the price to suit their own offer. ## Limits and gotchas - Custom code in Webflow needs a Core, Growth, Agency or Freelancer Workspace or a site on an active Site plan. Webflow's help center keeps the current requirements. - Custom code in Webflow needs a plan that allows it and a published site before visitors see it, so check Webflow's custom-code requirements for your account. - This setup does not configure Webflow Ecommerce order sync. A Plandalf sale is a Plandalf invoice and a Stripe payment, not a Webflow order. - Do not use `data-plandalf-promo` as the checkout discount. It draws the countdown, and `data-plandalf-apply-promo` on the button is what applies the price. - A test attribute is a request. The checkout session can fall back to the live Stripe connection if the organization's test integration is missing, so verify the account first. ## Stripe and Webflow: common questions Does Stripe integrate with Webflow? Webflow Ecommerce is a separate product. With Plandalf you add a Stripe-backed checkout to any Webflow page through Footer code and a button attribute, and Stripe processes the payment. How do I add a Stripe checkout to Webflow? Connect Stripe to Plandalf, publish an offer, paste the Plandalf script into Site settings, Custom code, Footer code, and add a `data-plandalf-present` attribute to a button. Is there a Webflow and Stripe checkout template? Yes. Plandalf publishes a Webflow and Stripe checkout template you can clone as a starting point. Will Plandalf sales appear in Webflow? No. Webflow only hosts the page. Sales appear in Plandalf and in your Stripe account. ## Guides for this pair - [Plandalf with Stripe](https://plandalf.com/platforms/stripe) - [Plandalf with Webflow](https://plandalf.com/platforms/webflow) - [Plandalf on Webflow](https://plandalf.com/docs/platforms/webflow) - [Webflow and Stripe checkout template](https://plandalf.com/templates/webflow-stripe-checkout) - [Connect Stripe](https://plandalf.com/docs/platforms/stripe) - [Create a promo](https://plandalf.com/docs/timers/create-promo) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Stripe and Webflow - [**Stripe + Kit (ConvertKit)**Stripe takes the payment, Plandalf runs the checkout, and Kit tags the buyer and starts their emails from the paid order.](https://plandalf.com/apps/stripe/integrations/convertkit) - [**Stripe + HTML**One script tag and a button attribute turn any HTML page into a place to sell, with Stripe taking the payment.](https://plandalf.com/apps/stripe/integrations/custom-html) - [**Stripe + Customer.io**A Stripe-paid Plandalf checkout can start a webhook-triggered automation in Customer.io, which turns the sale into an event on the person.](https://plandalf.com/apps/stripe/integrations/customer-io) - [**Webflow + Klaviyo**Webflow hosts the buy button, Plandalf takes payment, and a Send Webhook step can push the buyer or the order into Klaviyo.](https://plandalf.com/apps/webflow/integrations/klaviyo) - [**Webflow + Mailchimp**Webflow shows the offer, Plandalf takes the order, and Mailchimp gets the buyer as a tagged contact with an event for a Customer Journey.](https://plandalf.com/apps/webflow/integrations/mailchimp) - [**Webflow + MailerLite**Webflow hosts the buy button, Plandalf takes payment, and MailerLite gets each buyer in the group that starts your emails.](https://plandalf.com/apps/webflow/integrations/mailerlite) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [Webflow Help Center: custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).