> Load the Plandalf SDK once in a Next.js App Router layout and open a Stripe-backed checkout from a client component, with route cleanup and a countdown. Source: https://plandalf.com/apps/stripe/integrations/nextjs Last modified: 2026-10-26 Checkout embed # Stripe + Next.js integration In a Next.js app the Plandalf SDK runs in client components, and the checkout it opens charges your connected Stripe account. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **Stripe** **Next.js** ## Does Stripe integrate with Next.js? Plandalf has no Next.js package to install. You load the organization SDK with next/script in a client provider, render a button after the SDK is ready, and the checkout it opens takes payment through the Stripe account you connected in Plandalf. Access control stays on your server. ## What moves between Stripe and Next.js Event From and to Through What happens Button opens checkout Next.jsPlandalf Checkout embed A client component renders a button with `data-plandalf-present`, or calls the ready SDK's `present()` or `mount()`. Server components must not touch `window` or open checkout. Payment PlandalfStripe Payment connection Plandalf creates the checkout session against your connected Stripe account, and Stripe processes the card. Checkout completed Plandalf (paid via Stripe)Next.js Webhook A sequence on Checkout Completed or Invoice Paid can post the buyer and invoice to a route handler you write. Browser events can update the page but should not grant durable access. Route change Next.jsPlandalf Checkout embed A modal or inline checkout opened by a page component should be closed from its effect cleanup, because a shared root layout does not unmount when a child route changes. ## Open a Stripe checkout from the Next.js App Router You need a published Plandalf offer on a Stripe price and a Next.js app using the App Router. 1. ### Connect Stripe and publish Authorize Stripe in Plandalf, attach a price to the offer and publish it. Copy the offer slug and your organization's SDK URL, which are public configuration. 2. ### Add a client provider Create a client component that renders `next/script` with the SDK URL and `strategy` set to `afterInteractive`. In its `onReady` callback call `plandalf('ready', ...)` and store the SDK in context. 3. ### Mount the provider in the root layout Wrap `children` in the provider in `app/layout`, so client navigation reuses one SDK instance instead of loading it per route. 4. ### Render the button after the SDK is ready In a client component return `null` or a loading line until the SDK exists, then render a button with `data-plandalf-present` set to your offer slug. Use `data-plandalf-mode` set to test while rehearsing. 5. ### Close handles when the route leaves Return a cleanup from the effect that calls the handle's `close()`. If the offer or promo changes, give the button a new React `key` that includes it, because changing an attribute on a bound element does nothing. 6. ### Test the paid path Check that the Stripe test connection is the one in use, pay with a Stripe test card, and match the Plandalf invoice to the Stripe payment before any live traffic. ## What sellers do with Stripe and Next.js ### SaaS pricing page A product team replaces a hand-built billing form with an upgrade button on its pricing route. Your server still reads the Stripe subscription before it changes a user's plan. ### Launch page with a shared deadline A launch route mounts the promo countdown in an effect with `sdk.promo()`, and the buy button applies the same promo, so the Stripe charge matches the tier on screen. ### Partner landing route A route reached through a partner link loads the SDK before checkout, so the referral is captured when the visitor later pays through Stripe. ## Limits and gotchas - Use client components only. The SDK's `onReady` and `onLoad` handlers in next/script work only inside client components, and server rendering must not open checkout or create widgets. - The guide's replay used the App Router. The Pages Router and signed-in customer checkout need their own testing. - Some SDK repairs for countdown ownership and inline cleanup were unreleased when the guide was written. Repeat the route-change and cleanup checks against your deployed SDK. - Browser checkout events can update the UI, but your server should verify the paid purchase before it grants access. Plandalf's Send Webhook is a configured HTTP call, not a signed payment subscription. - Keep API keys and signing secrets out of client bundles. The SDK URL and offer slug are the only values the browser needs. ## Stripe and Next.js: common questions Does Stripe integrate with Next.js? Plandalf gives a Next.js app a Stripe-backed checkout without a Stripe SDK in your code. Load the Plandalf script in a client component, render a button, and the payment runs in your connected Stripe account. How do I add a Stripe checkout to a Next.js app? Connect Stripe to Plandalf, publish an offer, add a client provider that loads the script with next/script, and render a `data-plandalf-present` button once the SDK is ready. Do I need a webhook route for Plandalf in Next.js? Only if your app must react to a sale, for example to grant access. A Plandalf sequence can send a webhook to a route handler you write, and that handler should verify the paid invoice. Why does my Next.js checkout button not change when I change the offer? The SDK reads the offer and promo when it first binds a button. Give the component a new React `key` containing both values so a fresh element is created. ## Guides for this pair - [Plandalf with Stripe](https://plandalf.com/platforms/stripe) - [Plandalf with Next.js](https://plandalf.com/platforms/nextjs) - [Plandalf on Next.js](https://plandalf.com/docs/platforms/nextjs) - [Connect Stripe](https://plandalf.com/docs/platforms/stripe) - [Webhooks and catch URLs](https://plandalf.com/docs/api/webhooks) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Stripe and Next.js - [**Stripe + Teachable**The course is sold in a Plandalf checkout and paid through Stripe. Teachable delivers it, enrolling the student on payment and removing them on a refund.](https://plandalf.com/apps/stripe/integrations/teachable) - [**Stripe + Thinkific**A paid Plandalf checkout enrols the buyer in a Thinkific course or bundle, and a full refund through Stripe ends that access.](https://plandalf.com/apps/stripe/integrations/thinkific) - [**Stripe + Tolt**A Stripe sale that came through a Tolt referral link is registered in Tolt with the affiliate and recorded per product from the paid Plandalf invoice.](https://plandalf.com/apps/stripe/integrations/tolt) - [**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 + 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 + 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) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [Next.js docs: loading scripts](https://nextjs.org/docs/app/guides/scripts).