Website integration
Add checkout to your Next.js app
Connect Plandalf checkout, promo countdowns and partner referrals to Next.js App Router.
Use the organization SDK in client components. Verify the payment sandbox before testing.
Next.js
Stripebuy button clickedcheckout.completedredirect to thank-you
Overview
How Next.js and Plandalf split the work
Next.js handles your routes and application. Plandalf supplies checkout and purchase records.
Checkout embed available
Load the SDK once below your root layout, wait for readiness and give each route ownership of its checkout and promo handles. The guide includes real App Router replay evidence, a sandbox purchase and the remaining delivery checks.
Next.js owns
- Your pages, design and traffic
- Hosting and the domain
Plandalf owns
- The buy button and the checkout
- Payment, receipts and subscriptions
- What runs after the sale
Set it up
Connect Next.js in three steps
The short version. The Next.js setup guide has the full walkthrough and the test-mode checks.
- 1
Prepare the test checkout
Publish the intended offer, copy its public SDK URL and slug, and verify the actual provider sandbox and price.
- 2
Load the SDK in your layout
Use next/script in a client provider. Wait for Plandalf readiness before mounting route-owned checkout and promo components.
- 3
Replay navigation and purchase
Test route departure, browser Back and reload. Then reconcile the processor payment, paid invoice, partner and promised delivery.
- Read the Next.js setup guide →
- Browse Next.js connections →
Connect each product to Next.js
Follow the setup for each product, then verify its customer outcome.
| Product | Set it up | Verify before launch |
|---|---|---|
| Checkouts → | A client component with a buying action or inline target. | Correct offer, matching paid invoice and processor payment. |
| Timers / Promos → | A route-owned countdown and the same promo on checkout. | Persistent visitor deadline, tier transitions and charged amount. |
| Affiliates · early access → | SDK on the partner landing route and optional referral badge. | Attributed paid sale, commission decision, refund and renewal. |
Local App Router replay covers route cleanup, tier transitions, a USD 50 sandbox purchase with test attribution, decline and refund reconciliation. The receipt refund display is repaired locally. Automatic webhook delivery, destination delivery and deployed builds remain open; SDK and receipt repairs are unreleased.
Read the automation scope →Integrations
Keep your site. Upgrade how it sells.
Plus a fully documented REST API and webhook layer for whatever’s not in the list.
Questions
Common questions about Next.js and Plandalf
The short answers. The docs have the long ones.
Can checkout run in a Server Component?
Render the browser integration in a client component. Keep API credentials, customer-token signing and entitlement checks on your server.
Where should I load the script?
Use next/script below a shared root layout. A client provider can handle script callbacks and wait for the separate Plandalf ready callback.
What happens when a route changes?
Close page-owned handles during cleanup. A shared layout persists across navigation, so handles owned there need explicit cleanup when the buying flow ends.
Was Pages Router tested?
The recorded replay uses Next.js 16.3.8 App Router. Pages Router needs its own install and navigation replay.
Does a referral badge prove commission?
It proves capture. Verify the paid sale and commission decision against the invoice, then test refunds and applicable renewals.
The team
Built by a team obsessed with conversion.
15+ years building SaaS businesses together. Every part of Plandalf comes from a real checkout problem we’ve had to solve ourselves.
No credit card required. Nothing to migrate.