Foxy

Webflow handles site design, CMS content, and hosting, but lacks built-in support for custom-frequency subscriptions, 100+ payment gateways, or PCI-compliant checkout for bundles, donations, and digital downloads. Teams needing this either adopt Webflow Ecommerce or add an external checkout layer.

Foxy provides that layer via embedded links and forms. Products live in Webflow CMS, while Foxy handles transactions on its PCI DSS Level 1 infrastructure — card data never touches Webflow.

It suits freelancers, agencies, and teams selling physical goods, digital products, subscriptions, or donations needing flexible variants, recurring billing, or multi-currency support.

How to integrate Foxy with Webflow

What is Foxy? Foxy is a hosted cart and checkout platform that adds e-commerce to existing websites. It supports physical products, digital goods, subscriptions, donations, bundles, and event tickets with over 100 payment gateways, including Stripe, PayPal, Square, and Apple Pay. Foxy holds PCI DSS Level 1 Service Provider certification, the highest level of PCI compliance available.

Teams use Foxy with Webflow when they need checkout capabilities that go beyond standard product sales like recurring billing at custom frequencies, real-time variant pricing, product bundles, or multi-currency support across localized Webflow sites. Because Foxy replaces Webflow's native e-commerce checkout entirely, a Webflow Ecommerce plan is not required.

The Foxy-Webflow integration supports 3 approaches:

• Custom code embeds handle product links, add-to-cart forms, and CMS-driven product pages without server-side development.
• Zapier lets you sync Foxy transaction data with Webflow CMS items and route order information to other tools.
• The Webflow and Foxy APIs give you full control over inventory sync, price validation, and order data pipelines, but require server-side development.

Most implementations combine custom code with either automation or API work depending on the complexity of the setup. This gives teams a clear path based on implementation complexity.

Add Foxy cart and checkout with custom code

This approach uses Foxy's loader.js script and embedded HTML to turn any Webflow element into a purchase trigger. It covers everything from single buy buttons to full CMS-powered product catalogs with variants and inventory tracking. All methods below require a paid Webflow site plan to add custom code in head and body tags, but a Webflow Ecommerce plan is not needed. Foxy maintains a complete Webflow documentation library covering each of these paths.

Every Foxy + Webflow setup starts with the loader script installation:

1. In the Foxy admin panel, go to Settings → Website & Products and copy the loader.js snippet.
2. In Webflow, open Site settings → Custom Code → Footer Code, paste the snippet, and click Save Changes.
3. Publish the site.

The loader script activates Foxy's slide-in cart on every page. From here, three sub-methods handle different product complexity levels.

Create purchase buttons for static products

For products with no options or variants, a simple link is the fastest approach. Any Webflow element — button, link block, image, or text — can become a purchase trigger by pointing its URL to the Foxy cart endpoint. Foxy's purchase button guide covers this method in detail.

To create a purchase button:

1. Add a Button or Link Block element to your page in Webflow.
2. Set the URL to https://YOURSUBDOMAIN.foxycart.com/cart?name=Product+Name&price=29.99, replacing YOURSUBDOMAIN with your Foxy store subdomain.
3. Publish the site — clicking the button opens Foxy's slide-in cart with the product added.

The URL accepts additional parameters including image, quantity, and code for SKU tracking. This method works for landing pages, one-product sites, or any context where product data is static.

Create purchase forms with product options

When products have options like size, color, or quantity, Webflow's Form Block replaces the simple link approach. The form submits product data to Foxy's cart endpoint as a POST request, and Code Embed elements hold hidden input fields for product metadata. The full setup is documented in Foxy's purchase form guide.

To set up a purchase form:

1. Add a Form element to your page in Webflow.
2. In Form Settings, set Action to https://YOURSUBDOMAIN.foxycart.com/cart and Method to POST.
3. Add visible fields for customer-facing options like quantity (set the field Name to quantity, Text Type to Number).
4. Inside the form, add an HTML Embed element containing hidden inputs for product data:

<input type="hidden" name="name" value="Product Name">
<input type="hidden" name="price" value="29.99">
<input type="hidden" name="image" value="https://example.com/product.jpg">
<input type="hidden" name="code" value="SKU123">



5. Publish and test — submitting the form adds the product to Foxy's cart.

Customer billing and payment information is collected on Foxy's hosted checkout page, not on the Webflow form. This keeps the Webflow form focused on product and option selection.

Manage products with Webflow CMS

For stores with multiple products, Webflow CMS provides the product catalog while Foxy handles transactions. This is Foxy's recommended approach — it avoids the need for a Webflow Ecommerce plan and gives full CMS flexibility.

To build CMS-powered product pages:

1. Create a CMS Collection (for example, "Products") with fields for Name (plain text), Price (number), Image (image), and Code/SKU (plain text).
2. Add product entries to the collection.
3. Create a Collection List or CMS template page and add a Form element with the cart endpoint as the action URL.
4. Inside the form, add a Code Embed element with hidden inputs that bind to CMS fields:

<input type="hidden" name="name" value="PRODUCT NAME FROM CMS">
<input type="hidden" name="price" value="PRICE FROM CMS">
<input type="hidden" name="image" value="IMAGE URL FROM CMS">
<input type="hidden" name="code" value="SKU FROM CMS">



5. Publish — each CMS product page now has a working add-to-cart form connected to Foxy.

Foxy also provides a free cloneable Webflow template that demonstrates this setup with a live storefront.

For products with variants like size and color, Foxy supports two approaches. The standard variant method uses comma-separated CMS text fields bound to select dropdowns via a JavaScript snippet. The advanced variant method creates a separate Variants CMS Collection with per-variant pricing, images, inventory, and SKUs linked through multi-reference fields.

Because Webflow CMS cannot generate HMAC-signed values for dynamic product data, price tampering is a risk without additional validation. Foxy recommends setting up a pre-payment webhook — either through a Netlify serverless function or Foxy Automations — to verify prices against CMS data before completing each transaction.

Additional capabilities available through custom code include:

• A mini-cart element showing real-time item count and order total using data-fc-id custom attributes
• Custom cart, checkout, and receipt templates built as Webflow pages and loaded into Foxy's template system
• An embeddable customer portal where customers view orders, manage subscriptions, and update billing information
• Native inventory management through Foxy's built-in Webflow webhook that decrements stock counts in CMS after each purchase
• Multilingual and multi-currency support using Webflow Localization with Foxy template sets (requires Foxy Growth plan or above)

These options let you extend a basic add-to-cart setup without changing the overall integration model.

The inventory integration requires a code field and an inventory number field (with negative numbers enabled) in the Products CMS Collection. All tracked products must live in a single collection.

Connect Foxy and Webflow with Zapier

Automation platforms bridge Foxy's transaction data with Webflow CMS and other tools without custom server-side code. Zapier offers a native Foxy.io connector with a dedicated Webflow + Foxy.io integration page.

Available Zapier triggers and actions for this pair include:

• Foxy trigger: New Transaction Event → Webflow action: Create Item (log orders in a CMS Collection)
• Foxy trigger: New Customer Event → Webflow action: Create Item (build a customer directory)
• Foxy trigger: Subscription Webhook Event → Webflow action: Update Item (track subscription status changes)

These examples cover the most common no-code sync patterns between Foxy and Webflow. Note that a separate Zapier entry called "FoxyApps" exists and is a different product from Foxy.io. Verify you are working with the Foxy.io connector when building Zapier automations.

Build with the Webflow and Foxy APIs

For full control over inventory sync, price validation, order logging, and subscription lifecycle tracking, the API approach connects Foxy's Hypermedia API with Webflow Data API through server-side middleware. This path requires a developer comfortable with OAuth 2.0 authentication, REST endpoints, and webhook handling.

Three APIs are involved:

• The Foxy Hypermedia API (hAPI) handles transactions, customers, subscriptions, and store configuration through a HATEOAS-based REST interface with OAuth 2.0 authentication
• Webflow's Data API v2 handles CMS collections and items, including reading product data and writing inventory updates
• Foxy webhooks and Webflow webhooks trigger real-time events between systems — Foxy fires events like transaction/created and subscription/cancelled, while Webflow fires events like collection_item_changed

Together, these APIs cover the read, write, and event layers needed for a custom integration. An interactive API browser is available for exploring the resource structure.

The Foxy hAPI uses HATEOAS navigation — instead of hardcoding URLs, your code follows _links in each response starting from the store entry point. An interactive API browser is available for exploring the resource structure.

Sync inventory after purchase

The most common API integration pattern decrements Webflow CMS inventory counts when Foxy completes a transaction. This requires a middleware service (running on Netlify, Vercel, or a similar platform) that receives Foxy's webhook and updates Webflow via API.

To implement inventory sync:

1. Create a Foxy webhook with format: "json", the transaction/created event, and a zoom query of items,items:options to include line item data in the payload.
2. In your middleware, validate the incoming webhook using the Foxy-Webhook-Signature header (HMAC SHA256 of the raw body against your encryption key).
3. For each line item, match the product_code to the corresponding Webflow CMS item using documented Webflow Data API item endpoints for your collection.
4. Decrement the inventory field using PATCH /v2/collections/{collection_id}/items/{item_id} with the new quantity.
5. Publish the updated items with POST /v2/collections/{collection_id}/items/publish.

The Webflow API requires a Site Token generated in Site settings → Apps & Integrations → API Access. Minimum scopes for this pattern are cms:read and cms:write. This pattern connects completed Foxy transactions back to the Webflow CMS catalog.

Validate prices before checkout

Price validation prevents tampering with CMS-sourced product data that cannot be HMAC-signed in Webflow. Foxy's pre-payment webhook calls your middleware endpoint before processing payment.

To implement price validation:

1. Deploy a serverless function (Netlify is documented in Foxy's guide) with environment variables for your Webflow API token and CMS Collection ID.
2. When the function receives a pre-payment webhook from Foxy, extract each cart item's product_code and product_price.
3. Call Webflow's CMS API to fetch the corresponding item and compare the submitted price against the stored CMS price.
4. Return a success or failure response — Foxy blocks the transaction if the prices don't match.
5. In the Foxy admin, go to Settings → Payments → enable custom pre-payment hook and paste your function's endpoint URL.

This adds a validation layer before payment is completed.

Alternatively, Foxy Automations provides a workflow-based approach to price validation that avoids deploying a separate serverless function. This feature requires adding a hidden slug field to your add-to-cart form and importing a pre-built workflow configuration.

What can you build with the Foxy Webflow integration?

Integrating Foxy with Webflow lets you sell products, subscriptions, and digital goods through a PCI-compliant checkout without replacing your Webflow site or adopting a separate storefront platform.

• Subscription membership sites: Build a Webflow site with gated content areas and recurring billing at any frequency. CivilGG runs subscription-based gaming strategy guides using Foxy subscriptions, a Webflow CMS catalog, and an embedded customer portal where members manage their accounts.
• Product configurators with real-time pricing: Create product pages where customers select from unlimited variant groups and see prices update in real time. Velographs uses this pattern for custom cycling maps — customers configure their map through a visual interface built in Webflow, and Foxy calculates the final price based on selected options.
• Print-on-demand storefronts: Sync Printful product data into Webflow CMS via Byteline, display products on Webflow pages, and route completed Foxy transactions to Printful for automatic fulfillment. Foxy's Webflow + Printful guide walks through the full setup including chained variant functionality.
• Donation pages with recurring options: Design branded donation pages in Webflow with preset and custom amounts, recurring cadences, and designation fields. Foxy handles one-time and recurring donation processing with memorial and honorary gift options built into the checkout.

If you need more control over inventory sync pipelines, subscription lifecycle events, or multi-system order routing, the API integration path covers those cases with full flexibility.