1. Log in to your Stripe Dashboard.
2. Navigate to Products and click Add Product.
3. Create two products:
   • Pro
   • Business
4. For each product, create two prices:
   • Monthly: recurring every month
   • Yearly: recurring every year
5. Save each price to generate a Price ID in Stripe. Example:
   • price_1ProMonthlyXXX
   • price_1ProYearlyXXX
   • price_1BusinessMonthlyXXX
   • price_1BusinessYearlyXXX

Copy the generated Price IDs from Stripe and add them to your .env.local file:

NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID=price_1ProMonthlyXXX
NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID=price_1ProYearlyXXX
NEXT_PUBLIC_STRIPE_BUSINESS_MONTHLY_PLAN_ID=price_1BusinessMonthlyXXX
NEXT_PUBLIC_STRIPE_BUSINESS_YEARLY_PLAN_ID=price_1BusinessYearlyXXX

These variables allow to correctly reference each plan and billing interval.

To display subscription options on your landing page, import and include the SubscriptionsPricingSection component in:

app/(public)/(landing)/page.tsx

Example usage:

import { SubscriptionsPricingSection } from "@/components/landing/SubscriptionsPricingSection"

export default function LandingPage() {
  return (
    <>
      {/* Other landing sections */}
      <SubscriptionsPricingSection />
    </>
  )
}

The component automatically pulls your environment variables to render pricing and checkout buttons for all plans and intervals.

• Cancellation: When a user cancels a subscription, it remains active until the next billing period (next month for monthly, next year for yearly).
• Downgrades: If a user downgrades from a higher plan to a lower plan, the change also takes effect in the next billing period.
• Upgrades: When a user upgrades a subscription plan, the change takes effect immediately and billing is adjusted pro-rata by Stripe.