Developer tool launches
A founder sells licences from a Next.js landing route. Buyers get a Licence tag, and a Kit sequence delivers setup docs and a feedback request.
Checkout embed
Next.js + Kit (ConvertKit) integration
Next.js runs the product and the page, Plandalf runs checkout, and Kit tags and emails the buyer through native steps.
No credit card required. No coding required.
Next.js
Kit (ConvertKit)Does Next.js integrate with Kit (ConvertKit)?
Plandalf has native Kit steps, so the Kit side needs no code in your Next.js app. The app loads the SDK and opens the checkout; a Plandalf sequence on Checkout Completed then tags the subscriber and adds them to a form or sequence. Kit events can start Plandalf sequences.
What moves between Next.js and Kit (ConvertKit)
| Event | From and to | Through | What happens |
|---|---|---|---|
| Checkout opened | Next.js → Plandalf | A client component renders data-plandalf-present once the SDK is ready, or opens the offer from code with the ready SDK. | |
| Checkout completed | Plandalf → Kit | Native step | Tag Subscriber and Add Subscriber to Sequence run inside Plandalf, using the buyer's email from the trigger. |
| Upsell accepted | Plandalf → Kit | Native step | A separate sequence can set a custom field or second tag for upsell buyers. |
| Tag added | Kit → Plandalf | Native step | Saving the trigger makes Plandalf add the Kit webhook. A common use is Enroll in Promo for people who get a launch tag. |
| Access decision | Plandalf → Next.js | Webhook | A Send Webhook step to a route handler gives your own app the paid event, which is the safe place to grant access. A Kit tag is not proof of payment. |
Connect a Next.js checkout to Kit with no extra API code
Pair this with the signed identity guide if your buyers are logged in.
Add the provider
Create a client provider that loads the script with
next/scriptand registersplandalf('ready', ...). Place it below the root layout so navigation reuses the loaded SDK.Add a checkout button as a client component
Render
data-plandalf-presentwith the offer slug after readiness, and close the handle from an effect cleanup when the route owning it unmounts.Create the V4 key in Kit
In Kit open Settings, Developer, V4 Keys, Add a new key. Use the V4 key, not the legacy one beside it.
Connect Kit and build the sequence
Under Automation, Marketplace, connect Kit. Create a sequence on Checkout Completed, add Kit, Tag Subscriber with email
{{trigger.customer_email}}and a tag like Next.js customer, then Kit, Add Subscriber to Sequence.Test with a sample record
Pick a recent checkout on the trigger's Test tab so variables fill in. Run each step with your own address, since a test makes a real change in Kit.
What sellers do with Next.js and Kit (ConvertKit)
Paid workshops on a custom site
A trainer uses a Next.js booking page. Each paid seat adds a tag per cohort date so Kit reminders reach only the right group.
Limits and gotchas
- Purchases do not appear in Kit's purchase history. Plandalf connects with a Kit API key, so record purchases with tags or custom fields.
- Kit adds the buyer as a subscriber if they are new, so check your terms cover marketing email.
- Browser SDK events can refresh your UI but must not grant paid features. Verify payment on your server.
- The Next.js guide's replay used local SDK repairs that were not yet released, so check cleanup behaviour on your deployed script.
- There is no subscription-cancelled trigger, so a cancelled plan leaves the Kit tag in place unless you remove it.
Next.js and Kit (ConvertKit): common questions
- Does Next.js integrate with Kit?
- Through Plandalf. Your Next.js app opens the checkout, and Plandalf's native Kit steps tag the buyer after payment. Nothing in your app calls Kit.
- How do I connect Next.js to ConvertKit?
- Load Plandalf's script with a client provider, connect Kit under Automation using a V4 key, then build a Checkout Completed sequence with Tag Subscriber.
- Can a Kit tag grant access in my Next.js app?
- It should not. Use the paid invoice, verified on your server, to grant access, and use the Kit tag for email segmentation.
Guides for this pair
- Plandalf with Next.js
- Plandalf with Kit (ConvertKit)
- Next.js setup guide
- Kit setup guide
- Live events
More from Next.js and Kit (ConvertKit)
- Next.js + beehiivPlandalf does not create beehiiv subscribers after a purchase. Next.js hosts the checkout, and beehiiv can link to it.
- Next.js + HubSpotA Next.js client component opens the Plandalf checkout, and a paid order reaches HubSpot as a contact through a webhook step.
- Next.js + KlaviyoYour Next.js app owns the page, Plandalf owns checkout, and the paid order lands in Klaviyo as an event that can start a flow.
- Flodesk + Kit (ConvertKit)Flodesk segments can start Kit tags and sequences through a Plandalf catch URL, and a checkout can write the buyer to both.
- Kajabi + Kit (ConvertKit)One paid checkout grants the Kajabi offer and tags the buyer in Kit, from a single Plandalf sequence.
- Klaviyo + Kit (ConvertKit)Kit gets native Plandalf steps, Klaviyo gets a webhook call to its API, and one checkout can feed both.
Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: Next.js: load and optimize scripts.