Offer configuration stays visible
Use Offers to decide what Next.js receives: product, price, buyer, checkout mode, invoice, and automation context.
What it does
- Hosts pagesHosted checkout pagesBuy button
- Custom HTML blocksTotally custom checkout layoutsBuy button
- Embed-script supportBuy buttonSDK
Product surfaces
Where Next.js fits in the buying workflow
Integrations work best when the checkout surface, payment state, invoice record, and post-purchase automation all point at the same commercial object. These product screens show the Plandalf controls that should be configured before Next.js receives checkout, payment, tax, or workflow context.
Checkout layout and selling blocks stay editable
Before Next.js enters the stack, operators still need checkout templates, products, prices, coupons, order bumps, upsells, and branded offer content they can inspect.
Purchase events can start follow-up
Next.js should fit into the work after checkout: fulfilment, records, CRM updates, support context, webhooks, and sequences.
The buying surface can live where the buyer is
Next.js can start the sale through a hosted checkout, embedded checkout, modal, inline flow, or buy button depending on the stack.
Builder paths
Stack guides that use Next.js
Use these stack guides when a builder needs the whole path: sales surface, Plandalf offer, payment handoff, automation, fulfilment, records, and downstream integrations.
The Affiliate Tax LaunchConnect affiliate sales, payment options, live tax calculation, and post-purchase reconciliation.The Founder ListShip a first paid product with three tools and no automation platform in the middle.The Global SaaSCharge the right VAT in 30 countries without writing tax logic, and follow up with the right receipt.The Indie SaaSRun the entire trial-to-paid lifecycle without writing a single email template in code.The Pricing Packaging LabModel the catalog and pricing system before sending plan changes into lifecycle messaging.
Next.js stack recipes
Find full stack guides that pair Next.js with checkout, payment, automation, fulfilment, records, and downstream integrations.
Offers overview
Use Offers to package products, prices, checkout pages, invoices, coupons, payment options, and follow-up context.
Hosted checkout
Use hosted checkout when Next.js should hand the buyer to a branded Plandalf checkout page.
SDK checkout
Use SDK checkout when Next.js belongs inside an app, custom site, or API-first stack.
Webhooks
Route checkout events, purchase events, payment state, invoices, and customer context into another tool.
Checkout completed fulfilment
Turn a completed checkout into access, receipts, CRM updates, support context, and records.
Overview
Next.js apps load the Plandalf SDK via the framework’s <Script>
component in the root layout. Once loaded, the SDK recognises
data-plandalf-* attributes on any rendered element — server or client
components both work.
Pair it with
Connect Next.js with…
Platforms whose roles complement Next.js inside a Plandalf sequence.
Next.js + ActiveCampaign
Capture form leads on Next.js straight into ActiveCampaign.
Next.js + beehiiv
Capture form leads on Next.js straight into beehiiv.
Next.js + Kit (ConvertKit)
Capture form leads on Next.js straight into Kit (ConvertKit).
Next.js + Customer.io
Capture form leads on Next.js straight into Customer.io.
Next.js + Drip
Capture form leads on Next.js straight into Drip.
Next.js + Flodesk
Capture form leads on Next.js straight into Flodesk.
Integration methods
How Next.js connects to Plandalf
Each method below is the minimum viable setup. Pick the one closest to how you already use Next.js with checkout, payments, invoices, webhooks, API work, SDK checkout, and integrations.
- Method 1
Embed a Plandalf buy button
Drop the Plandalf embed script into a Next.js HTML block and tag any element with `data-plandalf-present` to open the configured flow on click.
<script src="https://cdn.plandalf.com/embed.js" async></script> <button data-plandalf-present="offer_abc123"> Buy now </button>
FAQ
Common questions about the Next.js integration
Do I need a paid plan to use Next.js with Plandalf?
Plandalf itself is free to connect to Next.js. You only need a Next.js account that allows API access, which is almost every paid plan.
How long does setup take?
Under 10 minutes — paste a webhook URL into Next.js, point it at the Plandalf endpoint, and trigger a test event to confirm.
Can I disconnect Next.js later without losing data?
Yes. Disconnecting only revokes the credentials — historical events Plandalf fired stay in your sequence logs, and Next.js's own records are untouched. You can reconnect any time and resume from the last seen event.
Does Plandalf store Next.js data?
Plandalf stores the minimum IDs needed to address a record in Next.js plus a log of events Plandalf fired. Source-of-truth data stays in Next.js.
What if my website need isn't covered by the actions or triggers listed here?
Drop into the Plandalf REST API and call Next.js directly from your sequence's HTTP action. Anything Next.js's public surface exposes is reachable.
Is there a usage limit?
There's no Plandalf-side limit. Next.js's own plan limits apply.
Where do I find Next.js's own documentation?
Next.js's homepage at https://nextjs.org links to their developer docs. For Plandalf-side questions about the Next.js integration, see the Plandalf docs.