> A React app opens the Plandalf checkout, and a webhook step sends the paid user to Klaviyo as an event. Includes a note on the React package status. Source: https://plandalf.com/apps/react-app/integrations/klaviyo Last modified: 2026-10-26 Checkout embed # React + Klaviyo integration React renders the buy button, Plandalf takes the payment, and a webhook step carries the order to Klaviyo. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **React** **Klaviyo** ## Does React integrate with Klaviyo? Plandalf does not have native Klaviyo steps and does not sync a React app with Klaviyo. The app opens the checkout with attributes or the React package; after payment a Send Webhook step can call Klaviyo's events API, or a function you host. Klaviyo flows can post back to a Plandalf catch URL. ## What moves between React and Klaviyo Event From and to Through What happens Checkout opened ReactPlandalf Checkout embed A JSX button with `data-plandalf-present` works with the hosted script, and the docs recommend attributes for a first install. Checkout completed PlandalfKlaviyo Webhook Send Webhook posts to a small function you host, which calls Klaviyo's events endpoint with a metric, the user's email and the amount as `value`. Profile properties PlandalfKlaviyo Webhook Klaviyo's profile import endpoint creates or updates a profile, so a plan name can be stored as a property. Flow webhook KlaviyoPlandalf Webhook A flow can post to a Plandalf Webhook Trigger URL, and Enroll in Promo starts a countdown that a React component can show. Browser purchase event PlandalfReact Checkout embed The `purchase` event on a handle lets the UI react, but it is not a record to send to Klaviyo from the browser. ## Report a React purchase to Klaviyo Keep the Klaviyo private key out of React. Both the key and the Plandalf signing key belong on a server. 1. ### Start with an attribute button Load the hosted SDK once in your HTML shell, then render a button with `data-plandalf-present` and the offer slug. Add `useRef` and an effect that closes `plandalf.from(element)` on unmount. 2. ### Re-key when settings change Give the button a `key` built from the offer and promo slugs. The SDK reads those attributes only when it first binds an element. 3. ### Identify signed-in users Have your server sign a Plandalf customer token and call `identify()` with it, or pass it per call through the `user` option. The docs say `identify()` does not confirm acceptance, so check the customer on the resulting session. 4. ### Host the Klaviyo relay Create a serverless function that checks a shared secret, then posts an event to Klaviyo with the `revision` header, your private key and the metric name Plandalf Purchase. Deduplicate on the invoice number. 5. ### Call it from a sequence On a Checkout Completed sequence add Send Webhook to the function's URL, secret in Headers, payload using `{{trigger.customer_email}}` and `{{trigger.total_amount}}`. Test with Run on test purchases switched on. ## What sellers do with React and Klaviyo ### Subscription apps built in React An app sells plans from a pricing page. A Klaviyo flow triggered by the purchase metric sends the welcome series, and a plan property decides which tips email goes out. ### Merch and print-on-demand microsites A small React storefront sells limited runs. Klaviyo flows handle shipping notices, while a Plandalf promo drives urgency on the product page. ## Limits and gotchas - The docs' React provider and hooks examples need updated v2 packages that the docs say were unpublished, and the hosted-script attribute route is the fallback. - Klaviyo requires a `revision` header and vnd.api+json bodies, so test that Send Webhook can produce a request Klaviyo accepts, or use your own function. - Klaviyo flow webhooks need multi-factor authentication and a Manager, Admin or Owner role. - A queued Klaviyo event (HTTP 202) does not mean a flow has fired. - Do not grant permanent access in the browser. Verify the paid purchase on your server first. ## React and Klaviyo: common questions Does React integrate with Klaviyo? Plandalf does not provide a React to Klaviyo sync. A React app opens a Plandalf checkout, and a Send Webhook step or your own function sends the order to Klaviyo. How do I send React checkout purchases to Klaviyo? Use a Checkout Completed sequence with Send Webhook to a function you host, and have that function post an event to Klaviyo's API with your private key. Should I use the React package or attributes? Plandalf's docs suggest attributes first because the SDK picks up elements that React renders later. Move to the provider and hooks when you need shared state or gates, once that package is available to you. ## Guides for this pair - [Plandalf with React](https://plandalf.com/platforms/react-app) - [Plandalf with Klaviyo](https://plandalf.com/platforms/klaviyo) - [React setup guide](https://plandalf.com/docs/platforms/react-app) - [React provider and hooks](https://plandalf.com/docs/sdk/react) - [Identify customers](https://plandalf.com/docs/sdk/identity) - [Webhooks reference](https://plandalf.com/docs/api/webhooks) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from React and 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) - [**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) - [**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) - [**Webflow + Klaviyo**Webflow hosts the buy button, Plandalf takes payment, and a Send Webhook step can push the buyer or the order into Klaviyo.](https://plandalf.com/apps/webflow/integrations/klaviyo) - [**WordPress + Klaviyo**Klaviyo forms and tracking run on your WordPress site through Klaviyo's own script. A Plandalf button on that site sends paid buyers to Klaviyo as events.](https://plandalf.com/apps/wordpress/integrations/klaviyo) - [**ActiveCampaign + Klaviyo**Running ActiveCampaign and Klaviyo side by side, or moving from one to the other: one checkout can write the buyer to both by webhook.](https://plandalf.com/apps/activecampaign/integrations/klaviyo) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [Klaviyo API: create event](https://developers.klaviyo.com/en/reference/create_event), [Klaviyo API: create or update profile](https://developers.klaviyo.com/en/reference/create_or_update_profile), [Klaviyo help: understanding webhooks in flows](https://help.klaviyo.com/hc/en-us/articles/4534329515931).