React + Klaviyo integration

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.

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.

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

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.

Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: Klaviyo API: create event, Klaviyo API: create or update profile, Klaviyo help: understanding webhooks in flows.