> Add a Stripe-backed Plandalf checkout to a React app with plain data attributes, or with the provider and hooks when the app needs shared state. Source: https://plandalf.com/apps/stripe/integrations/react-app Last modified: 2026-10-26 Checkout embed # Stripe + React integration A React app can open a Plandalf checkout from a data attribute or a hook, and Stripe processes the payment. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **Stripe** **React** ## Does Stripe integrate with React? Plandalf is not a Stripe component library for React. It gives a React app two ways to open its checkout: data attributes on JSX elements after one script load, or a provider and hooks from the React package. Either way the payment runs through the Stripe account connected in Plandalf. ## What moves between Stripe and React Event From and to Through What happens User clicks a buy button ReactPlandalf Checkout embed A `button` with `data-plandalf-present` opens the offer in a modal. A div with `data-plandalf-mount` renders it inline. The SDK picks up elements React adds after page load. Payment PlandalfStripe Payment connection The charge is made in your connected Stripe account, and your React bundle never holds a Stripe secret. Checkout state changes PlandalfReact Checkout embed With the React package, a hook such as `usePresent` returns `present` and a `presenting` flag, and the SDK's handle can emit events your components subscribe to. Subscription or invoice events Plandalf (paid via Stripe)React Webhook Your backend, not the browser, should learn about paid invoices. A sequence can post them to an endpoint you control with Send Webhook. ## Wire a Stripe-backed upgrade button into a React app You need a published Plandalf offer with a Stripe price, and the ability to edit your HTML shell and a component. 1. ### Connect Stripe and publish Authorize Stripe in Plandalf, add the price to the offer and publish. Copy the offer slug and your public SDK URL from the share code. 2. ### Load the SDK once Put the Plandalf script tag in your HTML shell with `defer`. Do not place an API secret or signing key in React code or a public environment variable. 3. ### Render the attribute button Add a JSX `button` with `data-plandalf-present` set to the slug, `data-plandalf-frame` set to modal and `data-plandalf-mode` set to test. This is the simplest install and works for pricing screens and in-app upgrades. 4. ### Key the component When the offer or promo can change, render the button with a `key` made from both values and close the old handle in the effect cleanup. Updating attributes on an element the SDK already bound is not enough. 5. ### Move to hooks if needed If the app needs gates or shared state, wrap it in `PlandalfProvider` and call `usePresent`. The React package page explains which package version those examples assume. 6. ### Test with a Stripe test card Confirm the connected Stripe account is a test account, pay with a test card, then reopen checkout from the same button and try a declined card. Check each result against the Plandalf invoice. ## What sellers do with Stripe and React ### In-app upgrade from a settings screen A SaaS app adds an Upgrade button to its billing screen. The button opens the Pro offer, and the app calls `identify()` so the purchase is tied to the signed-in user. ### Marketing site built in React A landing page built as a React app uses attribute buttons, so designers can move the buy button without touching checkout code. ### Inline checkout in an onboarding step A step in a wizard mounts the offer inline with `sdk.mount()` inside an effect and closes the handle on unmount, so the checkout lives inside the flow. ## Limits and gotchas - A promo prop that is empty does not clear a `promo` query parameter on the page. The checkout can still receive the URL's promo, so check which campaign the resulting session used. - React Strict Mode runs an extra setup and cleanup in development. Test mounting and cleanup in a production build too, and confirm your deployed SDK includes the inline cleanup repair the guide describes as unreleased. - The React guide's local replays cover rendering, cleanup, one sandbox purchase and a declined payment. Charged amounts at each promo tier, refunds, renewals and delivery were not verified. - Never grant lasting access from a browser event. Verify the paid purchase on your server before you change a user's plan. - The React package examples are for the v2 workspace, not the older public npm release. Check the package version note before copying them. ## Stripe and React: common questions Does Stripe integrate with React? Plandalf adds a Stripe-backed checkout to a React app without you writing Stripe Elements code. Load the script, render a button with `data-plandalf-present`, and the payment runs in your Stripe account. How do I add a Stripe checkout to a React app? Connect Stripe to Plandalf, publish an offer, load the Plandalf script in your HTML shell and render a JSX button with the offer slug. Use the provider and hooks only if you need shared state. Should I use data attributes or the React package? Start with attributes, which the SDK finds even when React renders them later. Use `PlandalfProvider` and hooks when the app needs gates, context or per-call user identity. Why does the React button open the old offer after a prop change? The SDK reads the offer and promo once, when it binds the element. Add both to the component's `key` so React creates a new element. ## Guides for this pair - [Plandalf with Stripe](https://plandalf.com/platforms/stripe) - [Plandalf with React](https://plandalf.com/platforms/react-app) - [Plandalf in a React app](https://plandalf.com/docs/platforms/react-app) - [React package and hooks](https://plandalf.com/docs/sdk/react) - [Identify customers](https://plandalf.com/docs/sdk/identity) - [Connect Stripe](https://plandalf.com/docs/platforms/stripe) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Stripe and React - [**Stripe + Tolt**A Stripe sale that came through a Tolt referral link is registered in Tolt with the affiliate and recorded per product from the paid Plandalf invoice.](https://plandalf.com/apps/stripe/integrations/tolt) - [**Stripe + Vue**A Vue 3 component renders a button, the browser SDK opens the checkout, and your Stripe account takes the payment.](https://plandalf.com/apps/stripe/integrations/vue-app) - [**Stripe + Webflow**Style the button in Webflow Designer, add one custom attribute, and a Plandalf checkout charging your Stripe account opens from it.](https://plandalf.com/apps/stripe/integrations/webflow) - [**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) - [**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) - [**PayPal + React**A React button or hook opens the Plandalf checkout, and PayPal is a payment option on that offer.](https://plandalf.com/apps/paypal/integrations/react-app) Checked October 26, 2026 against Plandalf's own setup guides.