SaaS upgrade modal
A Next.js dashboard opens the Pro offer from a client component. Customers who do not want to enter a card pick PayPal, and a webhook flips the account's plan.
Checkout embed
PayPal + Next.js integration
A client component opens the Plandalf checkout, PayPal is a payment option there, and your server confirms the paid invoice.
No credit card required. No coding required.
PayPal
Next.jsDoes PayPal integrate with Next.js?
Plandalf has no PayPal package for Next.js. Your app loads the Plandalf browser SDK in a client provider and renders buying actions in client components; PayPal is switched on for the offer in Plandalf. The payment check and any protected access belong on your server.
What moves between PayPal and Next.js
| Event | From and to | Through | What happens |
|---|---|---|---|
| Checkout opened | Next.js → Plandalf | A provider below the root layout loads the SDK with next/script. A button or sdk.present call in a client component opens the offer. | |
| Pay with PayPal | Plandalf → PayPal | Payment connection | PayPal appears in the checkout for offers where it was added. The buyer approves at PayPal and returns to the checkout. |
| Checkout completed | Plandalf (paid via PayPal) → Next.js | The same completion path runs as after a card, so browser events can refresh the UI and sequences can run on the paid invoice. | |
| Entitlement | Plandalf → Next.js server | Webhook | A sequence with Send Webhook can call a Route Handler on your app. Verify the paid invoice there and deduplicate by invoice before granting anything. |
| Refund | PayPal → Next.js server | By hand | A PayPal refund does not start Invoice Refunded, which is documented for Stripe. Revoke access from your own admin or a sequence you trigger. |
Wire a PayPal-ready Plandalf checkout into an App Router app
You need a published Plandalf offer with PayPal added, your organization's SDK URL, and a Next.js app with a root layout.
Add PayPal to the offer
Connect your PayPal Business account in Plandalf and enable PayPal on the offer. The SDK URL and offer slug are public configuration; keep secrets out of client bundles.
Create the provider
Write a
'use client'provider that loads the SDK withnext/scriptandafterInteractive, and exposes the ready SDK through context. Mount it below the root layout so client navigation reuses it.Render the button in a client component
Add a component that opens the offer from a button. Do not touch
windowor open checkout during server rendering.Rehearse with the sandbox
Use
data-plandalf-mode='test'and a connected PayPal sandbox. Approve one payment, cancel another at PayPal, and compare each result with the invoice in Plandalf.Test route changes
Open checkout, navigate away, come back with the browser Back button, and open it again. Check that only one checkout opens.
Verify on the server
Point a Send Webhook step at a Route Handler, check the invoice, and only then mark the user as entitled.
What sellers do with PayPal and Next.js
Digital download behind a layout
A creator's Next.js storefront gates downloads on a server check. The page can show the success state immediately, but the file unlocks only after the invoice check.
Limits and gotchas
- Next.js documents its local replays with Stripe sandbox payments. Run your own PayPal sandbox payment, a cancel at PayPal and a decline before launch.
- The Next.js guide marks refund verification as incomplete and notes a stale 'Paid' label fix that is not released. Check current payment records before deciding access after a refund.
- Do not grant permanent access from a browser event. Confirm the paid invoice on the server and handle duplicate deliveries.
- Keep API keys and signing secrets out of client components. Only the SDK URL and slugs are public.
PayPal and Next.js: common questions
- Does PayPal integrate with Next.js?
- Through Plandalf rather than a package. A Next.js client component opens a Plandalf checkout, and PayPal is a payment option you enable on the offer.
- How do I add PayPal payments to a Next.js app?
- Enable PayPal on the Plandalf offer, load the Plandalf SDK in a client provider with
next/script, and open the offer from a client component. - Can I use PayPal with the Next.js App Router and Plandalf?
- Yes, the Plandalf guide is written for the App Router. Keep the SDK work in client components and verify payments on the server.
- How do I know a PayPal payment worked in my Next.js app?
- Match the paid invoice in Plandalf, then check it in a server route that a Send Webhook step calls. The browser event alone is only for updating the screen.
Guides for this pair
- Plandalf with PayPal
- Plandalf with Next.js
- PayPal on Plandalf checkouts
- Next.js guide
- Customer identity
More from PayPal and Next.js
- PayPal + VueA Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards.
- PayPal + WebflowStyle the button in Webflow, add one custom attribute, and the Plandalf checkout it opens can take PayPal.
- PayPal + WordPressA Custom HTML block on a WordPress page opens your Plandalf checkout, where PayPal sits beside cards as a payment option.
- 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.
- 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.
Checked October 26, 2026 against Plandalf's own setup guides.