Xero

Ecommerce takes orders and forms capture leads; Xero keeps the books. Completed orders require separate accounting records and bank reconciliation in Xero. Someone re-keys customer details and order totals into Xero by hand, and the two systems drift apart.

Connecting Xero and Webflow routes site events into Xero and can also send accounting updates back to the site. A Stripe feed in Xero imports the payments behind your store, while automation tools or direct API integrations create the matching sales and customer records.

This setup suits agencies that bill from proposal forms and Webflow Ecommerce merchants who reconcile Stripe payouts. It fits subscription sites that publish content once an invoice is paid. Bookkeepers and operations leads can run the Zapier or Make path without writing code. Developers who need line-item control build on the Webflow Data API and the Xero Accounting API.

How to integrate Xero with Webflow

What is Xero? Xero is cloud-based accounting software for small businesses. It covers invoicing and quotes, bank feeds and reconciliation, bill payments, expense claims, inventory, and reporting. The Xero Accounting API exposes contacts, invoices, quotes, payments, and items to outside systems.

Teams pair the two when the site handles sales or lead capture, and Xero serves as the ledger. Common triggers include a Webflow Ecommerce order or a quote request form. A project milestone stored as a Webflow CMS item can also start the flow. The accounting side then needs a contact plus the appropriate invoice or quote, with payment recorded without re-entry. Xero has no app in the Webflow Apps Marketplace, so every route below runs through an agent, an automation platform, or your own code.

The Xero-Webflow integration supports four approaches:

• The Xero and Webflow MCP servers let an AI agent read and draft records in both systems on request, with a person approving anything that reaches the ledger.
• Xero online invoice links and a Stripe feed add a Pay now route to a Webflow page and import Webflow Ecommerce Stripe payments into Xero without writing code.
• Zapier, Make, and n8n connect Webflow triggers such as new orders and form submissions to Xero actions such as Create Sales Invoice.
• The Webflow and Xero APIs give you full control over contact, invoice, payment, and CMS sync, but require server-side development.

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

Connect the Xero and Webflow MCP servers

Xero publishes an open-source Xero MCP server, and Webflow runs its own Webflow MCP server. Add both to one MCP client and an agent can work across the two when you ask it to. It can read quote request submissions from a Webflow form, find or create the Xero contact, and draft the quote. In the other direction, it can list paid invoices in Xero and update the matching Webflow CMS items.

The Xero server's invoice and quote tools create records in Draft status, so a person still approves each one in Xero before it reaches the customer or the ledger. The server runs locally through npx and authenticates with either a Custom Connection or a bearer token from your own OAuth flow. Test it against the Xero Demo Company first, which Custom Connections can use for free. Webflow's MCP tools reference covers CMS items and form submissions but lists no Ecommerce order tools, so unattended order-to-invoice sync belongs on the automation or API routes below.

Link Xero invoices and Stripe payments from Webflow

Xero can share a link to any online invoice, quote, or credit note. Placing that link behind a Webflow button sends a customer to Xero's online invoice, where they can pay, with no code and no middleware. Store payments need no middleware either: a Stripe feed in Xero imports the Stripe transactions behind your Webflow Ecommerce orders. Neither path creates the invoice for you, so both depend on records that already exist in Xero.

Add a Xero online invoice or quote link to a Webflow button

This method works for deposits, retainers, and one-off invoices that you create in Xero first. The online invoice shows a Pay now button only once you set up a payment service and apply it to the invoice, and never while the invoice is a draft. Xero works with payment services such as Stripe and GoCardless, and with other providers through a custom URL. An invoice paid through a custom URL needs its payment applied by hand in Xero. Xero documents the link steps below in its online invoice sharing article.

To place the link:

1. In Xero, open the Sales menu, select Invoices, and open the invoice.
2. If the invoice is Draft or Awaiting approval, click the Approve & email arrow and select Approve & get link. If it is Awaiting payment or Paid, click the menu icon and select Get link.
3. Click Copy.
4. In Webflow, add a Button element and set its link to the copied URL.
5. Publish the site.

For a quote, open Sales > Quotes, open the quote, click the menu icon, and select Get link.

Copying the link for a Draft or Awaiting approval invoice approves that invoice automatically. Xero also warns that anyone with the link can view the transaction. A Webflow page is public unless you gate it, so keep these links off public pages and share them by email or on a gated client page.

Import Webflow Ecommerce payments with a Stripe feed

Webflow Ecommerce checkout supports two payment providers, Stripe and PayPal, so a Webflow order can't be paid through a Xero payment service. Xero can import the Stripe side instead. Xero’s Stripe listing says transaction data flows into Xero whether a payment came through a Xero invoice or an ecommerce store. PayPal orders don't reach Xero this way.

To import the Stripe payments from your store, connect a Stripe feed in Xero:

1. In Webflow, check which Stripe account the store uses under the Settings panel > Ecommerce > Payment.
2. In Xero, open the Accounting menu, select Bank accounts, and click Add bank account.
3. Start typing Stripe, select Stripe, and click Sign in to Stripe & connect.
4. Sign in to that same Stripe account, click Connect my Stripe account, select the currencies to import, and click Finish.

Xero imports only transactions made after the feed connects, and they arrive on your Stripe payout schedule. Each payment shows as two statement lines, one for the gross amount and one for the Stripe fee. A Stripe account with more than one settlement currency needs a Xero plan that offers multicurrency. The feed does not require Stripe to be set up as a Xero payment service, which is a separate step that only adds Pay now to Xero invoices.

A statement line is not a sale. The feed gives you bank lines to reconcile, so each order still needs an invoice or other sales record in Xero to match against. Create those with Zapier, Make, or the API, or use a Xero App Store app such as Synder, which posts Stripe sales, fees, and payouts to Xero clearing accounts.

Connect with Zapier, Make, or n8n

Zapier, Make, and n8n each ship a Webflow connector and a Xero connector, and each pairs a Webflow trigger with a Xero action today. Make connects to Webflow through its Webflow app and appears in the Xero App Store. n8n's Webflow and Xero page says both services work through pre-defined actions or raw HTTP requests. Integrately, installable from the Webflow Marketplace, also describes creating Xero invoices when a Webflow order form is submitted.

Zapier

Named Zapier templates cover the order-to-invoice case. Zapier marks Xero as a Premium app, so confirm your Zapier plan includes it before you build. Your Xero user needs Standard or Adviser rights, because Read-only, Invoice Only, and Cashbook Client roles cannot use the API. The Webflow form must have received at least one submission before you connect it to a Zap.

To set up the integration:

1. Open the template Xero invoices for orders, or start a new Zap with Webflow as the trigger app.
2. Connect your Webflow account, then pick the site and a trigger such as New Order or New Form Submission.
3. Connect Xero and choose the organisation.
4. Map Webflow fields such as customer email and line items to the Xero Create Sales Invoice action. Fill in a Line Account Code even though the field is marked optional, because non-US organisations often get a TaxType validation error without it.
5. Test the Zap and turn it on.

Trigger and action pairs available on Zapier:

• Webflow New Order → Xero Create Sales Invoice, followed by Create Payment for orders already paid
• Webflow Updated Order → Xero Create Sales Invoice, using the updated orders template
• Webflow New Form Submission → Xero Find or Create Contact, then Create New Quote Draft
• Xero New Sales Invoice → Webflow Create Item or Update Live Item
• Xero New Payment → Webflow Update Live Item, using the new payments template

A Xero organisation can connect to only one Zapier account at a time, and connecting it from a second account replaces the first connection. The New Payment trigger finds only payments created within the last 7 days, so reconciling a payment against an older invoice won't fire it.

Make

Make runs each Xero call as its own module, so a scenario can create the contact and the invoice as separate steps and branch between them. The Make Xero app includes Watch, Create, and Update modules for invoices and contacts. Other modules create quotes, payments, and bank transactions. Make's documentation lists the broad accounting.transactions scope for most of these modules, alongside accounting.contacts and accounting.settings.

To build a scenario:

1. Add a Webflow Watch Events trigger and select the site and event.
2. Add a Xero module that creates or updates the contact and map the customer fields.
3. Add a Xero module that creates the invoice, map line items, and reference the contact from step 2.
4. Turn the scenario on. Make lists Watch Events as a webhook trigger, so the scenario runs when Webflow sends the event.

n8n

Self-hosted and n8n Cloud deployments support the same Webflow and Xero workflow. The Webflow Trigger node fires on these events: Form Submission, Ecomm New Order, Ecomm Order Changed, Ecomm Inventory Changed, and Site Publish. It also fires on Collection Item Created, Updated, and Deleted. The Xero node supports Create, Get, Get All, and Update for contacts and invoices. Use an HTTP Request node against the Accounting API for quotes and payments.

To build a workflow:

1. Add a Webflow Trigger node and choose Ecomm New Order or Form Submission.
2. Add a Xero node with the Contact resource and the Create operation.
3. Add a second Xero node with the Invoice resource and the Create operation. Set its contact from the previous node.
4. For quotes or payments, add an HTTP Request node that sends a PUT request to https://api.xero.com/api.xro/2.0/Quotes or https://api.xero.com/api.xro/2.0/Payments with your Xero credentials. A POST to Payments deletes a payment rather than creating one.
5. Activate the workflow.

IFTTT offers Webflow Form submitted and New order triggers, and its Xero service includes a Create a sales invoice action. Automation workflows generally run in one direction, so a two-way contact sync needs one workflow per direction.

Build with the Webflow and Xero APIs

Line-item mapping, tax rates, account codes, idempotency, and error handling are available through direct API integration. This developer path needs a server, because the Xero OAuth 2.0 client secret must never reach the browser, so never call the Xero API from front-end JavaScript on a Webflow page. Webflow Cloud can host that server as a Next.js or Astro app with server-side API routes. Store the Xero client secret as a secret environment variable and read it only in server code. Webflow Cloud makes environment variables available at build time and at runtime, and masks secret values in its dashboard. Any other backend works the same way.

On the Xero side, create an app under My Apps in the Developer Portal. It gives you a client ID and client secret. Then set up authentication:

• Flow: Use the Authorization Code flow for a web server app that can store a client secret, and request offline_access to receive refresh tokens. A Custom Connection uses the client credentials grant against a single organisation instead, and Xero's documented calls for it send only the Authorization header. Custom Connections are only available for organisations in Australia, New Zealand, the UK, and the US, and require an additional monthly subscription.
• Tenant header: Standard apps call GET https://api.xero.com/connections after authorization. They send the returned tenantId as xero-tenant-id on every request.
• Token lifetimes: Access tokens expire after 30 minutes and refresh tokens after 60 days. If your app misses the response to a refresh, it can retry with the previous refresh token for 30 minutes.
• Granular scopes: Apps created on or after 2 March 2026 use granular scopes. These replace the broad accounting.transactions scope with accounting.invoices, accounting.payments, accounting.banktransactions, and accounting.manualjournals. Apps created before that date can keep broad scopes until September 2027.

Moving an existing connection to new scopes requires the user to authorise your app again, because Xero needs explicit consent for the new permissions.

On the Webflow side, generate a site token at Site settings > Apps & integrations > API access > Generate API token. Only site administrators can create one. A site holds at most 5 tokens, and a token expires after 365 consecutive days without use. Send it as Authorization: Bearer YOUR_API_TOKEN. Build on the Data API at https://api.webflow.com/v2, not the older v1 API, which Webflow deprecated on 31 March 2025 in its deprecation notice.

The APIs involved:

• The Xero Accounting API handles /Contacts, /Invoices, /Quotes, /Payments, /Items, and /CreditNotes under https://api.xero.com/api.xro/2.0
• Webflow’s Data API handles CMS collections, Ecommerce orders, and form submissions
• Webflow webhooks trigger real-time events for form_submission, ecomm_new_order, ecomm_order_changed, and collection_item_changed
• Xero webhooks send CREATE and UPDATE events for contacts, credit notes, invoices, overpayments, prepayments, and Xero App Store subscriptions. There is no payment event, so a paid invoice shows up as an invoice update

In the Xero API, PUT creates only and POST creates or updates. An optional Idempotency-Key header of up to 128 characters makes a quick retry safe, but Xero stores each key for only 6 minutes. Webflow retries a failed webhook up to 3 times at 10-minute intervals, so a retried order arrives after its key has expired and could create a second invoice. Record each processed Webflow order ID yourself, or set the invoice Reference to the order ID and check GET /Invoices?where=Reference="WF-{orderId}" before creating one.

Create a Xero invoice from a Webflow Ecommerce order

This flow replaces the Zapier New Order template with code you own. Webflow sends an ecomm_new_order webhook and your server verifies it. The server then creates the contact, invoice, and payment in Xero. You need Webflow scopes sites:write, ecommerce:read, and ecommerce:write, plus Xero scopes accounting.contacts, accounting.invoices, accounting.payments, and offline_access.

To implement this:

1. Register the webhook with sites:write:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Authorization: Bearer YOUR_API_TOKEN
Content-Type: application/json

{
  "triggerType": "ecomm_new_order",
  "url": "https://your-server.example.com/webhooks/webflow/orders"
}

2. Verify each delivery. Compute a SHA-256 HMAC over x-webflow-timestamp + : + the raw request body. Use your OAuth app client secret as the key. Webhooks created with a site token after April 14, 2025 each get their own secret key, which you use instead. Reject any request whose timestamp is older than 5 minutes.

const crypto = require("crypto");
const payload = `${req.headers["x-webflow-timestamp"]}:${rawBody}`;
const expected = crypto.createHmac("sha256", secret).update(payload).digest("hex");
const valid = crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(req.headers["x-webflow-signature"]));

The request bodies and filter shape in this guide are illustrative. Check them against the Webflow webhooks reference linked above.

3. Read orderId, customerInfo.fullName, customerInfo.email, purchasedItems, totals, and customerPaid from the payload. Call GET https://api.webflow.com/v2/sites/{site_id}/orders/{order_id} if you need the full order.
4. Look up the contact first with GET https://api.xero.com/api.xro/2.0/Contacts?where=EmailAddress="jane@example.com" and create it only if none exists. Xero recommends referencing contacts by ContactID, not by name. With summarizeErrors=false in the query string, Xero returns HTTP 200 even when an entity fails validation, so check each contact's status in the response:

POST https://api.xero.com/api.xro/2.0/Contacts?summarizeErrors=false
Authorization: Bearer {access_token}
xero-tenant-id: {tenantId}
Idempotency-Key: webflow-order-{orderId}-contact
Content-Type: application/json

{ "Contacts": [ { "Name": "Jane Doe", "EmailAddress": "jane@example.com" } ] }

5. Create the invoice with POST https://api.xero.com/api.xro/2.0/Invoices. Set Type to ACCREC, send only the ContactID from step 4 in the contact element, and include one line item per purchasedItems entry. Set Reference to the order ID and derive the Idempotency-Key from orderId. Webflow's totals.extras array carries the order's discounts, shipping, and taxes, so add shipping as its own line and set LineAmountTypes to match whether your store prices include tax. Give every line an AccountCode and a TaxType: when a line has no tax rate, the API falls back to the tax rate on its account code.
6. Record the payment with PUT https://api.xero.com/api.xro/2.0/Payments, not POST, which deletes payments. Link the InvoiceID and set Amount from customerPaid. The invoice must be approved (status AUTHORISED), the amount can't exceed what is still owing on it, and the payment needs an Account: a bank account, or one with payments enabled, by code or ID.
7. Optionally mark the order fulfilled with POST https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}/fulfill.

ecomm_order_changed carries the order's status, one of pending, unfulfilled, fulfilled, disputed, dispute-lost, or refunded. Filter on status before creating anything. When an order becomes refunded, create a credit note with PUT /CreditNotes in Xero and record the refund with PUT /Payments against that credit note. Webflow's own POST /sites/{site_id}/orders/{order_id}/refund reverses the Stripe charge, so call it only when you mean to refund the customer.

Create a Xero contact and quote from a form submission

Quote request forms map to Xero Quotes. Register a form_submission webhook with a filter on the form name so only that form fires your endpoint. The payload carries name, formId, data with the submitted field values, and submittedAt. As an alternative to the webhook, set the form's destination to Custom action so it POSTs straight to your server. Submissions then won't be sent to or stored in Webflow, as the forms guide notes. You need Xero scopes accounting.contacts, accounting.invoices (quotes fall under this scope), and offline_access.

To implement this:

1. Register the webhook:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Authorization: Bearer YOUR_API_TOKEN
Content-Type: application/json

{
  "triggerType": "form_submission",
  "filter": { "name": "Quote Request" },
  "url": "https://your-server.example.com/webhooks/webflow/quotes"
}

2. Verify the signature as above and read the fields from data.
3. Find or create the contact as in the order flow above.
4. Create the quote with POST https://api.xero.com/api.xro/2.0/Quotes, using the ContactID and an Idempotency-Key derived from the submission id.

Sites on the free Starter Site plan stop collecting after 50 total form submissions. That limit does not reset, so run a live quote pipeline on a paid Site plan.

Update a Webflow CMS item when a Xero invoice is paid

Xero has no payment webhook, so subscribe to invoice events and check the invoice status on each update. Each CMS item that should react to payment needs a field holding the Xero InvoiceID or ContactID for lookup. A Collection List on the site then filters on the field you update. You need Webflow scopes cms:read and cms:write, plus Xero scopes accounting.invoices.read and offline_access.

To implement this:

1. Create an Invoice webhook under My Apps in the Xero Developer Portal, note its webhook key, and start the Intent to receive validation. Xero sends a series of test requests: return a 2xx status for every correctly signed payload and 401 for every incorrectly signed one.
2. Validate x-xero-signature on every delivery. Compute HMAC-SHA256 over the raw body with your webhook key, base64-encode it, and compare. Respond within 5 seconds with a 2xx status and no cookies, and keep body-parsing middleware from altering the raw body.
3. For each event with eventCategory INVOICE and an update eventType, fetch GET https://api.xero.com/api.xro/2.0/Invoices/{resourceId} and read the invoice status.
4. Look up the matching item and update its changed fieldData with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}.
5. Publish with POST https://api.webflow.com/v2/collections/{collection_id}/items/publish and an itemIds array, or write to the live item with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}/live.

If your endpoint stops answering, Xero retries immediately, then every 15 minutes, and disables the subscription after 24 hours. Events from that period are kept for up to 31 days and replayed in order once the subscription is healthy again.

What you can build with the Xero Webflow integration

These builds combine the methods above for the setups we see most often.

• Order-to-invoice for a Webflow Ecommerce store: The order workflow above creates a Xero invoice with the customer's name, email, and each purchased item. A Stripe feed then imports the payouts that those invoices reconcile against.
• Proposal form to quote for agencies: The form workflow above turns each proposal request into a Xero contact and a draft quote, which the account manager reviews and sends from Xero.
• Milestone billing from CMS items: A client project page is built on a Milestones collection. Marking an item complete fires the n8n Webflow Trigger Collection Item Updated event, or a collection_item_changed webhook to your server. Either one creates the Xero invoice for that milestone.
• Payment-gated content and member fees: On a subscription site, the Xero New Payment trigger flips a CMS item to active, and the Collection List then shows the paid resource. Published CMS content is public, so login gating needs Outseta or Memberstack. Summit Digital's WCIB case study describes multi-tier membership fees on a stack that includes Webflow Enterprise, Outseta, Stripe, and Xero.

For line-item mapping, tax rates, and multi-currency invoices, the API path gives you control over every field. To see the same order trigger feed another app, automate orders with Zapier. To let an agent draft the quotes and update the CMS for you, connect Webflow’s MCP server.