Whop

How to integrate Whop with Webflow

Sell digital products, memberships, and course access from custom Webflow sites while Whop handles payment processing, subscription management, and member access control. This integration lets you maintain complete design control over marketing pages while delegating billing infrastructure to Whop's platform.

Embed Whop checkout forms directly in Webflow pages using custom Code Embed elements, automate workflows between platforms through Make or Zapier, or build custom integrations using both platforms' APIs.

Use Whop checkout embeds and widgets

Whop provides copy-paste embed codes that work directly in Webflow's custom Code Embed elements. Add checkout forms, buy buttons, or billing management interfaces to any page. Users complete transactions without leaving your site.

The embedded checkout widget requires two pieces of code. Add the script <script src="<https://js.whop.com/static/checkout/loader.js>" async></script> to Project Settings > Custom Code > Head Code. Then use a Code Embed element to insert the checkout container with your Plan ID from Whop's dashboard.

You can customize checkouts using data attributes like data-whop-checkout-theme for dark or light modes, data-whop-checkout-hide-price to remove pricing display, or data-whop-checkout-prefill-email to populate user information. Create checkout links in Whop's dashboard and add them to Webflow buttons for simple buy buttons. Embed the billing portal interface as iframes or direct links where members manage subscriptions, view invoices, and update payment methods.

Cross-origin browser policies prevent automatic iframe height adjustment. Set manual heights for different Webflow breakpoints or accept scrollbars within embedded content. This is a fundamental browser security feature that JavaScript cannot bypass.

Connect with automation platforms

Make and Zapier connect Whop and Webflow through third-party automation. No native integration exists between the platforms. These tools sync data between systems, trigger actions based on events, and automate member workflows. Zapier's native triggers don't include purchase events, and polling introduces approximately 5-minute delays between payment completion and access provisioning.

Make (Integromat) offers extensive Whop integration with 8+ module types for membership management, checkout sessions, plans, promo codes, products, payments, members, experiences, and reviews. Make does not provide pre-built Whop + Webflow scenario templates. Build custom workflows that watch for membership status changes, create Webflow CMS items when users subscribe, or update member profiles based on payment events. Make also supports Webflow connections as a separate native integration for building custom scenarios connecting both platforms.

Zapier's Whop integration provides two native triggers for Membership Went Invalid and Payment Failed. One action exists for adding free days to memberships. These limited native triggers don't cover purchase events needed for most automations. For complete Whop-Webflow integration, use Webhooks by Zapier to catch custom purchase events from Whop's webhook system, or use Make (Integromat), which offers more extensive Whop modules including membership and payment management. When connecting to Webflow's CMS API, you can create items, update collections, or trigger publishing workflows. Webhook-based integrations require external backend infrastructure for signature verification.

Make provides more extensive native Whop integration with 8+ modules supporting membership management, webhooks, and real-time synchronization for time-sensitive workflows. Zapier uses polling (approximately every 5 minutes) rather than real-time webhooks through its native triggers. Users experience delays between payment completion and access provisioning.

Neither automation platform offers pre-built templates specifically designed for Whop + Webflow integration. You build scenarios from scratch by selecting triggers, defining actions, and mapping data fields between systems.

Build with Webflow and Whop APIs

Custom API integration provides granular control over data flow and real-time synchronization through webhooks. This approach requires backend infrastructure to handle authentication securely. Webflow only supports client-side code, making direct API integration a security vulnerability. Backend middleware must process webhook events and make API calls without exposing credentials in browser-accessible code. If your API and frontend exist on separate domains, implement a reverse proxy layer to preserve authentication tokens across cross-origin requests due to strict browser cookie policies.

You need middleware (serverless functions, dedicated servers, or edge computing) because Webflow only supports client-side JavaScript. Custom code in Webflow supports only HTML, CSS, and JavaScript with a 50,000 character limit across your entire site. Any Whop API keys embedded in client-side JavaScript become publicly visible in the browser's source code. Embedding API credentials directly in Webflow custom code is not recommended for production environments. Instead, implement middleware infrastructure to keep API keys server-side, such as Zapier (which handles authentication securely), Make, AWS Lambda, Vercel Edge Functions, or a dedicated backend server.

Sync membership data to Webflow CMS

Create Webflow CMS collections that mirror your Whop membership structure. Build a Members collection with fields for username, email, membership tier, status, join date, renewal date, and Whop member ID. When Whop webhooks fire, your middleware receives the event, transforms data to match your Webflow schema, and calls the Webflow CMS API to create or update items.

This integration requires external middleware infrastructure (AWS Lambda, Vercel Edge Functions, or similar) to receive and process Whop webhooks. Webflow does not support server-side request processing. Never embed Whop API keys directly in Webflow custom code, as this exposes credentials in the browser. Webhook endpoints must validate signatures server-side using Whop's webhook secret for security. Alternatively, use Zapier or Make as middleware, though this introduces approximately 5-minute polling delays for data synchronization.

Configure Whop webhooks for these events:

• payment.succeeded triggers transaction record creation
• membership.activated creates or updates member profiles
• membership.went_invalid updates member status fields
• invoice.created stores billing history

Set up webhook receivers using platforms like Vercel, AWS Lambda, or Google Cloud Functions. Your endpoint must return HTTP 200 within 2-3 seconds to acknowledge receipt. Then process logic asynchronously to avoid timeout issues. Production implementations must verify HMAC-SHA256 signatures using the Standard Webhooks specification (validating svix-id, svix-timestamp, and svix-signature headers) before processing any webhook payload. This security step prevents spoofing attacks.

Whop implements the Standard Webhooks specification with HMAC-SHA256 signature verification. To validate webhook authenticity, verify the svix-signature header against your webhook secret alongside the svix-id and svix-timestamp headers. This prevents spoofing attacks where malicious actors send fake webhook events.

Verify member access in real-time

Check subscription status before displaying gated content using Whop's authentication system. According to Whop's authentication guide, JWT tokens passed in the x-whop-user-token header identify the current user. Your backend calls Whop's API to verify membership status, then conditionally renders Webflow content based on access level.

Modern browsers block third-party cookies by default. If your Webflow site and API exist on different domains, implement a reverse proxy to route API requests through your frontend domain. This preserves authentication cookies that would otherwise be blocked by cross-origin policies. Whop provides a reverse proxy tool for local development that mimics production behavior.

The checkAccess method returns hasAccess: boolean plus access level (customer, admin, or no_access). For optimal performance, consider storing results temporarily to reduce API calls, but implement periodic revalidation to catch subscription cancellations or expirations.

What you can build

Integrating Whop with Webflow enables monetization of digital products and membership sites with custom design.

• Online course platforms: Design course landing pages in Webflow with custom layouts, video backgrounds, and testimonial sections, then embed Whop checkout forms to sell course access. When users complete payment, Whop automatically delivers course materials through its native Courses app (which handles modules, lessons, quizzes, and multimedia), manages enrollment periods, and handles renewals. Your Webflow marketing site maintains your brand while Whop handles the backend logistics of course delivery, content management, and student enrollment.
• Gated community sites: Create public Webflow pages explaining community benefits, member testimonials, and pricing tiers, then gate Discord or Telegram access through Whop memberships. When visitors subscribe, Whop automatically sends Discord invites or assigns roles based on membership level. Your Webflow site handles public marketing while Whop manages the technical access control and billing cycles.
• SaaS product marketing: Build product landing pages, feature comparisons, and documentation sites in Webflow, then connect to Whop for subscription billing and license management. Use Whop's API with JWT authentication to verify subscription status before granting access to your separately-hosted application, ensuring a reverse proxy layer is implemented to preserve authentication tokens across domain boundaries.
• Digital product marketplaces: Showcase templates, resources, or downloadable tools using Webflow's CMS for product displays, then sell access through embedded Whop checkout buttons. Whop handles payment processing and manages license keys for purchased assets. Note that complex delivery workflows for digital files may require third-party tools or custom middleware for full automation. Update product descriptions in Webflow CMS while Whop manages the transactional backend.