Stripe + React integration

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.

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.

• 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.

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.

Checked October 26, 2026 against Plandalf's own setup guides.