Xero

How to integrate Xero with Webflow

Managing ecommerce orders, invoices, and customer records across separate platforms requires constant manual reconciliation between your site and accounting system. Integrating Xero with Webflow routes order and customer data directly to your financial records.

Start with third-party automation platforms like Zapier, n8n, or Integrately to connect Webflow events to Xero actions. For complex workflows that require custom business logic, build custom API integrations using the Xero API and Webflow API v2. You can also use shareable links for Xero invoices and payments.

Use Zapier, n8n, or Integrately apps

Automation platforms connect Webflow events to Xero actions through visual workflow builders that require no code. These platforms use OAuth authentication.

The Zapier Webflow-Xero integration page provides the following automations:

• Generate Xero invoices from Webflow orders: New ecommerce orders trigger invoice creation with customer details and line items
• Update Webflow CMS when Xero bills are created: Sync vendor bills to Webflow collection items for financial dashboards
• Sync contact records bidirectionally: Form submissions create Xero contacts; payment updates modify Webflow customer data through reverse workflows
• Create payment records: Match received payments to corresponding Webflow orders

Zapier provides six pre-built templates for Webflow-Xero workflows (premium plans required).

n8n offers the most cost-effective option for unlimited workflows. The Xero node supports contacts and invoices operations (create, get, get all, update). Extend with HTTP Request nodes for unsupported API calls.

viaSocket supports similar workflows, including order-to-invoice automation and fulfilled order lookup.

Important limitation: Integrations are unidirectional per workflow (Webflow→Xero OR Xero→Webflow). Create separate workflows for each direction.

Build custom integrations with REST APIs

Use the Xero and Webflow REST APIs for requirements such as invoice workflows with custom business logic, payment reconciliation, or client portals that display financial data.

Some of the common API use cases include:

• Invoice generation with custom line item logic
• Contact deduplication across platforms
• Payment status synchronization
• Real-time inventory updates

Authenticate with OAuth 2.0

Both platforms require OAuth 2.0. Xero's authorization flow: redirect to Xero endpoint → receive authorization code → exchange for tokens → include in headers.

Critical requirements:

• Xero access tokens expire after 30 minutes (strict enforcement)
• Refresh tokens expire after 60 days of inactivity
• Request offline_access scope for refresh tokens
• Include Xero-Tenant-Id header in every API call

Webflow uses Bearer tokens from Site Settings: Authorization: Bearer {your-api-token}

Create Xero invoices from Webflow orders

Here’s the implementation flow:

1. Configure Webflow webhooks for order creation events
2. Extract customer information from payload
3. Create/update contact: POST /api.xro/2.0/Contacts
4. Generate invoice: POST /api.xro/2.0/Invoices

Create invoices with "Status": "DRAFT" initially. Let Xero calculate tax amounts.

Required invoice fields: Type (ACCREC/ACCPAY), Contact object with ContactID, LineItems array (description, quantity, unit amount, account code, TaxType), Date and DueDate (YYYY-MM-DD).

Validate webhooks using HMAC-SHA256 signatures via x-webflow-signature header.

Link to Xero-hosted payment pages

Xero generates shareable links for invoices and payments, directing customers to Xero-hosted checkout pages. Add links to Webflow through button elements, text links, or Custom Code Embed.

Prerequisites: Connect a payment provider (Stripe, PayPal, or GoCardless) in Xero settings before creating payment links.

• Payment links: Accept one-time or recurring payments without invoices
• Invoice links: Display real-time invoice information with automatic Pay Now buttons
• Custom buttons: Use Custom Code Embed for HTML snippets

What you can build

Integrating Xero with Webflow lets you automate accounting workflows that connect your site activity to your financial records.

• Order-to-invoice workflows: Auto-create Xero invoices when Webflow orders reach 'fulfilled' status
• Client portal with invoice access: Push Xero invoice data to Webflow CMS collections via automation platforms for customer portals using Memberships
• Subscription billing workflows: Connect membership status changes to Xero invoicing (prorated charges require advanced logic or custom code)
• Agency project accounting: Trigger invoices when project milestone CMS items are marked complete