Payments, Auth, + Protected Content in 15 Minutes With Lovable & Outseta
Vibe coding is the second major wave of non-technical people building web apps and digital products that we've now seen—and by all indications, it's significantly more sizable than the first.
At a macro level, the parallels to what we saw during the emergence of "no-code" are quite similar:
- Early adopters are met with lots of frustration
- Initial solutions to the major problems are not simple enough for non-technical users
- A massive opportunity remains up for grabs—who will truly make it easy to build a business on top of these platforms?
The opportunity to build "Shopify for SaaS" is still very much up for grabs—this tutorial is going to show you how to take a major step in that directions. In 15 minutes, you'll have fully integrated Stripe Payments, authentication, protected content, and a home for your data.
Use this same process and prompts to build anything that requires a paywall, including:
- SaaS products
- Membership sites
- Online courses
While this tutorial focuses on building with Lovable, these prompts can be used with other AI builders too (Replit, Bolt, V0, etc).
Prerequisites
Here's what you'll need to get started:
- An Outseta account
- A Lovable project (the free version works)
- 15 minutes start-to-finish
Step 1 - Set up your Outseta account (5 mins)
- Sign up for an Outseta account.
- Follow the in-app onboarding guidance to:
- Fill in your information on the SETTINGS > GENERAL page
- Go to BILLING > SETTINGS and connect to Stripe (test or live keys are both OK)
- Go to BILLING > PLANS and create at least one plan (free or paid)
✅ It worked if: The first four steps in the setup guide are marked complete
Step 2 - Grab Outseta's header script (30 seconds)
- Go to AUTH > EMBEDS and copy Outseta's Quick start header script
- Make note of the sign up, login, and profile links shown further down the page—we'll come back to these later.
✅ It worked if: You have Outseta's Quick start embed script copied to your clipboard.
Step 3 - Generate a landing page in Lovable (2 mins)
Create a new Lovable project and and use the prompt below to generate a new landing page.
Landing page prompt
Create a complete membership landing page for [your membership here]. Build a professional, conversion‑focused page that showcases the value of accessing [your membership value here].
Requirements:
- Add placeholder comment in <head>: <!-- OUTSETA QUICK START SCRIPT -->
- Include global navigation with these exact placeholder links:
Sign up: href="[OUTSETA_SIGNUP_LINK]"
Log in: href="[OUTSETA_LOGIN_LINK]"
My Account: href="[OUTSETA_PROFILE_LINK]"
Do NOT implement auth, database, email, or payment systems (Outseta handles these)Actual prompt Marissa used
Here’s the actual prompt Marissa used when building her site in the tutorial video above.
Create a complete membership landing page for "Cooking with AI (Live!) Demo Event Recordings" as part of the Idea Kitchen newsletter. Build a professional, conversion‑focused page that showcases the value of accessing recorded AI demonstrations.
Requirements:
Technical Integration:
- Add placeholder comment in <head>: <!-- PASTE OUTSETA HEADER SCRIPT (from Auth > Embeds) HERE -->
- Include global navigation with these exact placeholder links:
Sign up: href="[OUTSETA_SIGNUP_LINK]"
Log in: href="[OUTSETA_LOGIN_LINK]"
My Account: href="[OUTSETA_PROFILE_LINK]"
Do NOT implement auth, database, email, or payment systems (Outseta handles these)Geoff's learnings and comments on this prompt
I learned a couple of important things from Marissa's initial prompt:
- She used placeholders in her prompt for Outseta's scripts and links—that's intentional, as these will be updated later.
- The last line "Do NOT implement auth, database, email, or payment systems (Outseta handles these)" is particularly important—otherwise Lovable may make assumptions about your needs for these features and will generate a site that looks to implement these features differently.
✅ It worked if: Lovable generates a landing page UI for your membership. Hovering over links like ‘Login’ should show the Outseta placeholder link
Step 4 - Apply your design aesthetic (optional)
The generated aesthetic might not be what you’re looking for or follow your branding. Follow up with a design specific prompt.
Design prompt
All you need to do with your design prompt is describe the look and feel that you want for your site. Here's the actual prompt Marissa used:
What would it look like with a vintage cookbook style design? I'm thinking aged‑paper texture, typewriter‑style font, and warm colors that evoke a handcrafted, nostalgic feel.
Step 5 - Insert the Outseta script and links (1 min)
Replace the placeholder script and links with the actual script and links found in your Outseta account.
Script and links prompt
The actual script and URLs can be found at the bottom of the AUTH > EMBEDS page within Outseta.
Let's replace the placeholder comments and links.
The placeholder comment in the <head> should be replaced with:
[Insert Outseta quick start script (the one you copied in step 2)]
[OUTSETA_SIGNUP_LINK] should be replaced with:
[Insert Outseta sign up link)
[OUTSETA_LOGIN_LINK] should be replaced with:
[Insert Outseta login link]
[OUTSETA_PROFILE_LINK] should be replaced with:
[Insert Outseta profile link]✅ It worked if: In preview, Sign up opens the Outseta sign up modal and the nav updates to My Account after login.
Step 6 - Add a members only page in Lovable (2 min)
In this step we're asking Lovable to create a new page titled "Members" that will be a page of protected content.
Members page prompt
Create a new page titled "Members."✅ It worked if: Navigating to /members in preview shows your new page.
Please note that Marissa used the URL /cookbook for her page—you'll see this referred to in subsequent steps.
Step 7 - Set up protected content in Outseta (1 min)
In this step we'll setup protected content in Outseta so your members page is only accessible to a logged in user with a valid subscription.
- Go to AUTH > PROTECTED CONTENT and select Add content group
- Add a Hidden URL—this is the URL of your members page
- Add plans or add-ons with access by typing the name of subscription plan you setup in step 1
- Click Save
✅ It worked if: The AUTH > PROTECTED CONTENT page lists your content group.
Step 8 - Redirect users to the members page on login (30 seconds)
- Within Outseta go to AUTH > SIGN UP AND LOGIN
- Set the Post login URL to the URL of your members page. This tells Outseta where to redirect a user who logs in successfully.
- Click SAVE
✅ It worked if: After logging into the site you land on the URL that you've set as the Post Login URL.
That's it! In 15 minutes you now have:
- Fully integrated Stripe payments
- Set up authentication
- Added protected content to your site
- All the data you capture from members at sign up is automatically added to Outseta CRM
- All of the transactional emails you need are automatically setup and sending
- You have access to an email platform with industry leading deliverability rates
- You have support ticketing, docs, and live chat tools to take care of your members
- You have financial, user engagement, and cancellation reporting
Pure vibes, real business. Want more tutorials like this? Let us know!
On this page
Get our newsletter
