> Open Plandalf checkout from React, connect a promo countdown and carry partner referrals into the purchase. Source: https://plandalf.com/platforms/react-app Developer integration # Add checkout to your React app Open Plandalf checkout from React, connect a promo countdown and carry partner referrals into the purchase. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Setup guide](https://plandalf.com/docs/product-guides/platforms/react-app) Use your organization SDK. Verify a payment sandbox before testing. **React** **Plandalf** **Stripe** - `plandalf.present()` - `checkout.completed` - `webhook → your API` Overview ## How React and Plandalf split the work React owns your application. Plandalf supplies checkout, promo state and purchase records. Checkout embed available Load the browser SDK once and render checkout attributes in your components. The guide covers dynamic buttons, cleanup, promo and referral setup, and the records to verify after payment. React owns - Your app, login and permissions - Granting access in your own database Plandalf owns - Opening the checkout - Payment, receipts and subscriptions - Telling your backend what was bought Set it up ## Connect React in three steps The short version. The React setup guide has the full walkthrough and the test-mode checks. 1. 1 ### Prepare your test offer Publish the offer, copy its slug and public organization SDK URL, and verify the actual processor sandbox and price. 2. 2 ### Render your component Load the SDK once. Add checkout attributes and use a new component key when its offer or promo changes. Close owned handles during cleanup. 3. 3 ### Replay the buyer journey Test late rendering, unmount and remount. Then reconcile a sandbox purchase, its paid invoice, referral and promised delivery. 4. [Read the React setup guide →](https://plandalf.com/docs/product-guides/platforms/react-app) Plandalf · Automations ![Real React example with a dynamically mounted checkout button and resolved Standard promo tier.](https://plandalf.com/images/integrations/react-app/component-ready.png) ## Connect each product to your React app Follow the setup for each product, then verify its customer outcome. Product Set it up Verify before launch [Checkouts →](https://plandalf.com/docs/product-guides/platforms/react-app#attribute-first) A React button or stable inline target. The intended offer, paid invoice and matching sandbox payment. [Timers / Promos →](https://plandalf.com/docs/product-guides/platforms/react-app#add-a-countdown-and-promo) A countdown and matching promo on the checkout trigger. Visitor deadline, tier transitions, charged amount and cleanup. [Affiliates · early access →](https://plandalf.com/docs/product-guides/platforms/react-app#track-affiliate-referrals) SDK on the partner landing route and an optional referral badge. Correct partner, commission decision, refund and paid renewal. Local React replay includes a USD 50 sandbox purchase with test attribution, a declined payment and component cleanup. Local tier transitions also pass. Charged amounts across deadlines, full affiliate lifecycle and delivery remain pending. SDK repairs are unreleased. [Read the automation scope →](https://plandalf.com/docs/product-guides/platforms/react-app#verify-delivery) Integrations ## Keep your site. Upgrade how it sells. Plus a fully documented REST API and webhook layer for whatever’s not in the list. - ![Stripe](https://plandalf.com/images/integrations/stripe.svg) - ![PayPal](https://plandalf.com/images/integrations/paypal.png) - ![Klaviyo](https://plandalf.com/images/integrations/klaviyo.png) - ![Mailchimp](https://plandalf.com/images/integrations/mailchimp.png) - ![ConvertKit](https://plandalf.com/images/integrations/convertkit.png) - ![ActiveCampaign](https://plandalf.com/images/integrations/activecampaign.png) - ![MailerLite](https://plandalf.com/images/integrations/mailerlite.png) - ![Drip](https://plandalf.com/images/integrations/drip.png) - ![Flodesk](https://plandalf.com/images/integrations/flodesk.png) - ![Beehiiv](https://plandalf.com/images/integrations/beehiiv.png) - ![Customer.io](https://plandalf.com/images/integrations/customer_io.png) - ![Postmark](https://plandalf.com/images/integrations/postmark.png) - ![SendGrid](https://plandalf.com/images/integrations/sendgrid.png) - ![HubSpot](https://plandalf.com/images/integrations/hubspot.png) - ![Intercom](https://plandalf.com/images/integrations/intercom.png) - ![Kajabi](https://plandalf.com/images/integrations/kajabi.png) - ![Teachable](https://plandalf.com/images/integrations/teachable.png) - ![Circle](https://plandalf.com/images/integrations/circle.png) - ![Ghost](https://plandalf.com/images/integrations/ghost.png) - ![MemberPress](https://plandalf.com/images/integrations/memberpress.png) - ![Webflow](https://plandalf.com/images/integrations/webflow.png) - ![Framer](https://plandalf.com/images/integrations/framer.png) - ![Shopify](https://plandalf.com/images/integrations/shopify.png) - ![WordPress](https://plandalf.com/images/integrations/wordpress.png) - ![Squarespace](https://plandalf.com/images/integrations/squarespace.png) - ![Wix](https://plandalf.com/images/integrations/wix.png) - ![Next.js](https://plandalf.com/images/integrations/nextjs.png) - ![React](https://plandalf.com/images/integrations/react_app.png) - ![Vue](https://plandalf.com/images/integrations/vue_app.png) - ![Avalara](https://plandalf.com/images/integrations/avalara.svg) - ![TaxJar](https://plandalf.com/images/integrations/taxjar.svg) - ![Slack](https://plandalf.com/images/integrations/slack.png) - ![Zapier](https://plandalf.com/images/integrations/zapier.svg) - ![Tolt](https://plandalf.com/images/integrations/tolt.png) - [\+ more](https://plandalf.com/integrations "All integrations") Questions ## Common questions about React and Plandalf The short answers. The docs have the long ones. Do I need the React package? The organization-hosted browser SDK and JSX attributes are the recommended starting point. The provider and hooks examples describe the v2 workspace package; check the version note before using a public npm release. Can buttons appear after the page loads? Yes. The SDK observes added elements. If a bound button changes its offer or promo, replace it using a new React key rather than only changing its attributes. Does a browser success event grant access? Use it for immediate UI feedback. Your server must verify the paid purchase and entitlement before granting protected access or delivery. How should I handle route changes? Give SDK handles an explicit owner and close them when that owner unmounts. Check the guide’s countdown cleanup release note and test with Strict Mode and slow responses. Does test mode prove the provider is a sandbox? No. Check the actual provider connection and price before payment, then reconcile the processor amount and paid invoice. The team ## Built by a team obsessed with conversion. ![Aarogorn](https://plandalf.com/images/faces/aarongorn.png)![Bilbert](https://plandalf.com/images/faces/bilbert.png)![Buildo](https://plandalf.com/images/faces/buildo.png)![Foundo](https://plandalf.com/images/faces/foundo.png)![Legoli](https://plandalf.com/images/faces/legoli.png) 15\+ years testing every pricing model under the sun. Every part of Plandalf comes from a real checkout problem we’ve had to solve ourselves. [Start your 14-day free trial](https://admin.plandalf.dev/signup) No credit card required. Nothing to migrate.