Xero

How to integrate Xero with Webflow

Manual invoice creation from Webflow orders creates duplicate work across your ecommerce and accounting systems. Automating this workflow reduces data entry errors and the time spent on financial administration.

Connect Webflow and Xero through third-party automation tools like Zapier or n8n, embed Xero payment links in your Webflow site, or build custom API integrations for specialized financial workflows.

Automation platforms handle common patterns like order-to-invoice workflows and customer contact syncing through visual workflow builders without requiring code. Payment link embeds let customers pay invoices directly through Xero-hosted pages. Custom API integrations enable multi-step transaction processing and real-time inventory synchronization with accounting records.

Use Zapier, n8n, or Integrately apps

Automation platforms connect Webflow events to Xero actions through visual workflow builders that require no code. Create invoice workflows when customers order. Sync contact records between systems. Update payment statuses. These platforms authenticate via OAuth without requiring API key management.

The Zapier Webflow-Xero integration page provides these automations:

• Generate Xero invoices from Webflow orders through third-party automation. New ecommerce orders trigger Xero invoice creation with customer details and line items
• Update Webflow CMS when Xero bills are created through integration platforms. Track expenses by syncing vendor bills to Webflow collection items for financial dashboards
• Sync contact records bidirectionally. Form submissions create Xero contacts through automation platforms, and payment updates modify Webflow customer data through reverse workflows
• Create payment records that match received payments in Xero to corresponding Webflow orders through third-party integration services

Zapier provides six pre-built templates specifically for Webflow-Xero workflows, all of which require premium plans. Templates handle the most common use case by converting order data into properly formatted invoices.

n8n starts at $24/month for the Starter plan (2,500 executions per month) or $60/month for Pro (10,000 executions per month). The n8n Xero node supports contacts and invoices operations including create, get, get all, and update. Build custom workflows using visual tools, or extend functionality with HTTP Request nodes for API calls not covered by standard operations. Technical users benefit from n8n's flexibility, though execution limits apply based on your plan tier.

All automation platforms operate on event-driven triggers. Workflows fire when specific events occur like form submission, new order, or payment received, then execute configured actions. Processing typically completes within minutes based on platform polling intervals, though polling triggers may check for new data every 15 minutes rather than instantly.

These integrations are unidirectional per workflow. Each automation flows one direction (Webflow to Xero OR Xero to Webflow). Create separate workflows for each direction rather than expecting automatic bidirectional synchronization. This is a fundamental architectural constraint documented across all integration platforms including Zapier, n8n, Make, and Integrately.

Link to Xero-hosted payment pages

Xero generates shareable links for invoices and standalone payments that direct customers to Xero-hosted checkout pages. Add these links to Webflow pages through button elements, text links, or the Custom Code Embed element. This method requires no coding for link placement and provides payment functionality by directing customers to Xero-hosted payment experiences. You must first connect a supported payment service provider (Stripe, PayPal, or GoCardless) through your Xero account settings to enable payment processing on these links.

Common use cases include payment links for one-time or recurring payments without creating invoices first, invoice links that display real-time invoice information and payment status, and custom button implementations using Webflow's Custom Code Embed element.

Payment links allow you to accept one-time or recurring payments without creating invoices first. Create payment links directly in your Xero account, then paste them into Webflow button elements or text links. Customers complete checkout on Xero-hosted pages. The payment link automatically includes payment options customers can use to pay directly through the Xero-hosted checkout page once you've connected a supported payment service provider.

Invoice links provide shareable URLs for any invoice you've created. These links display real-time invoice information to customers. Copy the generated URL and add it to Webflow as a hyperlink or button destination.

Use Webflow's Custom Code Embed element when you need to add HTML snippets for payment buttons or formatted invoice displays. Drag the embed element onto your page, paste the provided code, and style surrounding elements using Webflow's visual designer.

Build custom integrations with REST APIs

Build custom integrations using the Xero and Webflow REST APIs for specialized requirements beyond pre-built templates. Use APIs to create invoice workflows with custom business logic, implement payment reconciliation, or develop client portals displaying financial data. This approach requires backend development expertise, server infrastructure, and ongoing maintenance. Third-party automation platforms handle most use cases through pre-built templates, but APIs enable specialized business logic that automation platforms cannot address.

Common API use cases include invoice generation with custom line item logic specific to your business model, contact deduplication strategies across platforms, payment status synchronization between Webflow orders and Xero invoices, and real-time inventory updates that reflect in both ecommerce and accounting records.

Authenticate with OAuth 2.0

Both platforms require OAuth 2.0 (an authorization framework that lets apps access user data without storing passwords) for API access. Xero's OAuth documentation describes the authorization flow by redirecting users to Xero's authorization endpoint, receiving an authorization code, exchanging it for access tokens, then including tokens in API request headers.

Critical authentication requirements include Xero access tokens expiring after exactly 30 minutes with strict enforcement and no grace period, refresh tokens expiring after 60 days of inactivity, requesting the offline_access scope to obtain refresh tokens (required for workflows longer than 30 minutes), and including the Xero-Tenant-Id header in every API call to specify the target organization.

Webflow uses Bearer tokens generated from Site Settings. Include the token in request headers with Authorization: Bearer {your-api-token}.

Implement automated token refresh that triggers before the 30-minute access token expiration. Store refresh tokens securely with encryption at rest.

Create Xero invoices from Webflow orders

Create Xero invoices from Webflow ecommerce orders through coordinated API calls. This workflow represents the most common custom integration pattern.

The implementation flow includes configuring Webflow webhooks to receive form submission or order creation events, extracting customer information from webhook payload, creating or updating contact using Xero Contacts API with POST /api.xro/2.0/Contacts, and generating invoice with Xero Invoices API using POST /api.xro/2.0/Invoices.

When creating invoices in Xero, always create them with "Status": "DRAFT" initially. This allows validation before authorizing the invoice for payment. Let Xero calculate tax amounts rather than computing them client-side to avoid rounding errors. These best practices help maintain data integrity and prevent common implementation errors.

Required invoice fields for the Xero Invoices API include Type (ACCREC for accounts receivable or ACCPAY for accounts payable), a Contact object with ContactID, a LineItems array with description, quantity, unit amount, account code (which should not be hardcoded but dynamically mapped), and TaxType, plus Date and DueDate in YYYY-MM-DD format. Create invoices in DRAFT status initially for validation before updating to AUTHORISED status, and use Xero's built-in tax calculation rather than calculating tax client-side to avoid rounding errors.

Validate webhook requests using HMAC-SHA256 signatures (a cryptographic signature method that verifies webhook authenticity). Webflow includes an x-webflow-signature header with each webhook. Verify the signature by computing an HMAC-SHA256 hash of the request body using your webhook secret and comparing it against the provided header value.

Handle webhooks efficiently

Both platforms support webhooks for event notifications, though with important limitations. Implement asynchronous processing where your server immediately acknowledges requests but processes work in background queues to meet Xero's webhook requirements. Xero webhooks require servers to respond within 5 seconds with a 2xx status code, and webhooks that repeatedly fail may be automatically deactivated after 24 hours. Webflow webhooks similarly implement retry mechanisms but may be deactivated if they continue to fail. Because of these constraints and timing requirements, webhook-based integration requires asynchronous queue-based architecture rather than direct processing.

Webhook handlers (server endpoints that receive event notifications) must respond within 5 seconds with a 2xx status code, or the request will be marked for automatic retry. Webhook handlers should immediately return HTTP 200, then queue the actual processing work asynchronously. Use Redis, RabbitMQ, or cloud-native queue services to handle data processing outside the webhook request. Xero's retry mechanism spaces attempts 15 minutes apart and continues for up to 24 hours if your server doesn't acknowledge receipt within the 5-second window.

Xero webhooks fire for all connected organizations and must include tenantId filtering in your handler to process only relevant tenants. The webhook payload includes resourceUrl, resourceId, eventType (CREATE, UPDATE, DELETE), eventCategory (INVOICE, CONTACT, PAYMENT), eventDateUtc, and tenantId. Your webhook handler must respond within 5 seconds with a 2xx status code. Asynchronous processing is mandatory for any workflow lasting longer than 5 seconds. Xero implements automatic retry mechanisms spaced 15 minutes apart for up to 24 hours if your server fails to respond in time.

Manage rate limits

Xero enforces strict API rate limits that require careful request management. Xero's rate limits specify 5 concurrent requests per tenant (hard limit), 60 calls per minute per tenant, and 5,000 calls per day per tenant.

Design integrations assuming the most restrictive Xero limits (5 concurrent API calls per tenant, 60 calls per minute, 5,000 calls per day) or implement dynamic rate limiting based on detected Webflow plan types (60 req/min for Starter/Basic, 120 req/min for CMS/Business/eCommerce) and real-time rate limit headers.

Sync contacts and customers

Create Xero contacts from Webflow form submissions to maintain contact records and data consistency between platforms. Use form submission triggers to create or update contacts in Xero, mapping Webflow form fields (name, email address, phone number) to Xero contact fields. The Xero Contacts API requires specific field formats. Note that this represents unidirectional data flow (Webflow to Xero) via automation platforms like Zapier, n8n, or Integrately. True bidirectional synchronization is not available, though separate reverse workflows can be configured to update Webflow when Xero contacts change.

Retrieve Webflow form data with Form Submissions API using GET /v2/forms/{form_id}/submissions. Extract name, email, phone, and address fields from submission data.

To manage Xero contacts and prevent duplicates, use the Contacts API with the following pattern. First, retrieve existing contacts using the GET Contacts endpoint with appropriate filtering parameters. If a matching contact is found, update that existing record using the PUT /Contacts/{ContactID} endpoint. If no matching contact exists, create a new contact using the POST /Contacts endpoint. The Contacts API documentation shows you can filter contacts by various parameters including EmailAddress during the retrieval step to check for duplicates before performing create or update operations.

Only the Name field is required for Xero contacts. Optional fields like EmailAddress, FirstName, LastName, address objects, and phone arrays provide additional contact detail for record completeness and customer communication.

Track payment status

Synchronize payment records between Webflow order status and Xero invoice payment status. This maintains accurate financial reporting and customer communication.

Use Xero Payments API to record payments with POST /api.xro/2.0/Payments. Required fields include invoice reference (InvoiceID or InvoiceNumber), payment amount, date, and bank account reference.

Configure Xero webhooks to receive notifications when payments are recorded. Update corresponding Webflow CMS items or order records using Webflow's Collection Items API with PATCH /v2/collections/{collection_id}/items.

Note that these APIs track payment records and invoices for accounting purposes. They don't process actual customer payments directly. Webflow handles customer payment processing through Stripe or PayPal integrations. Once payments are processed, the Webflow-Xero integration uses the Invoices API to create sales invoices and the Payments API to record payment transactions in Xero's accounting system for financial reporting and bookkeeping.

Synchronize product catalogs

To keep product information consistent between Webflow ecommerce and Xero inventory tracking, you would need to implement a third-party automation solution such as Zapier, n8n, or Integrately. When properly configured through these middleware platforms, such an integration could help enable more accurate cost of goods sold reporting and inventory valuation by synchronizing order and product data between your Webflow store and Xero accounting system.

Fetch Xero items with Items API using GET /Items. Match products by SKU code stored in Xero's Code field.

Create missing items with POST /api.xro/2.0/Items by providing the required fields including Code (SKU) and Name. Optional fields include IsTrackedAsInventory, PurchaseDetails, and SalesDetails for detailed product configuration. Update existing items with PUT /api.xro/2.0/Items/{ItemID} when prices or descriptions change. Note that all Xero API requests require OAuth 2.0 authentication with the Authorization: Bearer {access_token} header and Xero-tenant-id: {tenantId} header to identify the target organization. Be mindful of Xero's rate limits including 5 concurrent API calls per tenant and 60 calls per minute per tenant.

Consider inventory tracking requirements. Xero's Items API documentation shows the platform supports inventory management through the Items endpoint. For physical products that require inventory tracking, configure items appropriately in Xero's settings, then manage inventory levels through the dedicated inventory management workflows rather than through general item updates. This provides accurate tracking and separation of inventory operations from product information changes.

What you can build

Integrating Xero with Webflow enables automated financial workflows between your ecommerce platform and accounting system.

• Order-to-invoice workflows: Configure n8n or Zapier to automatically create Xero invoices when Webflow order status changes to 'fulfilled', mapping line items, tax calculations, and customer contacts between systems
• Client portal with invoice access: Use Zapier, Make, n8n, or Integrately to push Xero invoice data into Webflow CMS collections, creating client portals where customers view invoice status, payment history, and account balances through Webflow's Memberships feature
• Subscription billing workflows: Connect Webflow membership status changes to Xero invoicing through automation platforms that calculate prorated charges and generate recurring invoices when customers upgrade or downgrade subscription tiers
• Agency project accounting: Trigger Xero invoice creation when project milestone CMS items are marked complete in Webflow, automatically extracting client information, deliverables, and agreed amounts to generate invoices