How to set up Webflow Memberships with gated content and payments

Webflow Dashboard → your project → Site Settings → Memberships tab.

Click 'Enable Memberships' — this is a one-way toggle once configured. Take 5 minutes to think about your plan structure before enabling.

Choose plan structure: free-only, free + paid, paid-only, multiple paid tiers. Webflow Memberships supports up to 10 plans per project.

Create User Groups: Webflow Designer → Memberships panel (left sidebar) → Access Groups. Add an Access Group for each tier (Free, Paid Monthly, Paid Annual, VIP). Each Group can be assigned to multiple plans.

Note: User Groups are the access-control mechanism. Plans assign users to Groups. Content gates check Group membership, not Plan directly.

Site Settings → Memberships → Plans → click 'Add Plan' → choose 'Paid Plan.'

Webflow prompts you to connect a Stripe account via Stripe Connect. This is your business Stripe account, not a Webflow-pooled account — payments flow directly to your bank.

Complete Stripe KYC if not already done (business name, tax ID, bank account). Webflow does not let you go live with paid plans until Stripe verification is complete.

For each paid plan, set: price (one-time or recurring), billing cycle (monthly, quarterly, annual), free trial period (optional), and the Access Group assigned upon successful payment.

Plans go live immediately once Stripe is connected and the project is published. No staging environment for paid plans — test with a real $1 plan, then update price.

Webflow Designer → Pages panel → System Pages. You will see auto-generated pages: Log In, Sign Up, Account, Forgot Password, Reset Password, Update Password.

Style each page to match your brand. The forms inside have specific Webflow Element types (Log In Form, Sign Up Form) that you cannot replace, but you can restyle freely.

Add login/signup links to your global Navbar. For logged-in users, you typically want a different navbar (Profile dropdown, Logout link). Use Conditional Visibility (covered in step 5) to show different nav states.

Customize signup confirmation: Memberships Settings → Email Templates → customize the verification email Webflow sends after signup. Webflow ships a default template — replace the subject line and body with your brand voice.

Webflow does NOT support social login (Google, Apple, Facebook) on Memberships natively. If social login is required, you need to build a workaround via Webflow Logic + a custom auth handler, or use a third-party member tool like Memberstack instead.

Click any element on a page. Right sidebar → Element Settings → Conditional Visibility.

Conditions available: 'Visitor is logged in,' 'Visitor is not logged in,' 'Visitor is in Access Group X,' 'Visitor is not in Access Group X.'

Common patterns: free preview of a paid article — show the first 2 paragraphs to everyone, hide the rest behind an 'Access Group = Paid' condition. Below it, show a 'Upgrade to read more' CTA to non-paid users.

Build a member-only page: Page Settings → Access → restrict to specific Access Group(s). Non-members hitting the URL get redirected to a configurable page (typically /sign-up).

Test by viewing the live site in two browsers: one logged in as a Paid user, one logged in as Free. Confirm content shows/hides correctly.

Webflow Designer → Memberships panel → User Settings → Custom Fields.

Add fields you want to collect at signup: First Name, Last Name, Company, Industry, Role, etc. Each field becomes part of the signup form.

Mark fields as Required or Optional. Required fields gate signup — user must provide them to create an account.

For content gating based on user attributes (e.g., show different content to "Marketing" vs "Sales" roles): unfortunately, Webflow Memberships does not natively support attribute-based Conditional Visibility — only Group-based. For attribute-based gating, you need a custom JavaScript check against the User object in the page.

Update existing user data via Account page — users can edit their own custom fields. As admin you can edit any user's data in Memberships → Users → click user.

Webflow handles Stripe webhooks for happy-path events (successful payment, recurring renewal) automatically via Stripe Connect.

For billing-failure scenarios — failed renewal payment, expired card — Webflow tries to retry the payment 3 times over 7 days via Stripe Smart Retries (enabled by default in Stripe).

If retries fail: Webflow moves the user from the paid Access Group to a "Past Due" state (still logged in, but content gated as Free).

Critical: set up an email notification when this happens. Memberships → Email Templates → customize the "Payment Failed" email. By default Webflow sends a generic message. Personalize it with a clear "Update payment method" CTA linking to /account.

Monitor billing failures: Webflow Dashboard → Memberships → Users → filter by status 'Past Due.' Reach out manually if the volume is small. For larger member bases, hook this into HubSpot or Klaviyo via Zapier for automated dunning campaigns.

Open an incognito window. Visit /sign-up.

Create a new test user with a real email you control. Fill custom fields.

After verification email, log in. You should be in the Free Access Group by default.

Visit a paid-only page — should redirect or show gated content.

Navigate to /account → Upgrade → select a paid plan → enter Stripe test card 4242 4242 4242 4242 (in test mode) or real card (in live mode, then refund).

After successful payment, you should be moved to the Paid Access Group. Re-visit the paid page — content should now show.

Cancel: /account → Manage Plan → Cancel. Confirm immediate or end-of-period cancellation per your plan settings. Refresh the paid page — should re-gate (immediately for immediate-cancel plans, at period end for end-of-period plans).

All 8 steps pass = system is working. Any failure = debug immediately.