Payments

💡

NextSaaS uses Stripe as the payment engine, but it can be easily adapted to other payment providers. In this tutorial, we will focus on integrating Stripe with NextSaaS.

Setup Stripe

Register with Stripe

Register Webhook Endpoints with Stripe

For the complete tutorial, refer to Register webhook endpoints with Stripe (opens in a new tab) NextSaaS Webhook URL console https://<your-website>/api/subscriptions/webhook Ensure your webhook listens to checkout.session.completed and invoice.payment_succeeded

Setup Products and Prices in Stripe

Create Products and Prices in Live or Test Mode

Refer to Create Products and Prices (opens in a new tab)

Create Products and Prices in Test Mode with Stripe CLI (Optional, only works in Test Mode)

Install Stripe CLI

For simplicity, we use Stripe CLI to create Products and Prices. Get started with the Stripe CLI (opens in a new tab)

Log in to your Stripe account

stripe login --project-name="{your_project_name_in_stripe}"

Create Product

If you plan to sell more products, run this command for each product. See the full params from Create a product (opens in a new tab)

stripe products create --name="{your_product_name}" --description="{your_product_description}"

Stripe will return the newly created product as below

{
  "id": "{your_product_id}", # Note down this product id.
  "object": "product",
  "active": true,
  ...
}

Create Prices

You can create multiple prices per product, see the full params from Create a price (opens in a new tab)

# Creates a price for a one-time payment of $179 USD
stripe prices create \
    -d product="{your_product_id}" \
    -d unit_amount=17900 \
    -d currency=usd

Stripe will return the newly created price as below

{
  "id": "{your_price_id}", # Note down this price id.
  "object": "price",
  "active": true,
  ...
}

Congrats, you have completed the Stripe setup. Now you should have your product_id, price_id, unit_amount, and currency ready to set up NextSaaS.

Connect Stripe to NextSaaS

Setup Products and Prices in NextSaaS

NextSaaS is completely config-driven, and all you need to do is modify allSKUs.

Properties product and price follow the same schema as the Stripe product/price object; just fill out the object info with the Stripe objects you created from the last step.

Additionally, if you have a recurring product, simply add one price object for monthly and another for yearly, and NextSaaS will handle everything else.

Here is an example configuration:

Configuration for one time product -

src/config.site.ts

// one_time product -
const allSKUs: SKU[] = [
  {
    id: "Launch",
    for: "Pay once, use for unlimited projects!",
    name: "Launch",
    features: [
      "Next.js starter",
      "Account management (Including transactional emails)",
      "Social logins (Including email login)",
      "Stripe payments (Recurring/One-time product)",
      "Subscription management",
      "Internationalization",
      "SEO optimized",
      "Admin UI",
      "Themes",
    ],
    type: "PLAN",
    product: {
      id: "prod_PTPECAFKpFHNUt", // Stripe Product ID
      description: "Launch plan",
    },
    prices: [
      {
        id: "price_1OeShiFKiptxqV9W7YI4cwYx", // Stripe Price ID
        discounted_unit_amount: 7900, // Discounted amount to display.
        unit_amount: 17900,
        currency: "usd",
        type: "one_time",
      },
    ],
  },
  // Add more SKUs as needed
];
export const DEFAULT_PRICE_TYPE: PriceType = "recurring";

Configuration for recurring product -

src/config.site.ts

// recurring product -
const allSKUs: SKU[] = [
  {
    id: "Launch",
    for: "Pay once, use for unlimited projects!",
    name: "Launch plan",
    features: [
      "Next.js boilerplate",
      "Animated components",
      "Account management",
      "Social logins (including email and passwordless login)",
      "Stripe payments (recurring or one-time product)",
      "Subscription management",
      "Internationalization",
      "Transactional emails",
      "Docs/Wiki pages",
      "Preview emails",
      "SEO optimized",
      "Admin UI",
      "Themes",
    ],
    type: "PLAN",
    product: {
      id: "prod_PTPECAFKpFHNUt", // Stripe Product ID
      description: "Launch plan",
    },
    prices: [
      {
        id: "price_1OeShiFKiptxqV9W7YI4cwYx", // Stripe Price ID
        discounted_unit_amount: 7900, // Discounted amount to display.
        unit_amount: 17900,
        currency: "usd",
        recurring: {
          interval: "month",
        },
        type: "recurring",
      },
      {
        id: "price_1OeShiFKiptxqV9W7YI4cw12",
        discounted_unit_amount: 7900,
        unit_amount: 17900,
        currency: "usd",
        recurring: {
          interval: "year",
        },
        type: "recurring",
      },
    ],
  },
  {
    id: "Boost",
    for: "Pay once, use for unlimited projects, lifetime updates!",
    name: "Boost plan",
    features: [
      "Everything in Launch Plan",
      <span key={0}>
        Lifetime updates (Last updated:{" "}
        <span className="highlight-underline font-medium">2 DAYS AGO</span>)
      </span>,
      "Access to the GitHub repository",
      "One year Premium Support via email",
      "A full-featured build-in CMS",
    ],
    type: "PLAN",
    product: {
      id: "prod_PTPPo4IQadSnO4",
      description: "Boost plan",
    },
    prices: [
      {
        id: "price_1OeSiSFKiptxqV9WTusvU8Ke",
        discounted_unit_amount: 9900,
        unit_amount: 19900,
        currency: "usd",
        recurring: {
          interval: "month",
        },
        type: "recurring",
      },
      {
        id: "price_1OeSiSFKiptxqV9WTusvU812",
        discounted_unit_amount: 9900,
        unit_amount: 19900,
        currency: "usd",
        recurring: {
          interval: "year",
        },
        type: "recurring",
      },
    ],
  },
];
 
export const DEFAULT_PRICE_TYPE: PriceType = "recurring";

Price Card for one_time product

Price Card for recurring product

Update Stripe Environment variables in NextSaaS

.env

# Stripe Credentials
# The Stripe API secret key
STRIPE_API_KEY="{stripe_api_key}"
# The webhook signing key, typically starts with whsec_*
STRIPE_SECRET_KEY="{stripe_secret_key}"

Testing (Optional)

Refer to Payments Testing (opens in a new tab)

Wrap Up

That's it! You are ready to sell the product with Stripe and NextSaaS ❤️.

Setup Remote Database Theme Your Website