> Open a Plandalf checkout from a Next.js App Router page, then post the paid buyer to HubSpot through a webhook step or your own route handler. Source: https://plandalf.com/apps/nextjs/integrations/hubspot Last modified: 2026-10-26 Checkout embed # Next.js + HubSpot integration A Next.js client component opens the Plandalf checkout, and a paid order reaches HubSpot as a contact through a webhook step. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **Next.js** **HubSpot** ## Does Next.js integrate with HubSpot? 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. ## What moves between Next.js and HubSpot Event From and to Through What happens Checkout opened Next.jsPlandalf Checkout embed A client component renders a button with `data-plandalf-present`, or calls `present()` from the SDK once the provider reports it is ready. Checkout completed PlandalfHubSpot Webhook Send Webhook posts JSON to HubSpot's contacts API with a private app token as a Bearer header, or to a Next.js route handler that holds the token. Invoice paid PlandalfNext.js Webhook A Send Webhook step can also call a route handler in your app, which is where durable access is granted after you verify the paid invoice on the server. Workflow webhook HubSpotPlandalf Webhook A HubSpot workflow action that sends a webhook can call a Plandalf Webhook Trigger URL, which then runs Enroll in Promo for that contact. Countdown in a marketing email PlandalfHubSpot By hand An image tag in an HTML module uses HubSpot's contact email token in the `ref` value, so each contact has their own deadline. ## Post paid Next.js buyers to HubSpot This assumes the App Router, a client provider that loads the Plandalf script, and a HubSpot private app. 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. ## What sellers do with Next.js and HubSpot ### SaaS signup pages on Next.js A product team sells a paid plan from a pricing route and passes the signed-in user's JWT so checkout knows the account. HubSpot gets the contact, and sales sees the plan as a property. ### Courses with a gated dashboard A creator app grants the dashboard from the route handler after verifying the invoice, and the same handler writes the buyer to HubSpot for follow-up. ## Limits and gotchas - 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. ## Next.js and HubSpot: common questions 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. ## Guides for this pair - [Plandalf with Next.js](https://plandalf.com/platforms/nextjs) - [Plandalf with HubSpot](https://plandalf.com/platforms/hubspot) - [Next.js setup guide](https://plandalf.com/docs/platforms/nextjs) - [Identify customers](https://plandalf.com/docs/sdk/identity) - [Live events](https://plandalf.com/docs/sdk/events) - [Webhooks reference](https://plandalf.com/docs/api/webhooks) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Next.js and HubSpot - [**Next.js + Kit (ConvertKit)**Next.js runs the product and the page, Plandalf runs checkout, and Kit tags and emails the buyer through native steps.](https://plandalf.com/apps/nextjs/integrations/convertkit) - [**Next.js + Klaviyo**Your Next.js app owns the page, Plandalf owns checkout, and the paid order lands in Klaviyo as an event that can start a flow.](https://plandalf.com/apps/nextjs/integrations/klaviyo) - [**Next.js + Mailchimp**Next.js hosts the buying action, Plandalf takes payment, and native steps put the buyer in a Mailchimp audience with tags and an event.](https://plandalf.com/apps/nextjs/integrations/mailchimp) - [**React + HubSpot**React opens the checkout, Plandalf takes payment, and the paid user becomes a HubSpot contact through a webhook step.](https://plandalf.com/apps/react-app/integrations/hubspot) - [**Stripe + HubSpot**A Stripe-paid Plandalf checkout can create or update the buyer in HubSpot through a webhook, and a HubSpot workflow can start a Plandalf countdown.](https://plandalf.com/apps/stripe/integrations/hubspot) - [**HubSpot + Klaviyo**Plandalf sits beside HubSpot and Klaviyo: one checkout writes the buyer to both by webhook, and each can start a Plandalf sequence.](https://plandalf.com/apps/hubspot/integrations/klaviyo) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [HubSpot CRM API: contacts](https://developers.hubspot.com/docs/api/crm/contacts), [HubSpot private apps overview](https://developers.hubspot.com/docs/apps/legacy-apps/private-apps/overview), [HubSpot: use webhooks with workflows](https://knowledge.hubspot.com/workflows/how-do-i-use-webhooks-with-hubspot-workflows), [Next.js: load and optimize scripts](https://nextjs.org/docs/app/guides/scripts).