> Open a Plandalf checkout from Next.js client components and offer PayPal as a payment method. Keep payment checks on your server. Includes the App Router caveats. Source: https://plandalf.com/apps/paypal/integrations/nextjs Last modified: 2026-10-26 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. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **PayPal** **Next.js** ## Does 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.jsPlandalf Checkout embed 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 PlandalfPayPal 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 Checkout embed 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 PlandalfNext.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 PayPalNext.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. 1. ### 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. 2. ### Create the provider Write a `'use client'` provider that loads the SDK with `next/script` and `afterInteractive`, and exposes the ready SDK through context. Mount it below the root layout so client navigation reuses it. 3. ### Render the button in a client component Add a component that opens the offer from a button. Do not touch `window` or open checkout during server rendering. 4. ### 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. 5. ### Test route changes Open checkout, navigate away, come back with the browser Back button, and open it again. Check that only one checkout opens. 6. ### 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 ### 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. ### 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](https://plandalf.com/platforms/paypal) - [Plandalf with Next.js](https://plandalf.com/platforms/nextjs) - [PayPal on Plandalf checkouts](https://plandalf.com/docs/platforms/paypal) - [Next.js guide](https://plandalf.com/docs/platforms/nextjs) - [Customer identity](https://plandalf.com/docs/sdk/identity) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from PayPal and Next.js - [**PayPal + Vue**A Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards.](https://plandalf.com/apps/paypal/integrations/vue-app) - [**PayPal + Webflow**Style the button in Webflow, add one custom attribute, and the Plandalf checkout it opens can take PayPal.](https://plandalf.com/apps/paypal/integrations/webflow) - [**PayPal + WordPress**A Custom HTML block on a WordPress page opens your Plandalf checkout, where PayPal sits beside cards as a payment option.](https://plandalf.com/apps/paypal/integrations/wordpress) - [**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.