Complete reference for the embedded membership checkout flow — covering the user journey, component architecture, plan configuration, and developer detail.
Replaces OfficerRnD GrowthHub (12% transaction fee) with a custom pipeline: Webflow collects the form, a Cloudflare Worker creates the Stripe customer and payment, Stripe fires a webhook, and Zapier provisions the member in OfficerRnD.
Nine steps take a visitor from landing on a membership page to being fully provisioned as a member in OfficerRnD.
Visitor browses to a membership page (e.g. /memberships/all-access). Each page is a Webflow CMS item with a unique plan-slug field.
Webflow CMSForm collects: first name, last name, email, phone, company, referral source, and optional notes. Stripe Payment Element also renders on the page.
Embed HTMLSite script runs window._validate(). If any required fields are missing, they are highlighted and submission stops.
Site ScriptFive services work together to power the checkout. Webflow handles the frontend, a Cloudflare Worker acts as the backend API, Stripe processes payments, Zapier automates provisioning, and OfficerRnD is the member database.
Seven plans are live. Each plan slug must match exactly between Webflow CMS, the Worker's PLANS map, and Stripe.
Key technical choices that explain why the system is built the way it is — including the deferred intent flow, the 2,000-character script limit workaround, and the window._S bridge pattern.
Most issues fall into one of these categories. Check the browser DevTools console and Network tab first.