Lemon Squeezy

How to integrate Lemon Squeezy with Webflow

Webflow does not support Lemon Squeezy as a native payment provider, but you can add payment functionality for digital products, SaaS subscriptions, and software licensing. Payment processing through Lemon Squeezy lets you collect one-time and recurring payments while using Webflow to design and host your marketing pages and product catalogs.

You can implement payment functionality through direct checkout links that redirect customers to hosted payment pages, checkout overlays that display payment forms in a modal window on your Webflow site, or API integration that syncs purchase data to Webflow CMS collections and controls content access based on subscription status.

Use direct checkout links

Direct checkout links redirect customers to Lemon Squeezy's hosted checkout page. This method requires no code and works with any Webflow button or text link. You generate a unique checkout URL for each product in your Lemon Squeezy dashboard, then add it to Webflow elements through the link settings panel.

The hosted checkout handles the complete payment flow including tax calculation, payment processing, and receipt delivery. Customers leave your Webflow site temporarily, complete their purchase on Lemon Squeezy's hosted checkout page, then return via a redirect URL you configure.

This method supports:

• Zero-code implementation with immediate deployment
• Automatic tax compliance across 135+ countries
• Mobile-optimized checkout without custom responsive design
• Subscription billing with automatic renewals
• Pre-filled customer data through URL parameters (email, name, discount codes, and custom tracking data)

Implementation steps:

1. Copy the checkout URL from your Lemon Squeezy product settings
2. Select any button, text, or clickable element in Webflow
3. Open the Link Settings panel and paste the checkout URL
4. Publish your Webflow site

This approach works best for simple product sales where the checkout experience can happen off-site. For checkout experiences that stay on your Webflow domain, use the checkout overlay method instead.

Embed checkout overlays

The checkout overlay displays as a modal window on your Webflow site, keeping customers on your domain throughout the purchase. You add the Lemon.js library to your Webflow project settings once, then place embed code on pages where you want buy buttons to appear.

Webflow's Embed element accepts the HTML button code that Lemon Squeezy generates. The overlay handles payment processing, tax calculation, and order confirmation without page redirects. Customers see your site's navigation and branding throughout checkout.

This method supports:

• On-domain checkout experience with your site visible in the background
• Customizable overlay appearance through Lemon Squeezy dashboard settings
• Pre-filled customer information including email, name, and discount codes
• Mobile-responsive modal that adapts to screen sizes automatically
• Integration with Webflow CMS through custom code in collection items

Implementation steps:

1. Open Webflow Project Settings > Custom Code
2. Add this script before the </body> tag: <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
3. In your Lemon Squeezy dashboard, navigate to the product and copy the button embed code
4. In Webflow, drag an Embed element onto your page
5. Paste the Lemon Squeezy button code into the Embed element
6. Save and publish your site

The checkout overlay supports all Lemon Squeezy payment methods including cards, PayPal, Apple Pay, and Google Pay. You can customize which elements appear in the overlay through your Lemon Squeezy dashboard without modifying the embed code, including store logo display, product media and images, product description, customer name field, and discount code field availability.

Build with Webflow and Lemon Squeezy APIs

The Lemon Squeezy API supports custom implementations beyond standard checkout flows. You can create programmatic checkout sessions, sync purchase data to Webflow CMS collections via webhooks, manage subscription access, and generate license keys for software products.

This approach requires backend infrastructure to handle API authentication with bearer tokens using the Authorization: Bearer YOUR_API_KEY header and HMAC-SHA256 webhook signature validation for security.

API integration makes sense when you need custom subscription logic, gated content based on purchase status, or automated workflows between purchase events and Webflow content.

The Webflow API provides CMS write access, letting you create or update collection items when customers make purchases. For example, you can use Lemon Squeezy webhooks like order_created and subscription_created to trigger Webflow CMS operations, automatically syncing customer data and order information into your collections.

Both platforms provide official SDKs with authentication helpers and type definitions. Lemon Squeezy offers JavaScript and Laravel SDKs with community libraries for Go, Ruby, Python, and other languages. Webflow provides the @webflow/js-webflow-api package with examples for Next.js, React, and Node.js environments.

This method supports:

• Custom subscription management with your own logic
• Automated content access based on active subscriptions
• License key delivery through Webflow webhooks
• Real-time purchase data sync to CMS collections via webhook events
• Multi-product bundles with custom pricing rules

Sync orders to Webflow CMS

Webhook integration connects Lemon Squeezy purchase events to Webflow CMS automatically. When customers complete purchases, Lemon Squeezy sends webhook events to your endpoint, which then calls the Webflow API to create or update collection items. This pattern works for customer directories, order histories, and subscription status dashboards.

You configure webhooks in your Lemon Squeezy dashboard with your endpoint URL and signing secret. Your endpoint validates webhook signatures using HMAC SHA-256, extracts order data, and makes authenticated requests to Webflow's CMS Items endpoint. Collection items appear in your Webflow CMS after you stage and publish the changes.

Key webhook events for CMS sync:

• order_created: Fires when customers complete checkout, includes customer email, order total, product details
• subscription_created: Triggered with new subscriptions, provides subscription ID and billing cycle
• subscription_cancelled: Sent when subscriptions end, includes cancellation timestamp
• license_key_created: Delivers license key data for software products

Implementation pattern:

1. Create a Webflow CMS collection with fields for order data (email, order number, total, status)
2. Set up a webhook endpoint that receives POST requests from Lemon Squeezy
3. Validate the webhook signature using your signing secret
4. Extract order attributes from the order_created webhook payload
5. Call POST /collections/{collection_id}/items to create a CMS item, ensuring _archived: false and _draft: false
6. Publish changes with POST /sites/{site_id}/publish (respecting the 1/minute rate limit)

Map Lemon Squeezy data types to Webflow field types: monetary values (cents) to Number fields, ISO 8601 timestamps to DateTime fields, status strings to Option fields, email addresses to Email fields. Both platforms use ISO 8601 date formatting, so timestamps transfer without conversion.

Your webhook endpoint needs to return HTTP 200 status codes within the timeout window (30 seconds for Webflow webhooks). Store webhook event IDs to prevent duplicate processing during retry attempts. Use HMAC-SHA256 signature validation with timestamp verification to reject replay attacks. Implement timestamp validation within ±5 minutes to protect against unauthorized requests.

Gate content with subscription status

Subscription-based access control checks customer status before displaying protected content. Your application queries the Lemon Squeezy Subscriptions endpoint to verify active subscriptions, then conditionally publishes Webflow pages or updates CMS item visibility. This pattern works for membership sites, premium content libraries, and SaaS product access.

The subscription status values include active, on_trial, paused, past_due, unpaid, cancelled, and expired. Your logic determines which statuses grant access. The subscription_updated webhook fires when status changes, triggering your code to update Webflow CMS items or page visibility.

Implementation pattern:

1. Store customer subscription IDs in a Webflow CMS collection or external database
2. When customers log in, retrieve their subscription ID
3. Call GET /v1/subscriptions/{id} with your API key and headers Authorization: Bearer YOUR_API_KEY and Accept: application/vnd.api+json
4. Check the status attribute in the response for values like on_trial, active, paused, past_due, unpaid, cancelled, or expired
5. Grant or deny access based on status value
6. Cache the subscription status to reduce API calls, keeping rate limits in mind (300 calls/minute globally, monitored via X-Ratelimit-Limit and X-Ratelimit-Remaining headers)

Update access automatically through webhooks. Listen for subscription_cancelled, subscription_expired, and subscription_payment_failed events to revoke access. Process subscription_payment_recovered and subscription_resumed events to restore access.

Generate and deliver license keys

License key integration distributes software activation codes after purchase. Lemon Squeezy automatically generates license keys when customers buy products configured for licensing, then sends the license_key_created webhook to your endpoint. Your code receives the key and delivers it through Webflow CMS collection items, form notifications, or email integrations.

The License API provides activation, validation, and deactivation endpoints. Desktop or mobile applications call these endpoints to verify license authenticity before enabling features. You can limit activations per license, track activation instances, and remotely deactivate compromised keys. The License API operates at a 60 calls per minute rate limit.

Implementation pattern:

1. Configure licensing settings for products in Lemon Squeezy dashboard
2. Set up webhook endpoint to receive license_key_created events
3. Extract license key from webhook payload attributes
4. Store license in Webflow CMS collection with customer email and order ID
5. Send license to customer through Webflow form notification or email service
6. Implement license validation in your application using Lemon Squeezy License API endpoints (subject to 60 calls/minute rate limit)

License keys include metadata fields for tracking customer information and order details. You can pass custom data through the checkout custom data fields. While Lemon Squeezy recommends passing minimal data through checkouts, you can access this metadata in webhook payloads and store it in Webflow CMS for customer support and license management.

Your software application calls POST /v1/licenses/activate to verify keys and record activation instances. The API returns validation status and remaining activation slots. Deactivation endpoints let customers transfer licenses between devices without exceeding activation limits.

What you can build

Integrating Lemon Squeezy with Webflow supports digital product storefronts, subscription-based membership sites, SaaS product marketing with checkout, and automated license delivery systems.

• Digital product marketplace: Build a Webflow site selling templates, design assets, or educational content with checkout overlays on product pages
• Membership site with gated content: Create a subscription-based learning platform where Webflow hosts public marketing pages and member directories while Lemon Squeezy handles recurring billing
• SaaS product website with trial signups: Design your SaaS marketing site in Webflow with embedded signup buttons using Lemon Squeezy's checkout overlay
• Software licensing system: Distribute desktop or mobile applications through a Webflow site that generates license keys via Lemon Squeezy after purchase