Stripe integration
Stripe handles payments and subscriptions, with Stripe-hosted Payment Links, an embeddable Buy Button and a developer Checkout. On Framer we link or embed the Buy Button, Webflow Ecommerce uses Stripe as a built-in payment provider, and on Astro or Next.js we create Checkout Sessions from a server route with webhook fulfilment.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | Half a day (links) to 3 days (custom Checkout) |
| What we do | We pick the lightest Stripe option for what you sell, build the pricing and checkout flow, and set up webhooks and test mode. |
| Category | Payments |
Setup by platform
How we set up Stripe
Framer
- Embed
A button links to a Stripe Payment Link, or the Buy Button embed code goes in a Framer Embed component. There is no first-party Stripe plugin for Framer.
Webflow
- Native
- Embed
Webflow Ecommerce connects Stripe in Settings, Ecommerce, Payment, on an Ecommerce plan, with Apple Pay and Google Pay. Non-ecommerce sites use the Buy Button in a code embed.
Astro
- API
An on-demand endpoint creates a Checkout Session with the stripe package and redirects to it. Keys live in astro:env server secrets; a webhook endpoint verifies the signature on the raw body.
Next.js
- API
Following Stripe’s Next.js quickstart: a Route Handler creates the Checkout Session with server-only keys, and a webhook handler fulfils the order after verifying Stripe-Signature.
Use cases
What teams use it for
Sell one thing well
A workshop seat, deposit or template sold with a Payment Link or Buy Button on a marketing site.
Subscriptions from the pricing page
Plan buttons start a Stripe Checkout for the right price, with trials and coupons handled by Stripe.
Full stores
Webflow Ecommerce with Stripe for catalogues, carts and order emails.
Before you add it
What to watch out for
Security
Only the publishable key is public
Publishable keys are safe in the page; secret and restricted keys never are. Prices and availability are set on the server so they can’t be changed in the browser.
Performance
Stripe.js can’t be bundled
Stripe.js must load from js.stripe.com for PCI compliance. We use the @stripe/stripe-js/pure import so it loads only when checkout starts.
Consent and GDPR
Fraud signals collect device data
Stripe advises Stripe.js on every page; its fraud signals go to m.stripe.com, never to ads. Opting out raises fraud risk, so we agree it with your legal team.
FAQ
Questions about Stripe
Is it safe to have our Stripe key in the Buy Button code?
Yes. The embed uses the publishable key, which Stripe marks as safe to expose. Secret and restricted keys stay on the server.
Can we self-host Stripe.js for speed?
No. For PCI compliance it must load from js.stripe.com. We delay loading it until a visitor starts checkout instead.
Do we need Webflow Ecommerce to sell on Webflow?
No. For a few products or a subscription, a Payment Link or Buy Button works on any Webflow plan with custom code. Ecommerce makes sense for a real catalogue.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call