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.
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.
No credit card required. No coding required.
Stripe
WebflowDoes 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 | Webflow → Plandalf | 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 | Plandalf → Stripe | 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 | Webflow → Plandalf | 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.
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.
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.
Style a normal button
Design the button or link in Designer first. A generic embed is only needed when Webflow requires raw HTML.
Add the custom attributes
Select the button, open Element settings, then Custom attributes. Add
data-plandalf-presentwith the offer slug, anddata-plandalf-modeset to test for this walkthrough.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.
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
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-promoas the checkout discount. It draws the countdown, anddata-plandalf-apply-promoon 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-presentattribute 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
- Plandalf with Webflow
- Plandalf on Webflow
- Webflow and Stripe checkout template
- Connect Stripe
- Create a promo
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.
- Stripe + HTMLOne script tag and a button attribute turn any HTML page into a place to sell, with Stripe taking the payment.
- Stripe + Customer.ioA Stripe-paid Plandalf checkout can start a webhook-triggered automation in Customer.io, which turns the sale into an event on the person.
- Webflow + KlaviyoWebflow hosts the buy button, Plandalf takes payment, and a Send Webhook step can push the buyer or the order into Klaviyo.
- Webflow + MailchimpWebflow shows the offer, Plandalf takes the order, and Mailchimp gets the buyer as a tagged contact with an event for a Customer Journey.
- Webflow + MailerLiteWebflow hosts the buy button, Plandalf takes payment, and MailerLite gets each buyer in the group that starts your emails.
Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: Webflow Help Center: custom code in head and body tags.