> A React app opens the Plandalf checkout, then a webhook step upserts the paying user as a HubSpot contact. HubSpot workflows can enrol contacts in a promo. Source: https://plandalf.com/apps/react-app/integrations/hubspot Last modified: 2026-10-26 Checkout embed # React + HubSpot integration React opens the checkout, Plandalf takes payment, and the paid user becomes a HubSpot contact through a webhook step. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **React** **HubSpot** ## Does React integrate with HubSpot? Plandalf has no native HubSpot steps, and React code does not write to HubSpot for you. The app opens the checkout; after payment a Send Webhook step calls HubSpot's contacts API or a function you host. A HubSpot workflow can post to a Plandalf catch URL to start a promo countdown. ## What moves between React and HubSpot Event From and to Through What happens Checkout opened ReactPlandalf Checkout embed A component renders `data-plandalf-present` for a modal, or `data-plandalf-mount` for an inline checkout in a stable container. Checkout completed PlandalfHubSpot Webhook Send Webhook posts to `/crm/v3/objects/contacts/batch/upsert`, matching on `email`, with a private app token in the Authorization header. Invoice paid PlandalfHubSpot Webhook Renewals fire this trigger as well, which suits a second webhook that updates a custom contact property. Workflow sends a webhook HubSpotPlandalf Webhook A HubSpot workflow action posts contact properties to a Plandalf Webhook Trigger URL, where `email` is read as the participant. Marketing email countdown PlandalfHubSpot By hand A countdown image tag goes in an HTML module, with HubSpot's contact email token as the `ref`. ## Upsert HubSpot contacts from paid React checkouts HubSpot calls a private app token a Bearer token. Treat it like a password. 1. ### Render the buying action Use a JSX button with `data-plandalf-present` and a stable container with `data-plandalf-mount` for inline checkout. Under React Strict Mode prefer an effect that calls `sdk.mount()` and returns `handle.close()`. 2. ### Create the HubSpot private app Give it the contact write scope, copy its access token and keep that token in Plandalf's step headers or a server function, never in React. 3. ### Create the sequence In Automation, My Sequences choose Plandalf, Checkout Completed and your offer. Pick a real checkout on the Test tab so `{{trigger.customer_email}}` and `{{trigger.customer_name}}` have values. 4. ### Add Send Webhook Method POST, URL set to HubSpot's batch upsert for contacts, `Authorization: Bearer` with your token, and a JSON payload with one input whose `id` is the email, `idProperty` is `email` and `properties` carry the name. 5. ### Verify and extend Run the test with your own email and open the contact in HubSpot. Then add a refund sequence if a property such as lifecycle stage should change. ## What sellers do with React and HubSpot ### B2B tools with a self-serve plan A React app lets small teams buy a seat pack in the app. Sales sees paid sign-ups as HubSpot contacts and follows up on the larger ones. ### Training providers with a React booking page Each paid booking creates a contact with a course property, and a HubSpot workflow sends the joining instructions. ## Limits and gotchas - HubSpot lists its Send a webhook workflow action for Data Hub Professional and Enterprise, with POST and GET only. Plandalf's own HubSpot page names Marketing Hub, so confirm in HubSpot. - HubSpot's batch upsert does not support partial upserts when matching on email, per HubSpot's contacts documentation. - Send Webhook is not signed and has a 30 second reply window, so protect any relay with a secret header. - Plandalf cannot confirm that a contact in HubSpot has paid. Use the paid invoice for entitlement decisions. ## React and HubSpot: common questions Does React integrate with HubSpot? Not as a Plandalf connector. A React app opens the Plandalf checkout, and a Send Webhook step creates or updates the HubSpot contact after payment. How do I add React buyers to HubSpot? Build a Checkout Completed sequence with Send Webhook to HubSpot's contacts API, with a private app token in the headers, or send it to your own function that does the upsert. Can HubSpot enrol a contact in a Plandalf countdown? Yes, through a workflow action that sends a webhook to a Plandalf catch URL, where Enroll in Promo starts the timer. Check which HubSpot subscription includes that action. ## Guides for this pair - [Plandalf with React](https://plandalf.com/platforms/react-app) - [Plandalf with HubSpot](https://plandalf.com/platforms/hubspot) - [React setup guide](https://plandalf.com/docs/platforms/react-app) - [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 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) - [**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 + Klaviyo**React renders the buy button, Plandalf takes the payment, and a webhook step carries the order to Klaviyo.](https://plandalf.com/apps/react-app/integrations/klaviyo) - [**Stripe + HubSpot**A Stripe-paid Plandalf checkout can create or update the buyer in HubSpot through a webhook, and a HubSpot workflow can start a Plandalf countdown.](https://plandalf.com/apps/stripe/integrations/hubspot) - [**HubSpot + Klaviyo**Plandalf sits beside HubSpot and Klaviyo: one checkout writes the buyer to both by webhook, and each can start a Plandalf sequence.](https://plandalf.com/apps/hubspot/integrations/klaviyo) - [**HubSpot + SendGrid**Plandalf does not sync HubSpot with SendGrid. It sits beside both: checkout events by webhook, countdown images in the emails each one sends.](https://plandalf.com/apps/hubspot/integrations/sendgrid) Checked October 26, 2026 against Plandalf's own setup guides and the vendor documentation: [HubSpot CRM API: contacts](https://developers.hubspot.com/docs/api/crm/contacts), [HubSpot private apps overview](https://developers.hubspot.com/docs/apps/legacy-apps/private-apps/overview), [HubSpot: use webhooks with workflows](https://knowledge.hubspot.com/workflows/how-do-i-use-webhooks-with-hubspot-workflows).