Offer configuration stays visible
Use Offers to decide what React receives: product, price, buyer, checkout mode, invoice, and automation context.
Integration
React
What it does
- Hosts pagesHosted checkout pagesBuy button
- Custom HTML blocksTotally custom checkout layoutsBuy button
- Embed-script supportBuy buttonSDK
Product surfaces
Where React fits in the buying workflow
Integrations work best when the checkout surface, payment state, invoice record, and post-purchase automation all point at the same commercial object. These product screens show the Plandalf controls that should be configured before React receives checkout, payment, tax, or workflow context.
Checkout layout and selling blocks stay editable
Before React enters the stack, operators still need checkout templates, products, prices, coupons, order bumps, upsells, and branded offer content they can inspect.
Purchase events can start follow-up
React should fit into the work after checkout: fulfilment, records, CRM updates, support context, webhooks, and sequences.
The buying surface can live where the buyer is
React can start the sale through a hosted checkout, embedded checkout, modal, inline flow, or buy button depending on the stack.
Builder paths
Stack guides that use React
Use these stack guides when a builder needs the whole path: sales surface, Plandalf offer, payment handoff, automation, fulfilment, records, and downstream integrations.
The API-First ProductSplit transactional email from lifecycle email so each tool does what it's good at.The Developer Webhook StackGive developers a concrete stack for API-led checkout, entitlements, fulfillment, analytics, and custom automations.
React stack recipes
Find full stack guides that pair React with checkout, payment, automation, fulfilment, records, and downstream integrations.
Offers overview
Use Offers to package products, prices, checkout pages, invoices, coupons, payment options, and follow-up context.
Hosted checkout
Use hosted checkout when React should hand the buyer to a branded Plandalf checkout page.
SDK checkout
Use SDK checkout when React belongs inside an app, custom site, or API-first stack.
Webhooks
Route checkout events, purchase events, payment state, invoices, and customer context into another tool.
Checkout completed fulfilment
Turn a completed checkout into access, receipts, CRM updates, support context, and records.
Overview
Plain React apps (Vite, Create React App, Remix, TanStack Start, etc.)
load the SDK via a <script> tag in public/index.html or the
equivalent shell document. Once loaded, any JSX button with a
data-plandalf-present attribute opens the corresponding flow.
Pair it with
Connect React with…
Platforms whose roles complement React inside a Plandalf sequence.
React + ActiveCampaign
Capture form leads on React straight into ActiveCampaign.
React + beehiiv
Capture form leads on React straight into beehiiv.
React + Kit (ConvertKit)
Capture form leads on React straight into Kit (ConvertKit).
React + Customer.io
Capture form leads on React straight into Customer.io.
React + Drip
Capture form leads on React straight into Drip.
React + Flodesk
Capture form leads on React straight into Flodesk.
Integration methods
How React connects to Plandalf
Each method below is the minimum viable setup. Pick the one closest to how you already use React with checkout, payments, invoices, webhooks, API work, SDK checkout, and integrations.
- Method 1
Embed a Plandalf buy button
Drop the Plandalf embed script into a React HTML block and tag any element with `data-plandalf-present` to open the configured flow on click.
<script src="https://cdn.plandalf.com/embed.js" async></script> <button data-plandalf-present="offer_abc123"> Buy now </button>
FAQ
Common questions about the React integration
Do I need a paid plan to use React with Plandalf?
Plandalf itself is free to connect to React. You only need a React account that allows API access, which is almost every paid plan.
How long does setup take?
Under 10 minutes — paste a webhook URL into React, point it at the Plandalf endpoint, and trigger a test event to confirm.
Can I disconnect React later without losing data?
Yes. Disconnecting only revokes the credentials — historical events Plandalf fired stay in your sequence logs, and React's own records are untouched. You can reconnect any time and resume from the last seen event.
Does Plandalf store React data?
Plandalf stores the minimum IDs needed to address a record in React plus a log of events Plandalf fired. Source-of-truth data stays in React.
What if my website need isn't covered by the actions or triggers listed here?
Drop into the Plandalf REST API and call React directly from your sequence's HTTP action. Anything React's public surface exposes is reachable.
Is there a usage limit?
There's no Plandalf-side limit. React's own plan limits apply.
Where do I find React's own documentation?
React's homepage at https://react.dev links to their developer docs. For Plandalf-side questions about the React integration, see the Plandalf docs.