Step 5: Adding Products to Stripe

Adding Products to Stripe

Let's create a subscription product in Stripe so that users can upgrade their accounts to become Premium Users.

📣
Important: Do not add products before your extension is fully installed and the webhook is set up. Adding a product triggers the webhook, so if the installation isn't complete, your product might not appear until you update it.
  1. Create a New Product in Stripe
  • Access the Stripe Dashboard.

  • In the left-hand menu, click on Product Catalog.

  • Click on the Add Product button in the top right corner of the page.

  • Enter Product Details:

    1. Product Name: Give your product a name, such as "SaaS Subscription". This name will appear on the checkout page, so choose appropriately.
    2. Description: Optionally, provide a brief description of the product.
    3. Image: Providing a thumbnail image is recommended, it will be displayed in the product catalog and on the checkout page.
  • Configure the Product:

    1. Set the correct price.

    2. Choose the type of charge (choose recurring and monthly for this price).

    3. Configure any other options according to your needs.

  • Save the product.

  1. Add Stripe "priceId" to Environment Variables
  • Copy the Price ID:

    1. After creating your product, click on it to view its details. Then click on the three dots at far right of the page.

    price1

    1. In the popup menu, select Copy Price ID.

    price1

  • Update Your .env.local File:

  • Open the .env.local file in your project’s root directory.

  • Paste the copied Price ID into the appropriate variable, for example:

NEXT_PUBLIC_MONTHLY_ID=your_monthly_price_id_here
NEXT_PUBLIC_YEARLY_ID=your_yearly_price_id_here
  • Click the + icon while still in the product details to add another price to this product. Choose recurring and yearly.

  • Repeat the above process for storing the Price ID in your environment variables.

Save Your Changes:

Ensure you save the .env.local file after pasting in the Price IDs.

You're all set! Your Stripe products are now configured, and the Price IDs are stored in your environment variables.