Whop

Webflow wasn't built for selling digital products, memberships, or subscriptions. If you're shipping courses, communities, or SaaS from a Webflow site, you need a commerce layer.

Whop fills that gap. Webflow handles design, content, and SEO. Whop handles checkout, billing, memberships, affiliates, and product delivery, connected through embeds, automations, or APIs.

It's a strong fit for course creators, community builders, SaaS founders, coaches, and agencies, who can also resell the stack as a productized offer.

How to integrate Whop with Webflow

What is Whop? Whop is a platform and marketplace for selling digital products, memberships, communities, and software access. It provides a checkout system, subscription billing, affiliate management, course hosting, and community tools. Whop supports payments across 241 territories through credit cards, PayPal, cryptocurrency, and buy-now-pay-later options.

Teams use Whop and Webflow together when they need a custom-designed public site that connects to a commerce and membership backend. Webflow gives you full control over branding, layout, and SEO. Whop gives you the payment infrastructure and post-purchase experience without building custom billing or access control from scratch.

The Whop-Webflow integration supports 3 approaches:

• Whop checkout embeds place checkout forms and payment links on Webflow pages without backend code.
• Zapier lets you connect named Whop events to named Webflow actions such as Create Live Item and Update Item, or use Webflow triggers like New Form Submission and New Order to run Whop actions.
• The Webflow and Whop APIs give you full control over membership syncing, access verification, and CMS item management, but require server-side development.

Most implementations combine the embed approach with either Zapier or the API path depending on how much post-purchase automation the project requires.

Add Whop checkout to Webflow pages

Whop provides several ways to place checkout on a Webflow site, from simple button links to fully embedded checkout forms. No Whop app exists on the Webflow Marketplace. You connect the two platforms by adding Whop's checkout loader script and HTML elements directly to your Webflow pages.

All embed methods require a Whop Plan ID. To find yours, go to Dashboard > Checkout Links, click the three-dot menu on any checkout link, hover over Details, and copy the plan_XXXXXXXXX value.

Whop offers three embed paths, each suited to different levels of customization:

• Checkout links redirect buyers to a Whop-hosted checkout page with no code required
• Embedded checkout renders a checkout form directly on your Webflow page using a script and HTML div
• The visual checkout builder at design.whoponboarding.com generates embed code without manual HTML editing

Each of these paths works on any Webflow custom domain.

Link to Whop checkout pages

Checkout links are the simplest method. They work on any Webflow plan, including free. You create a shareable URL in Whop's dashboard and attach it to any button or link element in Webflow.

To set up a checkout link:

1. In Whop, go to Dashboard > Checkout Links > + Create checkout link.
2. Select a product and configure pricing (free, one-time, or recurring).
3. Click Create the checkout link and copy the generated URL.
4. In Webflow, select a Button or Link element, open the settings panel, set the link type to URL, and paste the Whop checkout URL.
5. Publish the site.

This method works for any product type. Buyers leave your site briefly to complete payment on Whop's hosted page, then return to a URL you specify.

Embed Whop checkout with Code Embed elements

Embedded checkout renders a payment form directly on your Webflow page inside an iframe. Buyers stay on your site throughout the purchase flow. This method requires a paid Webflow site plan or a paid Workspace plan because it uses the Code Embed element.

To embed Whop checkout on a Webflow page:

1. In Webflow, open Project Settings > Custom Code and paste the following script in the head code section:

<script
  async
  defer
  src="https://js.whop.com/static/checkout/loader.js"
></script>

2. Save changes.
3. On the page where checkout should appear, drag a Code Embed element onto the canvas.
4. Paste the following HTML, replacing plan_XXXXXXXXX with your Plan ID and the return URL with your own thank-you page:

<div
  data-whop-checkout-plan-id="plan_XXXXXXXXX"
  data-whop-checkout-return-url="https://yoursite.com/thank-you"
  data-whop-checkout-theme="light"
></div>

5. Click Save & Close, then publish the site.

The embedded checkout supports a full set of data- attributes for customization:

• data-whop-checkout-theme accepts light, dark, or system to match your site design
• data-whop-checkout-theme-accent-color accepts named colors such as blue, violet, green, tomato, and many more (including red, purple, orange, pink, and others)
• data-whop-checkout-hide-price set to true hides the price display
• data-whop-checkout-prefill-email pre-fills the buyer's email address
• data-whop-checkout-adaptive-pricing set to true shows prices in the buyer's local currency
• data-whop-checkout-affiliate-code credits a specific affiliate for the sale

The complete attribute reference is available in the Whop checkout embed documentation. These settings cover the most common display and checkout behavior adjustments used on Webflow pages.

You can also add callback functions for checkout events. For example, to run code after a successful purchase:

<script>
  window.onCheckoutComplete = (planId, receiptId) => {
    console.log(planId, receiptId);
  };
</script>
<div
  data-whop-checkout-on-complete="onCheckoutComplete"
  data-whop-checkout-plan-id="plan_XXXXXXXXX"
></div>

To test before going live, set data-whop-checkout-environment="sandbox" and create sandbox plans at sandbox.whop.com/dashboard. Use the test card number 4242 4242 4242 4242 with any future expiry and CVC. This lets you verify the purchase flow before switching to live payments.

Use the visual checkout builder

Whop's visual checkout builder generates embed code through a point-and-click interface. This works well for users who want to customize the checkout appearance without editing HTML attributes manually.

To generate and add the embed code:

1. Go to design.whoponboarding.com and open the Builder.
2. Click Add Pricing Option and paste your Plan ID.
3. Customize the color theme and display settings.
4. Click Generate Embed Code at the bottom of the page and copy the full code block.
5. In Webflow, drag a Code Embed element onto the canvas, paste the generated code, and click Save & Close.
6. Publish the site.

Do not remove the .whop-checkout-embed CSS class from the generated code. Whop's affiliate attribution scripts use that class to target the checkout element. Keeping the generated class intact ensures attribution scripts continue to work.

Set up affiliate attribution

Whop supports automatic affiliate tracking on embedded checkouts hosted on Webflow pages. When an affiliate shares a link with their code as a URL parameter, an attribution script reads that parameter and injects it into the checkout form.

To enable affiliate attribution, paste this script directly after your embed code in the same Code Embed element:

<script>
  (function () {
    var params = new URLSearchParams(window.location.search);
    var affiliateCode = params.get("a");
    if (affiliateCode) {
      var checkout = document.querySelector(".whop-checkout-embed");
      if (checkout) {
        checkout.setAttribute("data-whop-affiliate", affiliateCode);
      }
    }
  })();
</script>

Affiliates share links in the format https://yoursite.com/checkout?a=affiliatename. Whop records the attribution and credits the commission automatically in the seller dashboard. This gives you a straightforward referral tracking setup without adding a separate affiliate system to Webflow.

Connect Whop and Webflow with Zapier

Zapier provides a confirmed direct connection between Whop and Webflow. This method is useful when you need Whop triggers to run Webflow actions such as Create Live Item or Update Item in Webflow CMS, or when Webflow triggers should run Whop actions. No custom code is required, but multi-step Zaps require a paid Zapier plan.

To create a Whop-to-Webflow Zap:

1. Log in to Zapier and click Create Zap.
2. Search for "Whop" as the trigger app and select an event.
3. Authenticate with your Whop API credentials.
4. Add Webflow as the action app and select an action such as Create Live Item to add a CMS record.
5. Map the Whop fields (email, product name, payment amount) to Webflow CMS fields.
6. Test and activate the Zap.

Webflow actions available in Whop Zaps include Create Live Item and Update Item for CMS collections. In the reverse direction, Webflow triggers like New Form Submission and New Order can fire Whop actions such as Add Free Days to Membership or Create Promo Code. These named Webflow triggers and actions are the clearest starting points for building Zaps between the two tools.

Native Zapier triggers use polling, which introduces multi-minute delays. For near real-time automation, use Webhooks by Zapier combined with Whop webhooks pointing to your Zap's webhook URL.

Build with the Webflow and Whop APIs

For full control over membership syncing, content access verification, and CMS updates, you can connect the Webflow and Whop APIs through a server-side middleware layer. This approach is suited for developers building custom integrations. Webflow cannot receive webhooks or run server-side code natively, so all webhook handling must happen in an external service like a Vercel serverless function, Cloudflare Worker, or Node.js server.

The relevant APIs for this integration:

• The Whop API handles memberships, payments, products, plans, and user access verification at https://api.whop.com/api/v1
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger outbound events when CMS items change
• Whop webhooks send real-time POST requests when payments, memberships, or entries change

Both APIs use Bearer token authentication. Whop API keys are generated at Dashboard > Developer > Company API Keys. Webflow site tokens are available in Site settings > Apps & Integrations > API Access. With those credentials in place, your middleware can coordinate data between the two systems.

Sync membership status to Webflow CMS

The most common API integration pattern writes Whop membership data into Webflow CMS items. When someone purchases a membership through Whop, a webhook fires, your middleware processes it, and the Webflow API creates or updates a CMS item.

To implement membership syncing:

1. In Whop's dashboard, go to the Developer tab and create a webhook pointing to your middleware endpoint. Select the membership.activated and membership.deactivated events.
2. In your middleware, verify the webhook signature using the WHOP_WEBHOOK_SECRET and the webhook-signature header. Return a 200 OK response immediately.
3. In a background task, call the Webflow CMS API to modify one or more staged items:

PATCH /v2/collections/{collection_id}/items
Authorization: Bearer WEBFLOW_API_TOKEN
Content-Type: application/json

{
  "items": [
    {
      "id": "{item_id}",
      "fieldData": {
        "name": "Member Name",
        "is-active": true,
        "whop-membership-id": "mem_XXXXXXXXX"
      }
    }
  ]
}

4. Use the webhook-id header value as an idempotency key. Whop delivers webhooks at least once, so the same event may arrive more than once.

Whop webhooks follow the Standard Webhooks specification and retry up to 3 times (after 10, 20, and 40 seconds) on non-2xx responses. That retry behavior makes idempotent processing especially important.

Verify user access from Webflow pages

Whop's access check endpoint lets you verify whether a user has an active membership for a specific product. This is useful for building client-side access gating on Webflow pages, where custom JavaScript calls your middleware, which then queries Whop's API.

The access check endpoint:

GET /api/v1/users/{id}/access/{resource_id}
Authorization: Bearer YOUR_API_KEY

The response returns:

{
  "has_access": true,
  "access_level": "customer"
}

The access_level field returns customer for valid memberships, admin for team members, or no_access. Resource ID prefixes indicate the scope: biz_ for company-wide access, prod_ for product-level, and exp_ for experience-level. Full details are in the check access documentation.

Do not expose your Whop API key in client-side Webflow code. Route all API calls through your backend middleware, where the key stays server-side. This keeps access checks secure while still letting Webflow pages respond to membership state.

Handle payments and fulfillment

For one-time digital product sales, listen for the payment.succeeded webhook event and create a corresponding CMS item in Webflow. Your middleware can also call GET /api/v1/payments/{id} for full payment details or GET /api/v1/files/{id} for presigned download URLs.

Additional webhook events useful for CMS syncing include:

• payment.failed and invoice.past_due for updating payment status fields
• entry.created and entry.approved for managing waitlist CMS collections
• refund.created for marking orders as refunded and revoking access
• course_lesson_interaction.completed for tracking student progress

These events help keep Webflow CMS records accurate across payment status, waitlists, refunds, and student progress. The Whop webhooks guide covers the full event catalog, payload structure, and signature verification. Fulfill only on payment.succeeded, never on payment.created.

What can you build with the Whop Webflow integration?

Using Whop with Webflow gives you a way to pair a custom-designed site with checkout, memberships, and digital product delivery without building that infrastructure yourself.

• Course sales pages with embedded checkout: Build an SEO-optimized landing page in Webflow for an online course hosted on Whop. Embed the checkout form directly on the page so buyers purchase without leaving your site, then automatically gain access to course content and the bundled community on Whop.
• Paid community membership sites: Design a branded discovery and marketing site in Webflow, with Whop managing tiered subscription billing and gated community access. Visitors browse your public content on Webflow, subscribe through an embedded checkout, and get routed to Whop for forums, chat, live video, and member-only content.
• SaaS marketing sites with license delivery: Use Webflow for your product marketing pages, feature comparisons, and documentation. Whop handles software license key delivery, subscription management, and payment processing through embedded checkout or checkout links on your Webflow pricing page.
• Digital product storefronts with affiliate tracking: Sell templates, ebooks, or digital art from a Webflow portfolio site. Embed Whop checkout with affiliate attribution scripts so partners earn commission on referrals. Zapier syncs purchase data to a Webflow CMS collection for displaying recent sales or customer counts.

If you need more control over membership access verification or real-time CMS syncing after purchases, the API integration path covers those cases with full flexibility.