> A Next.js app opens the Plandalf checkout, and the paid order reaches Klaviyo as a profile and event through a server route or a webhook step. Source: https://plandalf.com/apps/nextjs/integrations/klaviyo Last modified: 2026-10-26 Checkout embed # Next.js + Klaviyo integration 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. [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** **Klaviyo** ## Does Next.js integrate with Klaviyo? Plandalf has no native Klaviyo steps. A Next.js client component opens the checkout; after payment a Send Webhook step can post to Klaviyo's events API directly or to a route handler in your app. Klaviyo flows can also post to a Plandalf catch URL to enrol a profile in a promo. ## What moves between Next.js and Klaviyo Event From and to Through What happens Checkout opened Next.jsPlandalf Checkout embed The provider loads the SDK with `next/script`, and a client component renders `data-plandalf-present` after the SDK is ready. Checkout completed PlandalfKlaviyo Webhook Send Webhook calls your route handler, which creates the event on Klaviyo's `/api/events` endpoint with a metric name, the profile's email, properties and a numeric `value`. Profile update PlandalfKlaviyo Webhook The same handler can call the profile import endpoint, which creates a profile (201) or updates an existing one (200). Flow webhook KlaviyoPlandalf Webhook A flow webhook action posts to a Plandalf Webhook Trigger URL, and Enroll in Promo gives that profile a countdown. Countdown inside a flow email PlandalfKlaviyo By hand The Plandalf countdown image tag goes into an HTML block, with Klaviyo's person email merge tag as the `ref`. ## Turn a Next.js purchase into a Klaviyo event A route handler keeps the Klaviyo private key on the server and gives you somewhere to shape the body Klaviyo expects. 1. ### Add the provider and a client button Wrap the root layout's children in a client provider that loads the Plandalf script with `next/script`. Render the checkout button only after the SDK's ready callback has fired, so server rendering never touches `window`. 2. ### Sign identity for logged-in users If buyers have accounts, sign a Plandalf customer JWT on your server with `sub`, `email` and `name`, and pass it with `plandalf.identify(token)` before opening checkout. Keep the signing key off the client. 3. ### Create a Klaviyo private key Make a key with the events write scope, and the profiles write scope if you will also import profiles. Put it in a server-only environment variable. 4. ### Write the route handler Accept a POST with a shared secret header, then call Klaviyo's create event endpoint with the `revision` header, a metric named Plandalf Purchase, the email, a properties object and the amount as `value`. Return quickly, since Klaviyo answers 202 for queued events. 5. ### Send the webhook from Plandalf Start a sequence on Checkout Completed, add Send Webhook to your handler's URL with the secret in Headers, and a JSON payload using `{{trigger.customer_email}}`, `{{trigger.total_amount}}` and `{{trigger.invoice_number}}`. 6. ### Build the Klaviyo flow In Klaviyo make a flow triggered by the Plandalf Purchase metric. Test with a Stripe test card and Run on test purchases switched on. ## What sellers do with Next.js and Klaviyo ### Ecommerce-style Next.js storefronts A small brand with a custom Next.js catalogue sells through Plandalf's checkout. The purchase event drives a post-purchase flow and a replenishment reminder. ### Product-led SaaS with upgrade prompts An app opens the checkout from an upgrade button with the user's JWT. The event lets Klaviyo separate upgraded accounts from free ones in campaigns. ## Limits and gotchas - Klaviyo's events API answers 202, which only means the event was queued. Check the Klaviyo profile's activity before assuming a flow ran. - Klaviyo describes flow webhooks as one-way and requires multi-factor authentication and a Manager, Admin or Owner role to add one. - Send Webhook has a 30 second reply window and no signature. Verify the secret header and dedupe by invoice number in your handler. - Unreleased SDK repairs are noted in the Next.js guide for cleanup and countdown ownership, so test route changes against your deployed script. - A refund does not remove anything in Klaviyo by itself. Add a sequence on Invoice Refunded that posts a refund event if flows should react. ## Next.js and Klaviyo: common questions Does Next.js integrate with Klaviyo? Plandalf has no Klaviyo connector. Your Next.js app opens the Plandalf checkout, and after payment a Send Webhook step or a route handler of yours sends the purchase to Klaviyo's API. How do I send Plandalf purchases to Klaviyo from Next.js? Build a Checkout Completed sequence with Send Webhook pointing at a route handler, and have the handler call Klaviyo's create event endpoint with your private key and a metric name. Can I skip the route handler? You can call Klaviyo directly from Send Webhook if it can send the headers and content type Klaviyo requires. A handler gives you control over the body, and Zapier's Webhooks are the other relay. ## Guides for this pair - [Plandalf with Next.js](https://plandalf.com/platforms/nextjs) - [Plandalf with Klaviyo](https://plandalf.com/platforms/klaviyo) - [Next.js setup guide](https://plandalf.com/docs/platforms/nextjs) - [Identify customers](https://plandalf.com/docs/sdk/identity) - [Webhooks reference](https://plandalf.com/docs/api/webhooks) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Next.js and Klaviyo - [**Next.js + HubSpot**A Next.js client component opens the Plandalf checkout, and a paid order reaches HubSpot as a contact through a webhook step.](https://plandalf.com/apps/nextjs/integrations/hubspot) - [**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) - [**Next.js + MailerLite**Next.js hosts the buying action, Plandalf takes the payment, and MailerLite gets the buyer in a group through native steps.](https://plandalf.com/apps/nextjs/integrations/mailerlite) - [**Mailchimp + Klaviyo**A Plandalf checkout writes the buyer to Mailchimp natively and to Klaviyo through its API, so both lists fill while you decide which one wins.](https://plandalf.com/apps/mailchimp/integrations/klaviyo) - [**PayPal + Klaviyo**Plandalf posts a purchase event for each PayPal-paid checkout to Klaviyo's API, where a flow can pick it up.](https://plandalf.com/apps/paypal/integrations/klaviyo) - [**React + Klaviyo**React renders the buy button, Plandalf takes the payment, and a webhook step carries the order to Klaviyo.](https://plandalf.com/apps/react-app/integrations/klaviyo) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [Klaviyo API: create event](https://developers.klaviyo.com/en/reference/create_event), [Klaviyo API: create or update profile](https://developers.klaviyo.com/en/reference/create_or_update_profile), [Klaviyo help: understanding webhooks in flows](https://help.klaviyo.com/hc/en-us/articles/4534329515931).