Set Up Payments for Your SaaS

Getting payments set up for your SaaS is a crucial step. If you're using the FastStartup.dev boilerplate, good news: it's easier than you think. In this guide, I'll walk you through everything you need to do to start accepting payments from your users. We'll cover the payments plugin, configuring packages, setting up roles, Stripe webhooks, and more. Let's dive in.

Step 1: Install the Payments Plugin

FastStartup.dev has a dedicated plugin for handling payments. This plugin supports recurring subscriptions, one-time payments, and more. Start by installing the plugin. You can find it here.

Once installed, the plugin integrates seamlessly with your SaaS app. It comes with everything you need to handle subscriptions, pricing tiers, and lifetime payments.

Step 2: Configure Your Pricing Packages

After the plugin is set up, it's time to define your pricing packages. Open the @/templates/payments/lib/config file. This file is where you'll customize the pricing for your SaaS.

By default, FastStartup.dev includes roles like Free User, Basic User, and Pro User. Each role corresponds to a pricing tier. You can edit these or add more as needed. For example, if you want to introduce a new "Enterprise" tier, you can define it here.

Here’s a quick example of what the config file might look like:

export const PRICING_PACKAGES: Partial<Record<Role, PricingPackage>> = {
  [Role.PAID_LIFETIME]: {
    display: {
      title: "Lifetime Deal",
      description: "Get access for life",
      features: ["Feature 1", "Feature 2", "Feature 3"],
      isFeatured: true,
      cta: "Get all-access",
    },
    billingType: "lifetime",
    price: 249,
  },
  [Role.PAID_BASIC]: {
    display: {
      title: "Basic",
      description: "Get basic access",
      features: ["Feature 1", "Feature 2"],
      missingFeatures: ["Feature 3"],
      cta: "Subscribe",
    },
    billingType: "recurring",
    price: 19,
  },
};

You can modify the price, description, and role fields to match your product. If you need a different payment structure, just add a new object to this array.

Step 3: Update the Prisma Schema

Roles are managed in the Prisma schema. Look for the User model and its Role enum. Here’s an example:

enum Role {
  FREE_USER
  BASIC_USER
  PRO_USER
}

model User {
  id    String @id @default(uuid())
  email String @unique
  role  Role
}

If you add a new role in the pricing config, you’ll also need to update the Role enum here. For instance, if you’re adding "ENTERPRISE", make sure it’s included in the enum.

After editing the schema, run npm run prisma:migrate and npm run prisma:generate to apply the changes.

Step 4: Pricing Table Component

The payments plugin includes an automatically generated pricing table. This table is built based on the configuration in the @/templates/payments/lib/config file. You don’t need to create a separate pricing page unless you want to.

Out of the box, the table will display your pricing tiers, descriptions, and a button to sign up. It’s fully customizable if you need to tweak the design or layout.

Here’s how you can use it:

import { PricingTable } from "@/templates/payments/components/pricingTable";

export default function PricingPage() {
  return (
    <div>
      <h1>Choose Your Plan</h1>
      <PricingTable />
    </div>
  );
}

This saves you time and ensures the pricing stays consistent with your config.

Step 5: Stripe Webhooks

FastStartup.dev uses Stripe to handle payments. To ensure everything runs smoothly, you need to set up a webhook.

In your Stripe dashboard, go to Developers > Webhooks and add a new endpoint. Use this format for the URL:

<your site>/stripe/webhook

Replace <your site> with your actual domain. This webhook listens for events like successful payments, subscription updates, and more. It’s essential for keeping your app in sync with Stripe.

Step 6: Custom Payment Flows (Optional)

If you want to create a completely custom pricing page or payment flow, you can use the payments plugin directly. It provides APIs such as createSubscriptionCheckoutSession that make it easy to build custom experiences.

This gives you complete flexibility if the default setup doesn’t fit your needs.

Step 7: Testing Your Setup

Before going live, test everything. Create test users, simulate payments, and check Stripe to ensure the transactions are recorded. Use Stripe’s test mode to avoid any real charges during testing.

Make sure:

• The pricing table displays correctly.
• Users are assigned the correct roles after payment.
• Webhooks are firing and syncing data properly.

Once you’re confident everything works, you’re ready to launch.

Final Thoughts

Setting up payments can feel overwhelming, but with FastStartup.dev, it’s straightforward. The payments plugin, combined with Stripe’s powerful API, handles most of the heavy lifting for you. Focus on building a great product while this setup takes care of your payment infrastructure.

If you have questions or run into issues, check out the FastStartup.dev help center. Good luck with your SaaS!