Webflow + Stripe Integration: Taking Payments, Subscriptions, and Invoicing on Your London Site

Table of Contents

1. Why Stripe + Webflow for London Businesses
2. Pattern 1: Stripe Checkout — The Fastest Path to Taking Payments
3. Pattern 2: Serverless Payment Intents — Full Control
4. Pattern 3: Webhook Handling — What Happens After Payment
5. Pattern 4: Subscription and Membership Sites
6. SCA Compliance for UK Customers
7. Secure Key Management: Never Expose Your Secret Key
8. London Examples: SaaS, Events, Services
9. Frequently Asked Questions

Why Stripe + Webflow for London Businesses

Webflow's native ecommerce covers standard storefronts well, but many London businesses need payment flows that go beyond "add to cart." Stripe fills the gap for custom pricing, B2B invoicing, subscription management, and service retainers. A London SaaS company charging tiered monthly subscriptions on Webflow needs Stripe's Billing API, not Webflow's product grid. A consulting firm taking project deposits needs custom amounts, not fixed-price products.

The integration pattern is straightforward: your Webflow site handles the user experience and Stripe handles the money. A thin serverless layer in between keeps your secret keys off the client, validates amounts server-side, and handles the post-payment lifecycle through webhooks.

Pattern 1: Stripe Checkout — The Fastest Path to Taking Payments

Stripe Checkout is a hosted payment page that handles card input, SCA, and receipt emails. Your Webflow site creates a Checkout Session via a serverless function, then redirects the user to Stripe's hosted page. Stripe handles the rest.

Implementation Steps

1. Create a serverless function that accepts a POST request with the price/plan identifier and quantity.
2. Call Stripe's Checkout Sessions API from the server-side function — this is where your secret key lives, never in the browser.
3. Return the session URL to your Webflow frontend and redirect the user.
4. Configure success and cancel URLs — the user returns to your Webflow site after payment.

This pattern works for: one-time payments, simple subscriptions, donation pages, event tickets. You get Stripe's optimised checkout UI with Apple Pay and Google Pay support without building a custom payment form.

Pattern 2: Serverless Payment Intents — Full Control

When you need a fully branded checkout experience embedded in your Webflow site, use Stripe Elements with Payment Intents. Your serverless function creates a PaymentIntent and returns the client secret. Your Webflow frontend uses Stripe.js to collect and tokenise card details, then confirms the PaymentIntent.

This gives you pixel-level control over the payment form design, error handling, and post-payment UX. The trade-off: you handle PCI compliance considerations and SCA redirect flows yourself. Stripe Elements handles most of the heavy lifting, but you need to understand the payment lifecycle.

Pattern 3: Webhook Handling — What Happens After Payment

The payment isn't the end of the story. Stripe webhooks tell your system what happened — payment succeeded, subscription renewed, dispute filed, invoice paid. Your serverless function needs a webhook endpoint that listens for these events and takes action.

Common Webhook Actions

• payment_intent.succeeded: Grant access to gated content, send confirmation email, update user record.
• invoice.payment_succeeded: Extend subscription access, update billing dates.
• customer.subscription.deleted: Revoke access, trigger offboarding email.
• charge.dispute.created: Alert your support team, temporarily suspend access.

Always verify webhook signatures using your Stripe webhook signing secret. Never trust the raw webhook body without signature verification — it's how you know the event genuinely came from Stripe.

Pattern 4: Subscription and Membership Sites

London startups building SaaS on Webflow need subscription management. The pattern: Webflow handles the public site and membership content. Stripe manages recurring billing. A serverless function and database track subscription status and control content access.

Implementation: Webflow CMS holds gated content (premium guides, member-only pages, course modules). Your serverless function checks the user's Stripe subscription status (active, past_due, cancelled) and conditionally serves content. When a subscription renews or cancels, Stripe webhooks update the access database. This is not a plug-and-play solution — expect £2,000-£5,000 for a custom membership system from a London Stripe + Webflow developer.

SCA Compliance for UK Customers

Strong Customer Authentication (SCA) is mandatory for UK and EU online payments under PSD2 regulations. Stripe handles SCA automatically when you use Checkout or the latest Stripe.js with Payment Intents — the authentication challenge (3D Secure, bank app approval) happens within Stripe's flow.

Key points for your Webflow integration: Always use the latest Stripe.js version. Always confirm payments server-side (the client confirms the PaymentIntent, but your server verifies the outcome). Test SCA flows in Stripe's test mode — use test cards that trigger 3D Secure challenges to ensure your integration handles the redirect correctly. Never bypass SCA — declined payments and compliance risks aren't worth the friction savings.

Secure Key Management: Never Expose Your Secret Key

The golden rule of Stripe + Webflow: your Stripe secret key (sk_live_...) never, ever appears in client-side code. Webflow's custom code embeds and page settings can expose JavaScript — one misplaced embed and your key is in the browser. Always route payment operations through serverless functions where the secret key lives in environment variables.

Use Stripe's publishable key (pk_live_...) on the client side for tokenising card details via Stripe.js. The publishable key is safe to expose — it can only create tokens, not charge cards.

London Examples

SaaS Startup: Tiered Subscriptions

A London B2B SaaS company uses Webflow for their marketing site and documentation. Their pricing page has three tiers (Starter, Professional, Enterprise) with custom Stripe Checkout sessions. Professional tier subscribers get access to gated Webflow CMS content — API docs, implementation guides, and case studies. Stripe webhooks manage access: payment succeeded → grant access; subscription cancelled → revoke after grace period.

Consulting Firm: Project Deposits

A London Webflow agency takes project deposits through their site. Clients select a service package on Webflow, the serverless function creates a Stripe PaymentIntent for the deposit amount (typically 30% of project fee), and the client pays via Stripe Elements embedded in a branded Webflow form. On payment success, a webhook triggers an email with the project agreement and onboarding questionnaire.

Events Company: Ticket Sales

A London events company uses Webflow for event landing pages with custom ticket types and pricing. Stripe Checkout handles payment. A webhook on payment success sends the ticket PDF and calendar invite. The whole flow — landing page to ticket delivery — runs through Webflow and Stripe with zero third-party ticketing platform overhead.

Frequently Asked Questions

Can I use Stripe Checkout directly on Webflow?

Yes — create Stripe Checkout sessions from a serverless function and embed the resulting URL in a Webflow button or redirect. Never embed your Stripe secret key in client-side Webflow code. The serverless function is essential: it creates the session server-side where the secret key is safe.

How do I handle Stripe webhooks from a Webflow site?

Create a dedicated webhook endpoint as a serverless function (Vercel, AWS Lambda) that receives Stripe events and takes action — updating databases, sending emails, or modifying CMS content. Always verify webhook signatures using your Stripe webhook signing secret. Test webhooks locally using the Stripe CLI before deploying.

What about SCA for UK customers?

Stripe handles SCA automatically with Checkout and the latest Stripe.js + Payment Intents. Ensure your integration uses the current API version and test with SCA-challenge cards in Stripe's test mode. Never attempt to bypass SCA — it's legally required for UK transactions and Stripe enforces it.

How much does Stripe + Webflow integration cost in London?

Simple Checkout integration: £500-£1,500. Subscription/membership with webhooks and content gating: £2,000-£5,000. Custom billing portal with invoicing: £5,000+. Stripe's fees are separate (1.4% + 20p for UK cards, 2.9% + 20p for international). Find Stripe integration developers in London for accurate quotes.