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.
Checkout embed
PayPal + React integration
A React button or hook opens the Plandalf checkout, and PayPal is a payment option on that offer.
No credit card required. No coding required.
PayPal
ReactDoes 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 | React → Plandalf | 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 | Plandalf → PayPal | 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 | Plandalf → React | FlowHandle events let a component react to checkout changes. They update the screen only; they do not prove entitlement. | |
| Durable access | Plandalf → Your 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 | PayPal → Your 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.
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.
Load the SDK in the shell
Add the organization script to your HTML document, or let
PlandalfProvidermanage the SDK instance. The package notes say the hosted script is the current recommended path.Render the button
Return a
buttonwithdata-plandalf-presentand the offer slug. If the button mounts late, the SDK still discovers it.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.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.
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
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
- Plandalf with React
- PayPal on Plandalf checkouts
- React guide
- React package notes
More from PayPal and React
- 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.
- PayPal + ZapierPlandalf sends each PayPal-paid checkout to a Zap with Send Webhook, and a Zap can start a Plandalf sequence back.
- React + KlaviyoReact renders the buy button, Plandalf takes the payment, and a webhook step carries the order to Klaviyo.
- Stripe + ReactA React app can open a Plandalf checkout from a data attribute or a hook, and Stripe processes the payment.
- React + HubSpotReact opens the checkout, Plandalf takes payment, and the paid user becomes a HubSpot contact through a webhook step.
Checked October 26, 2026 against Plandalf's own setup guides.