Stripe + Next.js integration

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.

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.

• 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.

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.

Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: Next.js docs: loading scripts.