Gumroad

Webflow handles layout, content, and hosting, but it does not include built-in tools for selling digital downloads, generating license keys, or delivering files after purchase. Creators who sell ebooks, templates, courses, or software need a separate checkout and fulfillment layer that Webflow does not provide on its own.

Connecting Gumroad with Webflow gives you a digital product storefront without building custom e-commerce infrastructure. You embed Gumroad's checkout directly on your Webflow pages, so visitors can buy without leaving your site. Gumroad handles payments, file delivery, tax collection, and license key generation while Webflow controls the design and content experience.

This integration is most useful for independent creators, designers selling UI kits or Webflow templates, course creators who want branded landing pages, and software developers distributing tools with license key protection. Agencies that productize client deliverables and marketplace builders using the CMS to power product catalogs also benefit from this setup.

How to integrate Gumroad with Webflow

What is Gumroad? Gumroad is an e-commerce platform for selling digital and physical products directly to an audience. It supports one-time payments, subscriptions, memberships, and license key generation. Gumroad operates as a merchant of record, handling all global sales tax, VAT, and GST collection automatically.

Creators pair Gumroad with Webflow when they want full control over their site's design and SEO while offloading checkout, file delivery, and payment processing to a dedicated platform. This combination works well for product catalogs built with the CMS, single product landing pages, and sites that sell across multiple product types.

The Gumroad-Webflow integration supports 3 approaches:

• Gumroad embed widgets and direct links let you add checkout buttons, inline product displays, or simple links to any Webflow page without writing backend code.
• Zapier automation connects Gumroad sale events to Webflow CMS actions, creating or updating items automatically when purchases happen.
• The Webflow and Gumroad APIs give you full control over product syncing, purchase-triggered CMS writes, and license key verification, but require server-side development.

Most implementations combine embed widgets for the storefront with an automation tool or API integration for post-purchase workflows.

Add Gumroad products with Embed elements

Gumroad provides two embed methods — an overlay popup and an inline widget — plus a direct link option that works on any Webflow plan. Both embed methods use the Embed element in Webflow to place Gumroad's checkout code on your pages. The overlay opens a modal on your page while the inline widget renders the full product card. In all cases, checkout completes on Gumroad's domain. You cannot customize the checkout page CSS or process payments on your own site.

Gumroad's official embed documentation explicitly names Webflow as a supported platform. Before choosing a method, note that embed methods require access to Webflow's Code Embed element. Per Webflow's documentation, that is available with certain paid workspaces or an active site plan. Free plans only support the direct link approach.

Overlay widget (modal popup)

The overlay method adds a button to your Webflow page that opens a Gumroad checkout popup when clicked. Visitors stay on your site throughout the process.

To add an overlay button:

1. Log into Gumroad and go to the widgets page.
2. Select "Modal Overlay," choose your product, and optionally edit the button text or toggle "Send directly to checkout page" to skip the product description.
3. Click "Copy embed code." The code includes a <script> tag and an <a> tag.
4. In Webflow, click "+" in the left panel and drag a Code Embed element to your page.
5. Paste the copied code into the code editor and click "Save & Close."
6. Publish your site. The embed only renders on the published or staged site, not inside Webflow.

If you want to style the button yourself, remove the gumroad-button class from the <a> tag and apply your own Webflow classes to a surrounding div.

When placing multiple Gumroad buttons on a single page, include the <script> tag only once. Loading it multiple times causes stacked popups on a single click. The correct approach is to add the script once in your site-wide head code under Site settings > Custom Code > Head Code, then place only the <a> tag in each individual Code Embed element.

Inline embed widget

The inline embed renders the full Gumroad product card — image, description, price, and an Add to Cart button — directly on your page. Clicking Add to Cart still redirects to Gumroad's checkout.

To add an inline embed:

1. Go to the Gumroad widgets page and select "Embed."
2. Choose the product from the dropdown and click "Copy embed code."
3. In Webflow, drag an Embed element (< >) to your page and paste the code.
4. Click "Save & Close" and publish.

Content inside the Gumroad iframe is attributed to Gumroad's domain for SEO purposes. Write original product descriptions and metadata directly in Webflow surrounding the embed to capture search value on your own domain. Reserve fixed dimensions for the embed container to prevent layout shifts that affect Core Web Vitals.

Direct product link (no code required)

The simplest option links any Webflow element to a Gumroad product URL. This works on every Webflow plan, including free.

To link a button to a Gumroad product:

1. Copy your Gumroad product URL (e.g., https://yourname.gumroad.com/l/productname).
2. In Webflow, select a Button or Link element.
3. In the Settings panel, set the Link field to URL and paste the Gumroad URL.
4. Optionally toggle Open in new tab.
5. Publish your site.

This method sends visitors directly to Gumroad's hosted product page and is the fastest setup on any Webflow plan.

Using embeds with Webflow CMS Collection Lists

When building a product catalog with Webflow CMS, you can add a Gumroad product URL field to your Collection and reference it dynamically inside a Collection List.

To set this up:

1. Add a Plain Text or Link field called "Gumroad URL" to your CMS Collection.
2. Populate each CMS item with its corresponding Gumroad product URL.
3. Place the Gumroad JavaScript once in Site settings > Custom Code > Head Code:

  <script src="https://gumroad.com/js/gumroad.js"></script>



4. Inside your Collection List, add a Code Embed element with only the <a> tag, referencing the CMS field for the href value.

Never include the <script> tag inside a Collection List item. The script loads once per item, causing overlay errors on pages with multiple products. The CMS plan supports up to 2,000 items per Collection, and the Business plan supports up to 10,000.

Connect Gumroad and Webflow with Zapier

Automation platforms can bridge the gap between Gumroad sale data and Webflow CMS updates without requiring custom code. Zapier supports a direct Gumroad-to-Webflow connection. This is most useful when you want to log purchases as CMS items or trigger related workflows from sale data.

Zapier supports direct Gumroad trigger → Webflow action workflows such as:

• Gumroad Sale → Webflow Create Item
• Gumroad Sale → Webflow Create Live Item
• Gumroad Cancellation → Webflow Update Item
• Gumroad Refund → Webflow Update Live Item
• Gumroad Sale → Webflow Find Item

A common workflow maps a Gumroad Sale trigger to a Webflow Create Live Item action, writing the buyer's email, product name, and purchase date into a Webflow CMS Collection.

To set up a Zapier workflow:

1. Create a new Zap and select Gumroad as the trigger app.
2. Choose a Gumroad trigger such as Sale, then select Webflow as the action app.
3. Choose a Webflow action such as Create Live Item.
4. Map Gumroad's email, product_name, and price fields to your Webflow CMS Collection fields.
5. Test and enable the Zap.

No pre-built Zap templates were listed on Zapier's Gumroad–Webflow integration page at time of writing, so you may need to build the workflow manually. Zapier requires its own account and may have usage limits on its free tier.

Build with the Webflow and Gumroad APIs

For full control over data flow between Gumroad and Webflow, you can connect both platforms' APIs through a serverless middleware layer. This approach handles use cases that automation tools cannot, such as real-time license key verification, conditional CMS writes based on subscription status, and revenue dashboards populated from sale data. It requires server-side development using a platform like Vercel, Netlify Functions, or AWS Lambda, since Webflow does not execute server-side code.

The relevant APIs are:

• The Gumroad API handles product data, sales records, subscriber lookups, license verification, and webhook subscriptions
• Webflow's Data API handles CMS Collections and site publishing
• Gumroad's webhook system triggers real-time events for sales, refunds, disputes, cancellations, and subscription changes

Gumroad uses OAuth 2.0 authentication. Per the official API documentation, you register an OAuth application at https://app.gumroad.com/settings/advanced#application-form, receive an application id and application secret, then click "Generate access token" on the application page. The one exception is POST /v2/licenses/verify, which requires no authentication at all.

Sync purchases to the CMS with webhooks

Gumroad webhooks send a POST request to your endpoint whenever a sale, refund, or subscription event occurs. You can register up to 8 event types — sale, refund, dispute, dispute_won, cancellation, subscription_updated, subscription_ended, and subscription_restarted — each requiring a separate registration call.

To set up webhook-to-CMS syncing:

1. Register a webhook subscription by sending a PUT request to https://api.gumroad.com/v2/resource_subscriptions with your access_token, the resource_name (e.g., sale), and a post_url pointing to your serverless function endpoint.
2. In your serverless function, parse the incoming POST body as application/x-www-form-urlencoded (not JSON). Extract fields like email, product_name, price, and sale_id.
3. Call Webflow's CMS API at POST /v2/collections/{collection_id}/items to create a new item, mapping Gumroad fields to your Collection's field names.
4. Return a 200 status immediately to avoid retries. Gumroad retries non-200 responses once per hour for up to 3 hours.

Use sale_id or subscription_id as an idempotency key to prevent duplicate CMS entries on retried webhook deliveries. For the simplest account-level setup, you can also configure a Ping URL under Settings > Advanced in Gumroad, which fires on every sale across all products without requiring API credentials.

Verify license keys for content gating

The POST /v2/licenses/verify endpoint is the lowest-friction API starting point because it requires no OAuth setup. It accepts a product_id and license_key and returns a success: true/false response with the buyer's email and purchase details.

To implement license-gated access:

1. Create a form on your Webflow page where users enter their license key.
2. On form submission, send the key to a serverless function that calls POST https://api.gumroad.com/v2/licenses/verify with the product_id and submitted license_key.
3. If the response returns success: true, set a session cookie or JWT in the user's browser and redirect to the gated content.
4. Set increment_uses_count to false for recurring page-load checks so the use count does not inflate on every visit.

Use product_id (not product_permalink) for any product created after January 9, 2023. This pattern works well for software tools, premium templates, and course content where you need to verify a buyer's access without managing a full user database.

What can you build with the Gumroad Webflow integration?

Integrating Gumroad with Webflow lets you sell digital products from a custom-branded site without building payment, delivery, or tax infrastructure.

• CMS-powered product catalog: Build a digital product marketplace using Webflow CMS Collections for product listings with filters, categories, and preview images. Each item links to a Gumroad overlay checkout. Gumroad handles payment and file delivery while Webflow controls the browsing experience.
• Course landing page with license-gated access: Design a branded course page in Webflow with curriculum details, testimonials, and an enrollment button connected to Gumroad. After purchase, buyers receive a license key they enter on a verification page to access course content, replacing the need for a dedicated course platform.
• Webflow template storefront: Sell Webflow templates through Gumroad using template fulfillment links. Buyers purchase on Gumroad and receive a link that installs the template directly into their Webflow Workspace. This lets you distribute templates on both your own site and Gumroad's marketplace simultaneously.
• Subscription membership with automated CMS sync: Set up a membership product on Gumroad and use Zapier or a webhook integration to write subscriber records into a Webflow CMS Collection. When a subscriber cancels or their subscription ends, the automation updates their CMS record, giving you a real-time member directory on your site.

If you need more control over subscription state management or conditional content access, the API integration path covers those cases with full flexibility.