Quickbooks

Webflow form submissions and Ecommerce orders stay inside Webflow. Webflow creates no corresponding accounting records in QuickBooks Online. Webflow Ecommerce checkout also runs on Stripe or PayPal only, so QuickBooks Payments cannot process a store order. Someone re-keys every lead and every sale into the books by hand.

Connecting the two closes that gap through automation or custom code. A QuickBooks Buy button pasted into a page takes deposits or fixed-fee payments straight into your QuickBooks Payments account. Invoice and payment status can also flow back into Webflow CMS items for client-facing display.

Freelancers and agencies who bill from website leads get the most from this setup. DTC stores on Webflow Ecommerce use it to record revenue without manual entry. Bookkeepers serving Webflow-based clients use it to map incoming orders to the right accounts and tax codes. Nonprofits taking donations through a Webflow form can record each gift as a sales receipt.

How to integrate QuickBooks with Webflow

What is QuickBooks? QuickBooks Online is cloud accounting software for small businesses. Every paid plan includes invoicing, estimates, expense tracking, bank feeds, reconciliation, and reporting. QuickBooks Payments, a separate merchant account, adds card and ACH collection, payment links, and website Buy buttons.

No QuickBooks app exists in the Webflow Apps Marketplace. Teams pair the two anyway because website leads and store sales need to reach the books the day they arrive. Freelancers set it up once a contact form starts producing paying clients, and stores set it up when order volume outgrows manual entry. Every method below targets QuickBooks Online, not QuickBooks Desktop.

The QuickBooks-Webflow integration supports three approaches:

• QuickBooks payment links and Buy buttons handle payment collection on any page through Code Embed or a link element, without writing code.
• Zapier, Make, and n8n provide no-code workflow builders for transferring data between the platforms, while viaSocket provides pre-built workflows.
• The Webflow Data API and QuickBooks Online APIs give you full control over customer deduplication, invoice creation, and CMS sync, but require server-side development.

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

Add a QuickBooks Buy button with Code Embed

An approved QuickBooks Payments account, subject to eligibility and credit approval, is required before Intuit generates the Buy button, the only officially documented no-code way to collect QuickBooks payments from a website. You create a multi-use payment link in QuickBooks Online, copy the generated HTML, and paste it into a Code Embed element. A click sends the visitor to a QuickBooks-hosted checkout page; there is no embedded card form or iframe. Code Embed needs a Core, Growth, Agency, or Freelancer Workspace or an active paid Site plan. The payment links article lists Simple Start, Essentials, and Plus among eligible plans and does not list Advanced. QuickBooks Payments is available in the US and Canada, some UK businesses can use it in-product, and Australia has no native QuickBooks Payments product.

Embed the Buy button HTML

Use this path when you want the QuickBooks-generated button on a pricing, services, or deposit page. The multi-use link accepts repeated payments at the amount you set.

To create and embed the Buy button:

1. In QuickBooks Online, go to All apps > Sales & Get Paid > Payment links.
2. Select New payment link, then Multi-use payment link, then Next.
3. Enter the amount, description, and payment methods, then select Create link.
4. Select the Buy button tab, then Copy to copy the generated HTML.
5. In Webflow, open the Add panel and drag a Code Embed element onto the page.
6. Paste the HTML into the code editor and select Save and close.
7. Publish the site. Custom code only runs on the published site.

The Code Embed element accepts up to 50,000 characters, far more than the button snippet needs. If your QuickBooks menus look different, use the in-app Search bar to find the page; Intuit reorganized the layout. A redirect to Intuit's hosted page keeps your PCI scope at SAQ A, and payment links don't expire.

Link any Webflow button to a payment link URL

Skip the embed when you want a button that matches your own site styles, or when your site plan doesn't allow custom code. Copy the payment link URL and use it as the destination of any Webflow link or button element. This works on any Webflow plan.

To link a button:

1. In QuickBooks Online, create a one-time or multi-use payment link and copy its URL.
2. In Webflow, select a Button or Link Block element and paste the URL as its link destination.
3. Publish the site.

Payments made through either path reconcile automatically in QuickBooks. One constraint applies to both: QuickBooks Payments is not compatible with Multicurrency, and enabling Multicurrency disables payment features permanently, because it cannot be turned off.

Connect with Zapier, Make, n8n, or viaSocket

Zapier, n8n, and viaSocket each publish a direct Webflow and QuickBooks Online combination page. Together, automation platforms are the primary no-code path for this setup. Make has modules for both apps, including a Webflow Watch Events trigger. Zapier and Make are both in the Webflow Apps Marketplace, and the order management article names QuickBooks as a Zapier destination for order details. You need admin access to both QuickBooks Online and Webflow.

To send a Webflow form to QuickBooks through Zapier:

1. Publish the form and submit at least one test entry so Zapier can detect it.
2. In Webflow, select the form and open the Settings panel. Click the add icon next to Connected Apps and select Zapier. If it isn't listed, click Find more Apps.
3. In Zapier, create a Zap with Webflow > New Form Submission as the trigger, then choose the site and form.
4. Add a QuickBooks Online > Create Customer action and map the name and email fields.
5. Add a Create Invoice action that uses the customer ID from the previous step plus line-item details.
6. Connect your QuickBooks Online account through OAuth when Zapier prompts you.
7. Test the Zap and turn it on.

The connections available across these platforms include:

• Webflow New Form Submission → QuickBooks Create Customer, Create Invoice, or Create Payment (Zapier, viaSocket), or Create Sales Receipt (Zapier)
• Webflow New Order or Updated Order → QuickBooks Create Sales Receipt, Create Invoice, Create Refund Receipt, or Create Credit Memo (Zapier)
• QuickBooks New Invoice, New Payment, or New Estimate → Webflow Create Item, Create Live Item, Update Item, or Update Live Item (Zapier)
• Webflow Form Submission, Ecomm New Order, Collection Item Created, or Site Publish → QuickBooks Customer, Invoice, Estimate, Item, or Payment operations (n8n)
• Webflow Watch Events, List Orders, or Create an Item modules → QuickBooks modules for customers, invoices, estimates, sales receipts, and payments (Make)

Zapier publishes ready-made templates in both directions, including one that creates Webflow items for each new QuickBooks Online invoice. viaSocket's six pre-built workflows all start from New Form Submission. Make connects through the same Connected Apps menu, and Webflow's Make tutorial points to Make's own setup steps. Inventory stays one-directional: QuickBooks does not sync stock levels back to Webflow.

Build with the Webflow and QuickBooks Online APIs

A server or serverless function must receive webhooks, hold OAuth tokens, and call both APIs. With that infrastructure, custom code gives you exact control over field mapping, duplicate handling, and two-way sync. Choose this path when you need to match Webflow products to existing QuickBooks items, catch duplicate customers, or push invoice status into CMS items. Production QuickBooks credentials arrive only after App Assessment Questionnaire approval, and your App Details must include EULA and Privacy Policy URLs.

The APIs involved:

• The QuickBooks Online Accounting API handles customers, invoices, sales receipts, estimates, payments, and items
• QuickBooks Online webhooks notify your endpoint when any of 29 entity types change, including Invoice and Payment
• The QuickBooks Payments API handles card tokenization and charges, in production for the US and Canada only
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger real-time events for form submissions, orders, and collection items

QuickBooks uses OAuth 2.0. Authorization happens at https://appcenter.intuit.com/connect/oauth2, and tokens come from https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer. Request the com.intuit.quickbooks.accounting scope. Access tokens last 60 minutes. Refresh tokens rotate every 24 hours and expire after 100 days without use, so always persist the newest value. The realmId returned in the callback goes into every endpoint URL, and every request carries a minorversion query parameter. On the Webflow side, go to Site settings > Apps & integrations > API access > Generate API token and store the token securely. Each site allows up to 5 site tokens, and a token expires after 365 consecutive days of inactivity. The Payments API supports browser-side card tokenization, but Intuit has no drop-in card field, and self-hosted card fields move you to SAQ A-EP.

Create QuickBooks customers and invoices from form submissions and orders

A form_submission webhook fires with the submitted field values in payload.data, plus payload.name, payload.formId, and payload.submittedAt. For Webflow Ecommerce stores, ecomm_new_order carries orderId, customerInfo (fullName, email), purchasedItems, and totals. One handler pattern covers both events.

To build the handler:

1. Use a token that has the sites:write scope to register the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and "triggerType": "form_submission" (or ecomm_new_order). Create it through the API rather than site settings, because dashboard-created webhooks omit signature headers.
2. Verify each request. Concatenate timestamp + ":" + JSON.stringify(request_body), compute an HMAC-SHA256 with your token secret, and compare it to x-webflow-signature. Reject anything older than 5 minutes.
3. Check for an existing customer with GET /v3/company/<realmId>/query?query=select * from Customer where PrimaryEmailAddr='<email>'&minorversion={version}.
4. If none exists, POST /v3/company/<realmId>/customer?minorversion={version} with at least one of GivenName, FamilyName, or DisplayName, and append &requestid=<uuid> for idempotency. Error 6240 means the DisplayName already exists; read the existing customer ID from the error message.
5. For store orders, query each product with select * from Item where Name='x' to get ItemRef values.
6. POST /v3/company/<realmId>/invoice?minorversion={version} for net-terms billing, or /salesreceipt for orders paid at checkout, with this body:

{
  "CustomerRef": { "value": "1" },
  "Line": [
    {
      "Amount": 100.00,
      "DetailType": "SalesItemLineDetail",
      "SalesItemLineDetail": {
        "ItemRef": { "value": "1", "name": "Services" }
      }
    }
  ]
}

7. Email the invoice with POST /v3/company/<realmId>/invoice/<invoiceId>/send?sendTo=<email>&minorversion={version}. No request body is needed, and sendTo overwrites the stored BillEmail.Address.

Return HTTP 200 promptly; Webflow retries a failed delivery up to three more times. For tax, send the shipping address and product category instead of Webflow's calculated tax amount. QuickBooks Automated Sales Tax then recalculates and replaces any incorrect TaxCode your app supplies. Automated Sales Tax does not run in sandbox companies, so test tax behavior against a production company.

Sync QuickBooks invoice and payment status to Webflow CMS items

QuickBooks webhooks carry only change metadata (entity name, ID, operation), so your handler fetches the full record before touching Webflow. This reverse path powers a client portal where each QuickBooks invoice appears as a CMS item with a status field. Webflow retired its native User Accounts on January 29, 2026, so gate the portal with a third-party membership tool such as Memberstack or Outseta.

To implement the sync:

1. In the Intuit Developer dashboard, open your app and select Webhooks. Choose Production or Development, enter your Endpoint URL, open Show webhooks, pick the Invoice and Payment events, and select Save. Copy the Verifier Token from the same screen.
2. Respond HTTP 200 within 3 seconds, then process the event asynchronously. Verify the intuit-signature header by hashing the payload with HMAC-SHA256 using the verifier token as the key.
3. Parse the CloudEvents payload: intuitentityid is the entity ID and intuitaccountid is the realm ID. Build against the CloudEvents format rather than the legacy eventNotifications payload.
4. Branch on the QuickBooks entity type. For a Payment event, fetch the record with GET /v3/company/<realmId>/payment/<id>?minorversion={version}, then follow LinkedTxn to the invoice. For an Invoice event, fetch it with GET /v3/company/<realmId>/invoice/<id>?minorversion={version}.
5. Find the Webflow item through your stored map of QuickBooks invoice ID to Webflow item ID, or filter GET /v2/collections/{collection_id}/items by slug.
6. Use a token with cms:write to update it with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}/live and a body like { "fieldData": { "paymentStatus": "paid" } }. New invoices go to POST /v2/collections/{collection_id}/items/live with the required fieldData.name and fieldData.slug.

QuickBooks retries undelivered notifications at 10 seconds, 20 seconds, 30 seconds, 5 minutes, 20 minutes, 2 hours, 4 hours, and 6 hours, then every 6 hours. On startup, run a ChangeDataCapture query back to your last processed event to backfill anything missed, as Intuit's webhook best practices recommend. Size the collection to your invoice volume: Premium and Team plan sites each hold 20,000 CMS items.

What you can build with the QuickBooks Webflow integration

Automatic bookkeeping replaces re-keying data from website form notifications and order emails.

• Lead-to-invoice pipeline for agencies: A project-request form creates a QuickBooks customer and an invoice through Zapier the moment a prospect submits it. Nobody re-keys the lead from a notification email at month end.
• Store order accounting: Use the ecomm_new_order payload to populate a QuickBooks sales receipt with the customer's name, email, and line items. When an order reaches refunded status, ecomm_order_changed triggers a Refund Receipt or Credit Memo in QuickBooks.
• Deposit checkout for contractors: A services page carries a QuickBooks Buy button set to the job deposit amount, so the client pays from the same page that describes the work.
• Client portal with invoice status: Paid invoices update CMS items rendered in a Collection List filtered per client, behind a Memberstack or Outseta login. Each item shows amount, due date, and a paid or unpaid flag pulled from QuickBooks.

If you need more control over customer deduplication, product-to-item mapping, or two-way status sync, the API integration path covers those cases. To see the same order trigger feeding a different destination, follow our Zapier orders guide.