> Add a PayPal option to a React app through a Plandalf checkout opened by a button or the React hooks. No PayPal SDK in your bundle, sandbox steps included. Source: https://plandalf.com/apps/paypal/integrations/react-app Last modified: 2026-10-26 Checkout embed # PayPal + React integration A React button or hook opens the Plandalf checkout, and PayPal is a payment option on that offer. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **PayPal** **React** ## Does PayPal integrate with React? Plandalf does not ship PayPal components for React. Your app opens a Plandalf checkout from an attribute-driven button or the React hooks, and PayPal is enabled for the offer in Plandalf. Starting with attributes is the recommended first install; the hooks are for shared SDK state. ## What moves between PayPal and React Event From and to Through What happens Checkout opened ReactPlandalf Checkout embed A button with `data-plandalf-present` works even when React renders it after page load. `data-plandalf-mount` shows an inline checkout. Pay with PayPal PlandalfPayPal Payment connection The option shows on offers where you added PayPal. Approval happens at PayPal, then the buyer returns to the checkout. Checkout state in the UI PlandalfReact Checkout embed FlowHandle events let a component react to checkout changes. They update the screen only; they do not prove entitlement. Durable access PlandalfYour server Webhook A Send Webhook step posts the paid invoice to your API. Grant access there after checking the invoice, and test a delayed or duplicate delivery. Refund PayPalYour server By hand Plandalf documents Invoice Refunded for Stripe refunds. After a PayPal refund, take access away yourself. ## Open a PayPal-ready Plandalf checkout from a React component You need a published offer with PayPal added, the organization's public SDK URL, and a React app where you control the HTML shell. 1. ### Enable PayPal on the offer Connect the PayPal Business account in Plandalf and add PayPal to the offer. Check the offer opens correctly in test mode before touching React. 2. ### Load the SDK in the shell Add the organization script to your HTML document, or let `PlandalfProvider` manage the SDK instance. The package notes say the hosted script is the current recommended path. 3. ### Render the button Return a `button` with `data-plandalf-present` and the offer slug. If the button mounts late, the SDK still discovers it. 4. ### Add identity only when needed For a signed-in buyer, call `identify()` with a token your server signed, or pass the user per call. Anonymous checkouts need neither. 5. ### Sandbox PayPal, then reopen Approve one sandbox payment, finish any optional steps, then reopen checkout from the same button. Do a separate attempt you abandon at PayPal and confirm no paid invoice appears. 6. ### Test route and Strict Mode behavior Leave the route with checkout open, return, and test Strict Mode separately from your production build. Check there is one checkout frame. ## What sellers do with PayPal and React ### Pricing screen in a single-page app A React app lists three plans with a button each. Every button opens its own offer, and customers outside card-first habits pick PayPal. ### In-product paywall A gated feature in a React dashboard opens an upgrade offer. On completion the component refreshes, and a server check decides whether the feature really unlocks. ## Limits and gotchas - The React guide's local replays used a Stripe sandbox, and it lists refunds, delivery and a clean setup-to-purchase run as unverified. Verify PayPal on your own deployment. - The React package examples are v2 workspace examples, not instructions for the older public npm release. Read the package version note first. - Browser events must not grant permanent membership or paid downloads. Check the entitlement on your server. - Do not put secrets or signing keys in React or public environment variables. ## PayPal and React: common questions Does PayPal integrate with React? Plandalf does not provide PayPal components. A React app opens a Plandalf checkout, and PayPal is a payment option on the offer. How do I add PayPal to a React app? Enable PayPal on a Plandalf offer, load the Plandalf SDK in your HTML shell and render a button with `data-plandalf-present`. Do I need the React package for PayPal checkout? No. The attribute-first install works without it. The package adds hooks and context for apps that share SDK state. Can I reopen the checkout after a PayPal payment in React? The guide reopened the same button after a purchase on the same page. Repeat that check with PayPal in your own app. ## Guides for this pair - [Plandalf with PayPal](https://plandalf.com/platforms/paypal) - [Plandalf with React](https://plandalf.com/platforms/react-app) - [PayPal on Plandalf checkouts](https://plandalf.com/docs/platforms/paypal) - [React guide](https://plandalf.com/docs/platforms/react-app) - [React package notes](https://plandalf.com/docs/sdk/react) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from PayPal and React - [**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) - [**PayPal + Zapier**Plandalf sends each PayPal-paid checkout to a Zap with Send Webhook, and a Zap can start a Plandalf sequence back.](https://plandalf.com/apps/paypal/integrations/zapier) - [**React + Klaviyo**React renders the buy button, Plandalf takes the payment, and a webhook step carries the order to Klaviyo.](https://plandalf.com/apps/react-app/integrations/klaviyo) - [**Stripe + React**A React app can open a Plandalf checkout from a data attribute or a hook, and Stripe processes the payment.](https://plandalf.com/apps/stripe/integrations/react-app) - [**React + HubSpot**React opens the checkout, Plandalf takes payment, and the paid user becomes a HubSpot contact through a webhook step.](https://plandalf.com/apps/react-app/integrations/hubspot) Checked October 26, 2026 against Plandalf's own setup guides.