Square

How to integrate Square with Webflow

You can connect Square with Webflow in several ways.

Use third-party solutions like Foxy.io for full e-commerce functionality, code embeds to embed Square's widgets for appointments and payments, or Square's APIs to build custom integrations for advanced inventory synchronization and multi-channel selling.

Use third-party apps

Since Square doesn't provide an official Webflow app, third-party apps work as middleware between Webflow and Square.

Installing and setting up apps works best for businesses that need full e-commerce functionality with inventory sync but don't want to build custom integrations.

Foxy.io provides the most comprehensive integration and gives your site the following capabilities:

• Cart and checkout management: Processes payments through Square while maintaining Webflow's design
• Inventory synchronization: Updates stock levels between Square POS and your Webflow store
• Subscription billing: Handles recurring payments for membership sites
• Multi-currency support: Allows international transactions

To set up Foxy, create a Foxy account, connect your Square payment gateway, and embed Foxy's cart snippets into your Webflow project. This solution particularly benefits CBD retailers and other high-risk merchants who cannot use Stripe, subject to Foxy.io’s underwriting approval and compliance requirements.

For simpler needs, automation platforms provide basic connectivity:

• Zapier syncs new Square products to Webflow CMS collections
• Make.com handles order forwarding and inventory updates
• Make.com transfers booking data from Square Appointments to Webflow Forms

Use embed widgets and payment links

Square provides embeddable components that work directly in Webflow without coding. Add these through Webflow's Embed element by pasting Square's generated HTML code.

Code Embeds work best for businesses that want specific Square features (appointments, simple payments) directly on their Webflow site without complex e-commerce needs.

Embed Square Appointments

First, embed Square Appointments directly onto your Webflow site to provide users with a real-time booking experience.

Choose to embed Square Appointments instead of using Make.com when user experience and real-time availability are priorities. This integration works best for busy salons, consultancy firms, or service businesses where customers generally compare time slots.

The embed method prevents double-booking risks and keeps customers on your domain throughout the booking process, improving conversion rates for mobile users.

To embed Square Appointments booking:

1. Access Square Dashboard > Appointments > Online Booking > Channels > Get Started > Get URL
2. Copy the widget code with your business settings
3. Paste into a Webflow Embed element on your page
4. Style the container dimensions for responsive display (minimum 600px height recommended)

The widget shows real-time availability, staff selection, and service options. Bookings process entirely through Square's secure interface.

Embed Payment Links and buy buttons

Payment Links and buy buttons work best for simple one-off purchases or recurring subscriptions without complex product catalogs.

To add Payment Links and buy buttons:

• Generate payment links in Square Dashboard > Orders & payments > Payment links
• Choose between one-time payments or recurring subscriptions during setup
• Copy the generated HTML code to embed a button or direct link to embed a Payment Link
• Add to Webflow as Code Embed or paste the URL into button links

Add Square Online ordering links

Square Online ordering works for restaurants that already have their menu set up in Square and want to link customers to Square's ordering system rather than embedding checkout directly.

To link to Square Online ordering for restaurants:

• Link to your Square-hosted ordering page via a Webflow button or navigation link
• Display a custom menu preview using Webflow CMS and synchronize inventory via Square's Catalog API (optional advanced setup)
• Redirect customers to Square's secure checkout flow for order placement and payment

Build with Webflow and Square APIs

Direct Webflow API integration enables real-time inventory sync, custom checkout flows, and unified reporting across channels.

Setting up API integrations suits businesses needing granular control over data flow and user experience.

Square's API ecosystem includes the Catalog API for product management, Checkout API for payment processing, and Orders API for transaction handling.

Since Webflow doesn't execute backend code, you'll implement these through serverless functions or external servers.

Sync inventory between Square POS and Webflow

Automated inventory sync prevents overselling by keeping stock levels accurate across your physical and online stores.

This requires webhook setup to monitor Square inventory changes and API calls to update your Webflow CMS collections when products sell in-store.

Here’s how to set it up:

1. Set up webhook listeners using the Webhook Subscriptions API to monitor inventory changes
2. Map Square catalog to Webflow CMS by calling GET /v2/catalog/list to retrieve products
3. Update Webflow collections via Webflow's CMS API when stock changes
4. Handle variants by mapping Square's item variations to Webflow's multi-reference fields

This enables real-time updates when in-store sales affect online inventory, preventing overselling across channels.

Process payments with custom checkout

Custom checkout flows let you maintain complete design control over the payment experience while using Square's secure payment processing. This approach keeps customers on your Webflow site throughout the entire transaction.

Here’s how to build branded checkout experiences while leveraging Square's payment infrastructure:

1. Generate payment links dynamically using POST /v2/checkout/payment-links with order details
2. Embed Square's Web Payments SDK for on-page card collection that tokenizes data securely
3. Complete transactions by sending tokens to POST /v2/payments
4. Track orders through webhooks like payment.created and order.updated

This maintains PCI compliance while allowing full design control over the payment flow.

Automate multi-location operations

Multi-location automation helps businesses with multiple stores coordinate inventory and fulfillment from a single Webflow site.

This setup routes orders to the nearest location and keeps each store's inventory accurate.

Here’s how to coordinate inventory and fulfillment across multiple stores:

1. List all locations via GET /v2/locations
2. Route orders by proximity using location data and customer addresses
3. Sync location-specific inventory through POST /v2/inventory/changes/batch-create
4. Consolidate reporting by aggregating data from multiple location IDs

This creates unified operations while respecting location-specific pricing and availability.

What you can build

Integrating Square with Webflow opens possibilities for unified commerce experiences across digital and physical channels.

• Boutique retailers with pop-up shops: Maintain unified inventory between your Webflow storefront and Square POS for temporary locations, with real-time stock updates preventing overselling during events
• Service businesses with online booking: Embed Square Appointments directly in your Webflow site, allowing clients to book consultations, pay deposits, and receive automated reminders
• Restaurants with takeout ordering: Display your Square menu catalog on Webflow with dynamic pricing, accept online orders, and process payments while maintaining kitchen workflow integration
• CBD and high-risk merchants: Use Foxy.io's Square integration to process payments for products that Stripe won't support while maintaining Webflow's design flexibility