Beyond Vibe Coding: No-Code B2C SaaS Template With Stripe Payments

Launch and monetize real products. A Lovable template to ship SaaS for your startups, side hustle, or PM portfolio.

Hey, Paweł here. Welcome to the freemium edition of The Product Compass Newsletter.

Every week, I share actionable tips, templates, resources, and insights for PMs.

This is the #1 AI PM newsletter for those who want to quickly learn by doing rather than listening or studying theory. No coding.

Here’s what you might have recently missed:

• AI Agent Architectures: The Ultimate Guide With n8n Examples

• The Ultimate ChatGPT Prompts Library for Product Managers

• Introduction to AI Product Management

Consider subscribing or upgrading your account for the full experience:

---

Recently, everyone is talking about vibe coding.

I never liked the term. Every time I hear it, I think about people demonstrating stunning 3D games and prototypes.

But something is missing: They struggle to go to market and monetize apps.

What most people do is:

• Launch a free product and delay monetization (no skin-in-the-game)

• Some add external links (limited to products like a marketplace)

That needs to change.

I’m sharing a free Lovable B2C SaaS template integrated with Stripe you can use as a starting point to:

• Quickly build and monetize real products without coding

• Build a portfolio just a few AI PMs have

• Get practical GTM experience

To demonstrate how the template works, I build a simple app to manage to-dos:

Demo of a user making Stripe payments and managing a subscription step-by-step:

In the next weeks, I will cover go-to-market, customer support, renewals, and release management. I will also present building an app to manage course certificates and get a few real customers as a PoC. Using the template to build the first app was already a lot for a single post.

In this issue:

1. How to Use Lovable B2C SaaS Template

   1. Step 1: Clone my template

   2. Step 2: Connect Supabase

   3. Step 3: Run database migration scripts

   4. Step 4: Connect GitHub

   5. Step 5: Connect and configure Stripe automatically

   6. Video With Steps 1-5

2. 🔒 How to Create a Custom B2B SaaS Product

   1. Step 6: Modify content, look, and feel

   2. Step 7: Add custom logic: A simple case study (video)

   3. Step 8: Connect your own domain and publish

   4. Step 9: Enable Google authentication

3. 🔒 Going Further

   1. How to plug free session recordings and heatmaps

   2. How to connect free app status monitoring

   3. How to send more emails

   4. Intro: How to modify the product once it’s on production

Let’s dive in!

---

Before we proceed, I’d like to recommend the AI Product Management Certification. It’s a six-week cohort taught by instructors like Miqdad Jaffer.

I participated in the cohort in Spring 2024. The next session starts on July 13, 2025

I secured $500 discount for our community if you use this link to sign up:

---

1. How to Use Lovable B2C SaaS Template

Step 1: Clone my template

My template is available here: public template project.

Next, click “Remix” in the top right corner. You will have to log in or create a new Lovable account:

Step 2: Connect Supabase

After creating a copy, connect it to Supabase by clicking a green button in Lovable. You will have to create a Supabase account if you haven’t already:

Even though you can use a free Supabase version, it won’t support backups. For production environments, I highly recommend choosing a Pro plan and a Micro instance. It will cost you ~$10/month.

Wait for the project status to turn green before going back to Lovable:

Finally, click the Supabase icon again, select your database from the list, and click “Connect.”

Step 3: Run database migration scripts

In Lovable chat window ask Lovable to:

Since this project is based on another Lovable template, you need to execute the database migration scripts. You can find them in the supabase/migrations folder.

After a successful migration: Log in to Supabase > Your project > Authentication and create a new user with e-mail authentication for testing:

Step 4: Connect GitHub

Connect to GitHub and sync with the code repository by clicking this icon in Lovable. You will have to create a GitHub account, if you don’t have one:

You can test it, for example, by uploading primary-logo.svg that will automatically override and replace the app logo:

Step 5: Connect and configure Stripe

Create a free Stripe account.

Next, go to https://dashboard.stripe.com/apikeys and generate a new Stripe API key. Save it somewhere.

Step 5.1 Initialize products and prices

Next:

• Ensure you have npm installed locally. If you don’t know how, ask ChatGPT.

• Download the following script: stripe-setup.js (Google Drive):

  • It automatically creates products and prices and configures customer portal.

  • You can adjust it with a text editor or edit these products later in Stripe.

• Open the same folder with command line/bash and execute two commands:

npm install stripe prompt-sync

node stripe-setup.js

The second command will ask you for the Stripe API Key.

Step 5.2 Configure Stripe in GitHub

After the script configures Stripe, it will create a “stripe.ts” file in the same folder, for example:

Which in the app will be visible as:

Plan selection in Trelly

Next, view GitHub repository, then find and edit the following files with Stripe configuration:

• src/config/stripe.ts

• supabase/functions/shared/stripe-config.ts

Replace their content with the stripe.ts generated in this point.

Important:

• Replace two files, not one. I skipped that part in the video.

• After connecting GitHub, Lovable might get confused. I often get chat history from the original project. Wait 5-10 minutes and the problem should be resolved automatically.

Step 5.3 Configure Stripe API Key in Supabase

Finally, go back to your Supabase > Edge Functions > Secrets and create a secret “STRIPE_SECRET_KEY” with the Stripe API Key we created at the beginning of this step (it’s used by edge functions):

Video With Steps 1-5

From copying a template to receiving first payments:

---

2. How to Create a Custom B2B SaaS Product Based on The Template

Step 6: Modify content, look, and feel

I covered best practices of working with Lovable in my two previous posts:

• Best Practices: How to Quickly Build SaaS Products With AI (No Coding)

• A Complete Course: How to Build a Full-Stack App with Lovable (No-Coding)

An extensive checklist specific to this template: