Whop

How to integrate Whop with Webflow

Design marketing pages in Webflow while Whop handles subscriptions, member access, and payments.

You can embed Whop checkout forms directly in Webflow using copy-paste HTML, connect Make or Zapier for automated workflows, or build custom integrations using both platforms' APIs. Each method serves different technical requirements, right from simple buy buttons to complex membership verification systems.

Use Whop checkout embeds and widgets

Add checkout forms, buy buttons, or billing interfaces to any Webflow page via Code Embed elements with no backend required.

Setup:

1. Add <script src="https://cdn.whop.com/embed/checkout.js" async></script> to Project Settings > Custom Code > Head Code
2. Insert checkout container with your Plan ID using Webflow's Code Embed element

Capabilities:

• Checkout customization: Data attributes for themes (data-whop-checkout-theme), hide pricing (data-whop-checkout-hide-price), pre-fill email (data-whop-checkout-prefill-email)
• Buy buttons: Checkout links on Webflow buttons/text
• Billing portal: Embedded interface for subscription management

Responsive iframes: Use aspect ratio padding technique (see FAQ). Cross-origin policies prevent automatic height adjustment—set manual heights per breakpoint or use CSS media queries.

Connect with automation platforms

No native Whop-Webflow integration exists. Use Make or Zapier for this.

• Make (Integromat): 8+ module types (memberships, checkout sessions, plans, promo codes, products, payments, members, experiences, reviews). Supports Webflow connections separately. No pre-built Whop + Webflow templates—build manually.
• Zapier: Limited to 2 triggers (Membership Went Invalid, Payment Failed) + 1 action (add free days). Native triggers use polling with multi-minute delays. For purchase events, use Webhooks by Zapier with Whop webhooks for near real-time triggers.

The common workflows include the following:

• New member provisioning (Zapier): Purchase → create Webflow CMS item + welcome email
• Subscription status sync (Make): Status change → update CMS field + access control
• Failed payment (webhooks): Webhook → update member status via CMS API + admin notification

Build with Webflow and Whop APIs

Custom API integration enables granular control and real-time webhook synchronization. Requires backend middleware—Webflow only supports client-side code (HTML, CSS in <style>, JavaScript in <script>, 50,000 char limit per Code Embed).

• Security: Never embed Whop API keys in Webflow custom code publicly visible in browser source. Use Zapier, Make, AWS Lambda, Vercel Edge Functions, or dedicated backend.
• Cross-domain auth: Cookie-based authentication requires reverse proxy for cross-origin requests. JWT-based (tokens in headers) may not require proxy.

Sync membership data to Webflow CMS

Create Members collection with fields: username, email, tier, status, join date, renewal date, Whop member ID.

Required: External middleware (AWS Lambda, Vercel Edge Functions) to receive webhooks. Webflow has no server-side processing. Validate signatures server-side. Alternative: Zapier/Make as middleware.

Configure Whop webhooks:

• payment.succeeded: Create transaction record
• membership.activated: Create/update member profiles
• membership.went_invalid: Update member status
• invoice.created: Store billing history

Webhook requirements: Return HTTP 200 within 2-3 seconds, process asynchronously. Verify HMAC-SHA256 signatures per Standard Webhooks specification (validate svix-id, svix-timestamp, svix-signature headers).

Verify member access in real-time

JWT tokens in x-whop-user-token header identify users. Backend calls Whop API, returns access decisions to Webflow frontend.

checkAccess method returns: hasAccess (boolean), accessLevel (customer, admin, no_access). Cache results temporarily but revalidate periodically for cancellations/expirations.

Cross-domain cookies: Modern browsers block third-party cookies. Use reverse proxy if frontend and API on different domains with cookie-based auth. Whop provides reverse proxy tool for local development.

What you can build

Integrating Whop with Webflow lets you build monetized digital product sites that handle checkout, content delivery, and membership access.

• Online course platforms: Webflow landing pages + Whop checkout. Whop delivers via the native Courses app (modules, lessons, quizzes, multimedia), manages enrollment and renewals
• Gated community sites: Public Webflow pages + Whop-gated Discord/Telegram access. Auto-sends invites or assigns roles by membership level
• SaaS product marketing: Webflow product/docs pages + Whop billing/licensing. JWT auth verifies subscriptions. Cross-domain cookie auth may need a reverse proxy
• Digital product marketplaces: Webflow CMS product displays + Whop checkout. Handles digital file delivery, license keys, one-time/subscription payments