Next.js + HubSpot integration

Plandalf has no native HubSpot steps, and the Next.js SDK does not write to HubSpot. Your app opens the checkout; after payment a Plandalf sequence uses Send Webhook to post the buyer to HubSpot's contacts API or to a route handler you own. HubSpot workflows can also post to a Plandalf catch URL.

1. Load the SDK once in a client provider

   Create a client component with 'use client' that renders next/script with the afterInteractive strategy and wraps your layout's children. Next.js only allows onReady and onError handlers inside client components.

2. Render the buying action after readiness

   Show a button with data-plandalf-present only once plandalf('ready', ...) has handed your provider the SDK. Give the button a React key that includes the offer slug, so a changed offer replaces the bound element.

3. Create a HubSpot private app

   In HubSpot create a private app, choose the contact write scope and copy the access token. HubSpot uses it as a Bearer token. Store it as a server environment variable, never a public one.

4. Add a route handler as the receiver

   Create app/api/plandalf-paid/route.js that checks a shared secret header, reads the email and invoice number from the body, and upserts the contact in HubSpot. Skip repeated invoice numbers so a retry does not run twice.

5. Point Send Webhook at it

   In Automation, My Sequences start on Checkout Completed for your offer, then add Send Webhook with your route URL, the secret in Headers and a JSON payload using {{trigger.customer_email}} and {{trigger.invoice_number}}. Test it with your own email.

• The SDK's purchase and complete events are for UI updates, not authorisation. Grant access from your server after verifying the paid purchase.
• HubSpot's Send a webhook workflow action is listed by HubSpot for Data Hub Professional and Enterprise, and sends POST or GET. Plandalf's older HubSpot page names Marketing Hub, so confirm your subscription in HubSpot.
• Plandalf's Send Webhook is not signed and has no automatic retry guarantee, so authenticate your route with a secret header and dedupe by invoice.
• The Next.js guide covers the App Router. Pages Router and signed-in checkout are listed there as needing their own verification.
• Do not put the HubSpot token or your Plandalf signing key in a client bundle or a public environment variable.

Does Next.js integrate with HubSpot?

Not through a Plandalf connector. Your Next.js app opens a Plandalf checkout, and a Send Webhook step or your own route handler writes the buyer to HubSpot after payment.

How do I add Next.js buyers to HubSpot?

Use a Checkout Completed sequence with Send Webhook pointing at HubSpot's contacts API, or at a route handler in your app that holds the private app token and upserts the contact.

Should I trust the browser purchase event to update HubSpot?

No. Browser events can update the page, but contacts and access should change from the server after the paid invoice is verified.

Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: HubSpot CRM API: contacts, HubSpot private apps overview, HubSpot: use webhooks with workflows, Next.js: load and optimize scripts.