Square

Integrating Square with Webflow lets you embed payment buttons and booking widgets on your pages, automate data flows between platforms, and build fully custom checkout experiences that keep visitors on your site. Square handles payment processing, catalog management, and appointment scheduling, while Webflow handles frontend design, content management, and hosting.

This is most relevant to service businesses that take bookings, retailers syncing inventory between a physical store and a Webflow storefront, and agencies building client sites where Square is already the payment processor — bridging systems that otherwise stay siloed since Webflow's native checkout only supports Stripe and PayPal.

How to integrate Square with Webflow

What is Square? Square is a payment processing and commerce platform that handles in-person and online transactions, appointment scheduling, invoicing, and inventory management. It provides a suite of APIs and embeddable components that developers and business owners can use to add payment and booking functionality to external websites. Square accepts all major credit and debit cards, Apple Pay, Google Pay, Afterpay, ACH bank transfers, and Cash App Pay.

Businesses typically connect Square with Webflow when they need to accept payments or bookings on a custom-designed site while keeping their existing Square account as the backend system of record. This is common for retailers who use Square POS in a physical store and want their Webflow storefront to reflect the same inventory, or for service providers who need clients to book appointments without leaving the website.

The Square-Webflow integration supports 3 approaches:

• Square embed components let you add payment buttons, buy buttons, and appointment booking widgets to any Webflow page using copy-paste HTML.
• Automation platforms support explicit Square-to-Webflow and Webflow-to-Square workflows, such as creating Webflow items from Square events or turning Webflow leads into Square customers.
• The Webflow and Square APIs give you full control over catalog sync, custom checkout, and real-time order management, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add Square components with Code Embed elements

Square generates embeddable HTML snippets for payment buttons, buy buttons, donation links, and appointment booking widgets. You paste these directly into Webflow using Code Embed elements. No backend code is needed . Square hosts the checkout or booking flow, and your Webflow page acts as the entry point. This method works for any business that needs a quick way to collect payments or bookings without building a custom integration. A paid Webflow site plan is required for embed methods since custom code is unavailable on the free Starter plan.

There are four embed options available, each suited to a different use case:

• Payment links and buy buttons that redirect visitors to Square-hosted checkout
• Donation links with optional goal tracking and recurring donation support
• Appointment booking widgets that open Square's scheduling flow from your page
• Styled booking buttons with custom colors, text, and shape

Each component works the same way on the Webflow side — you drag a Code Embed element onto the page and paste the HTML that Square generates.

Embed a payment link or buy button

Payment links create a direct path from your Webflow page to a Square-hosted checkout. Visitors click a button and complete their purchase on Square's checkout page, which supports credit cards, Apple Pay, Google Pay, and Afterpay. You generate the embeddable HTML in the Square Dashboard and customize the button's appearance — text, color, shape, and font — in Square's branding settings.

To add a buy button to your Webflow page:

1. In the Square Dashboard, go to Payments & orders > Payment links > Payment links and click Create link
2. Set the product name, price, and description, then customize the button appearance in Branding settings
3. Copy the generated HTML snippet
4. In Webflow, drag a Code Embed element onto your page and double-click to open the code editor
5. Paste the Square HTML, click Save & Close, and publish your site

Square generates a unique HTML snippet for each payment link. The embed renders only after publishing — Webflow does not display custom code in the canvas during editing.

Embed a donation link

Donation functionality uses the same Payment Links system but adds options for donation goals, recurring schedules, and custom data fields. Nonprofits and community organizations that already use Square for in-person fundraising events can extend the same processor to their Webflow donation page, keeping all donor data in one Square Customer Directory.

To create and embed a donation link:

1. In the Square Dashboard, go to Payments & orders > Payment links > Create link
2. Select Accept a donation and click Continue
3. Set the title, frequency (one-time or recurring), and optionally enable a donation goal with a deadline
4. Click Save, then copy the generated link or HTML embed code
5. In Webflow, paste the HTML into a Code Embed element or use the link URL on any button element

You can also configure a post-checkout redirect URL that sends donors to a custom thank-you page on your Webflow site.

Embed the Square Appointments booking widget

Square Appointments provides an embeddable booking widget that lets clients start the scheduling flow from your Webflow page. Two embed formats are available — an inline widget that renders on the page (requires a container height of at least 600px) and a button that opens the booking flow in a new tab. When clients interact with either format, they are taken to a flow in another tab or window to complete the booking.

To embed the booking widget:

1. In the Square Dashboard, go to Appointments > Online Booking > Channels
2. Under "Add your booking flow to an existing site," click Get Started > Get embed code
3. Select your location (if you have multiple) and copy the HTML code
4. In Webflow, drag a Code Embed element onto your page, paste the HTML, and set the container height to at least 600px for the inline version
5. Publish your site

For a styled booking button with custom colors and text, go to Appointments > Create Button in the Square Dashboard instead. This generates a separate HTML snippet that opens booking in a new window when clicked.

Link to your Square Online store

The simplest approach requires zero code and works on any Webflow plan, including free. Your Webflow site serves as the primary brand experience, and navigation links direct visitors to your Square Online storefront for product browsing and checkout.

To set this up:

1. Add a button or text link element to your Webflow page
2. In the settings panel, paste your Square Online store URL into the link field
3. Set the link to open in a new tab and publish

This method is best when you maintain a full product catalog on Square Online and want your Webflow site to handle marketing content and brand presentation separately.

Connect Square and Webflow with automation platforms

Automation platforms bridge the gap between Square and Webflow without requiring code. These tools handle backend data flows tied to explicit Square↔Webflow templates, scenarios, modules, triggers, and actions rather than embedding payment forms on your pages. Use this method alongside the embed approach when you want Square events to automatically create or update content in your Webflow CMS.

Zapier provides named Square↔Webflow templates, and Make provides a dedicated Square + Webflow integration page for scenarios that pair Square modules with Webflow modules.

Set up a Zapier automation

Zapier includes pre-built Square↔Webflow templates that connect a named event in one platform to a named update in the other so records can be created or updated automatically.

To create a Zap:

1. Sign in to Zapier and click Create Zap
2. Choose Square and Webflow for the two connected apps
3. Select a Square-to-Webflow or Webflow-to-Square workflow and map the relevant fields
4. Test the connection
5. Turn the Zap on

Available pre-built templates include:

• Update Webflow items when new Square appointments are created
• Create Webflow live items for new Square appointments
• Create live items in Webflow for new orders in Square
• Add new Square customers and create corresponding items in Webflow
• Create Webflow live items for new Square payments
• Turn new Webflow leads into Square customers
• When a payment is completed in Square, update the relevant order in Webflow

These named templates give you a faster starting point than building each workflow from scratch. A Webflow form submission can also trigger Square customer creation, closing the gap between website lead capture and invoicing.

Set up a Make scenario

Make provides a dedicated Square + Webflow integration page for scenarios that combine Square modules with Webflow modules.

To create a scenario:

1. Sign in to Make and create a new scenario
2. Add a Square module and a Webflow module
3. Configure the field mapping between Square event data and your Webflow CMS collection schema
4. Set the scenario schedule and activate it

Make supports scenarios that use Webflow modules for CMS collections, products, orders, inventory, assets, and pages alongside Square modules.

Build with the Webflow and Square APIs

For full control over checkout, catalog sync, and order management, the API approach gives you direct access to both platforms' data and event systems. This method requires server-side development because Webflow hosts static files only — all Square API calls that require secret tokens must go through an external backend such as Vercel, Netlify Functions, AWS Lambda, or Cloudflare Workers. Direct browser-to-Square API calls fail due to CORS restrictions and the requirement to keep access tokens out of client-side code.

The APIs relevant to this integration include:

• Square's Payments API, Catalog API, Bookings API, and Customers API handle payment processing, product data, scheduling, and customer records
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks and Square webhooks trigger real-time events between systems

Every API integration follows the same general pattern: a Square webhook fires, a serverless function receives it, verifies the signature, checks for duplicate deliveries using the event_id field, transforms the data, and writes to the Webflow CMS API. Square webhooks can be delivered more than once, so idempotency checks are required.

Sync the Square product catalog to Webflow CMS

This pattern keeps your Webflow CMS in sync with product data managed in Square. When a product is created or updated in the Square Dashboard, a catalog.version.updated webhook fires. The payload contains only a timestamp — not the changed objects — so your serverless function must follow up with a call to Square's Catalog API to fetch the actual changes.

To implement catalog sync:

1. Register a webhook subscription in the Square Developer Console for the catalog.version.updated event, pointing to your serverless function URL
2. In the function, call GET /v2/catalog/list or POST /v2/catalog/search to retrieve updated catalog objects, and optionally call the Inventory API for stock counts
3. Map Square fields to your Webflow CMS collection schema — item name to name, description to a rich text field, price to a number field, and image URL to an image field
4. Write to Webflow using POST /v2/collections/{collection_id}/items/live for new items or PATCH /v2/collections/{collection_id}/items/live for updates

Be aware of CMS item limits when planning catalog sync. The CMS plan supports 2,000 items and Business supports 10,000. Merchants with larger Square catalogs need a Business plan or higher to hold the full product set.

Process payments with the Web Payments SDK

The Web Payments SDK renders a secure card entry form directly on your Webflow page and produces a single-use payment token. Raw card numbers never touch your site or backend — Square's tokenization maintains PCI compliance. The token must then be sent to your serverless backend, which calls POST /v2/payments to complete the charge.

To implement on-page payments:

1. Add the Square SDK script to your page by going to your page settings and pasting the script tag in the custom code in the head section — use https://web.squarecdn.com/v1/square.js for production or https://sandbox.web.squarecdn.com/v1/square.js for testing
2. Add a Code Embed element to your page body containing a <div id="card-container"></div> and a <button id="card-button">Pay</button> element
3. Write JavaScript that initializes the SDK, renders the card form into the container, and on button click, tokenizes the card data and sends the token to your serverless function
4. In the serverless function, call POST /v2/payments with the source_id (the token), amount_money, and location_id to complete the payment
5. Listen for payment.created and payment.updated webhooks to confirm the transaction and update Webflow CMS records

This is the only method that keeps visitors fully on your Webflow site during payment. All other embed methods redirect to Square-hosted pages.

Sync customers and orders in real time

Square fires webhook events for customer.created, customer.updated, order.created, and order.fulfillment.updated. Your serverless function receives these events and writes the data to Webflow CMS collections. The customer webhook payloads include the full customer object, so no follow-up API call is needed. Order webhooks require a follow-up GET /v2/orders/{order_id} call to retrieve line items and fulfillment details.

To implement customer and order sync:

1. Register webhooks for customer.created, order.created, and order.fulfillment.updated in the Square Developer Console
2. In your serverless function, verify the webhook signature and check the event_id for duplicates
3. For order events, filter by state == "OPEN" before writing to Webflow — order.created can fire with a DRAFT state before payment is complete
4. Write to Webflow CMS using POST /v2/collections/{collection_id}/items/live for new records or PATCH /v2/collections/{collection_id}/items/{item_id}/live for updates

This real-time sync keeps your Webflow site's CMS data current without manual exports or scheduled batch jobs.

What can you build with the Square Webflow integration?

Integrating Square with Webflow lets you accept payments, manage bookings, and display live product data on a custom-designed site without abandoning your existing Square account.

• Service booking pages: Embed the Square Appointments widget on a salon, fitness studio, or consulting site so clients can select services, pick time slots, and pay deposits — all from a dedicated booking page designed in Webflow. Zapier can then create CMS items for each new appointment, building an internal log that staff can review.
• Retail storefronts with inventory sync: Build a product catalog in Webflow CMS that stays current with your Square POS. A serverless function listens for catalog and inventory webhooks, updates CMS items when prices or stock levels change, and ensures your online store reflects what is actually available in your physical location.
• Donation and fundraising pages: Add a Square donation button to a nonprofit's Webflow site with support for one-time and recurring contributions, donation goals with deadline tracking, and a post-checkout redirect to a custom thank-you page. All donor data flows into Square's Customer Directory alongside in-person event donations.
• Lead-to-invoice pipelines: Capture project inquiries through a Webflow form, use Zapier to create a customer record in Square automatically, and send a branded invoice from Square — all without re-entering contact details. This is especially useful for consultants, agencies, and home service providers where speed to invoice affects conversion.

If you need more control over multi-location routing, custom checkout styling, or real-time order management, the API integration path covers those cases with full flexibility.