chore: yearly billing (#1996)

mxkaske · thibaultleouay · autofix-ci[bot] · web-flow · commit cb010d2ae06e · 2026-03-22T13:53:37.000+01:00
* chore: yearly billing

* fix: product price

* chore: add billing faqs

* add stripe id

* ci: apply automated fixes

---------

Co-authored-by: Thibault Le Ouay Ducasse &lt;thibaultleouay@gmail.com&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/apps/dashboard/src/components/data-table/billing/data-table.tsx b/apps/dashboard/src/components/data-table/billing/data-table.tsx
diff --git a/apps/web/src/content/mdx-components/index.tsx b/apps/web/src/content/mdx-components/index.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { LatencyChartTable } from "../latency-chart-table";
 import { ButtonLink } from "./button-link";
 import { Code } from "./code";
@@ -7,6 +8,7 @@ import { Details } from "./details";
 import { Grid } from "./grid";
 import { createHeading } from "./heading";
 import { Pre } from "./pre";
+import { PricingTabs } from "./pricing-tabs";
 import { MDXStatusPageExample } from "./status-page-example";
 import { Table } from "./table";
 import { MDXTweet } from "./tweet";
@@ -32,4 +34,6 @@ export const components = {
   SimpleChart: LatencyChartTable,
   Tweet: MDXTweet,
   StatusPageExample: MDXStatusPageExample,
+  PricingTabs,
+  Suspense: Suspense,
 };
diff --git a/apps/web/src/content/mdx-components/pricing-tabs.tsx b/apps/web/src/content/mdx-components/pricing-tabs.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { allPlans } from "@openstatus/db/src/schema/plan/config";
+import type { BillingInterval } from "@openstatus/db/src/schema/plan/schema";
+import { getPriceConfig } from "@openstatus/db/src/schema/plan/utils";
+import { Badge } from "@openstatus/ui/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@openstatus/ui/components/ui/tabs";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+const planColumns = [
+  { plan: "free" as const, header: "Hobby" },
+  { plan: "starter" as const, header: "Starter" },
+  { plan: "team" as const, header: "Pro" },
+] as const;
+
+export function PricingTabs() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const interval = (
+    searchParams.get("interval") === "yearly" ? "yearly" : "monthly"
+  ) as BillingInterval;
+
+  const setInterval = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === "monthly") {
+        params.delete("interval");
+      } else {
+        params.set("interval", value);
+      }
+      const qs = params.toString();
+      router.replace(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
+    },
+    [searchParams, router, pathname],
+  );
+
+  return (
+    <div className="not-prose mb-4">
+      <Tabs value={interval} onValueChange={setInterval}>
+        <TabsList className="h-auto w-full rounded-none">
+          <TabsTrigger
+            value="monthly"
+            className="h-auto w-full truncate rounded-none p-3.5"
+          >
+            Monthly
+          </TabsTrigger>
+          <TabsTrigger
+            value="yearly"
+            className="h-auto w-full truncate rounded-none p-3.5"
+          >
+            Yearly{" "}
+            <Badge variant="secondary" className="ml-1.5 h-auto rounded-none">
+              2 months free
+            </Badge>
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <PricingUpdater interval={interval} />
+    </div>
+  );
+}
+
+function PricingUpdater({ interval }: { interval: BillingInterval }) {
+  const formatPrice = useCallback(
+    (plan: (typeof planColumns)[number]["plan"]) => {
+      const config = allPlans[plan];
+      if (plan === "free") return "Free - Hobby";
+      const price = getPriceConfig(plan, "USD", interval);
+      const formatted = new Intl.NumberFormat(price.locale, {
+        style: "currency",
+        currency: price.currency,
+        maximumFractionDigits: 0,
+      }).format(price.value);
+      const suffix = interval === "yearly" ? "/year" : "/month";
+      return `${formatted}${suffix} - ${config.title}`;
+    },
+    [interval],
+  );
+
+  // Walk the DOM to update prices in the GFM table headers
+  if (typeof window !== "undefined") {
+    // Use requestAnimationFrame to run after render
+    requestAnimationFrame(() => {
+      const tables = document.querySelectorAll(".table-wrapper table");
+      for (const table of tables) {
+        const headers = table.querySelectorAll("thead th");
+        // The pricing table has 4 columns: Features | Hobby | Starter | Pro
+        if (headers.length !== 4) continue;
+
+        for (let i = 0; i < planColumns.length; i++) {
+          const th = headers[i + 1]; // skip first "Features comparison" column
+          if (!th) continue;
+          const { plan } = planColumns[i];
+          th.textContent = formatPrice(plan);
+        }
+      }
+    });
+  }
+
+  return null;
+}
diff --git a/apps/web/src/content/pages/home.mdx b/apps/web/src/content/pages/home.mdx
@@ -17,6 +17,8 @@ faq:
     answer: "Openstatus is built by Thibault and Max, a bootstrapped two-person team. We're profitable and self-funded — we'll be here when your next audit comes around."
   - question: "What regions does openstatus monitor from?"
     answer: "Openstatus monitors from 28 regions worldwide: Europe (Amsterdam, Stockholm, Paris, Frankfurt, London), North America (Dallas, New Jersey, Los Angeles, San Jose, Chicago, Toronto), South America (São Paulo), Asia (Mumbai, Tokyo, Singapore), Africa (Johannesburg), and Oceania (Sydney)."
+  - question: "Do you offer annual billing?"
+    answer: "Yes. All paid plans are available with monthly or annual billing. Choose annual billing to get 2 months free — that's Starter at $300/year ($25/mo) and Pro at $1,000/year (~$83/mo). You can switch between billing cycles at any time."
   - question: "Can I self-host openstatus?"
     answer: "Yes. Openstatus is fully open source and can be self-hosted using its 8.5MB Docker image. You can also deploy private monitoring locations behind your firewall for internal services. The source code is available on GitHub."
 ---
@@ -193,6 +195,14 @@ Sydney 🇦🇺
 
 </Details>
 
+<Details summary="Do you offer annual billing?">
+
+Yes. All paid plans are available with **monthly** or **annual** billing. Choose annual billing to get **2 months free** — that's Starter at $300/year ($25/mo) and Pro at $1,000/year (~$83/mo).
+
+You can switch between billing cycles at any time. Check the [pricing page](/pricing) for a full comparison.
+
+</Details>
+
 <Details summary="Can I self-host openstatus?">
 
 Yes. Openstatus is fully open source and can be self-hosted using its **8.5MB Docker image**. You can also deploy **private monitoring locations** behind your firewall to check internal services not exposed to the internet.
diff --git a/apps/web/src/content/pages/unrelated/pricing.mdx b/apps/web/src/content/pages/unrelated/pricing.mdx
@@ -4,9 +4,26 @@ publishedAt: "2025-11-10"
 author: "Maximilian Kaske"
 description: "Start free with uptime monitoring and a status page. Upgrade to Starter ($30/mo) or Pro ($100/mo) for more monitors, team collaboration, and advanced features. No credit card required."
 category: "company"
+faq:
+  - question: "What billing options are available?"
+    answer: "All paid plans are available with monthly or annual billing. Choose annual billing to get 2 months free — Starter at $300/year ($25/mo) and Pro at $1,000/year (~$83/mo)."
+  - question: "Can I switch between monthly and annual billing?"
+    answer: "Yes. You can switch between monthly and annual billing at any time from your dashboard."
+  - question: "What does the free plan include?"
+    answer: "The free plan includes one monitor, one status page with three components, and a minimum check interval of 10 minutes. No credit card required."
+  - question: "What are add-ons and how are they billed?"
+    answer: "Add-ons are workspace-level settings like White Label, Email Authentication, and extra status pages. Once enabled, they apply to your entire workspace. Add-ons are billed monthly regardless of your plan's billing cycle."
+  - question: "Can I upgrade or downgrade my plan?"
+    answer: "Yes. You can upgrade or downgrade at any time from your dashboard. Changes take effect immediately, and billing is prorated."
+  - question: "What currencies do you support?"
+    answer: "We support EUR, USD, and INR. Contact us at ping@openstatus.dev or book a call if you have questions about pricing in your currency."
 ---
 
-| Features comparison | $0/month - Hobby |$30/month - Starter | $100/month - Pro |
+<Suspense>
+    <PricingTabs />
+</Suspense>
+
+| Features comparison | Free - Hobby |$30/month - Starter | $100/month - Pro |
 | --- | --- | --- | --- |
 | [Status Pages](/status-page) |  |  |  |
 | Number of status pages | 1 | 1 +$20/mo./each | 5 +$20/mo./each |
@@ -42,9 +59,11 @@ category: "company"
 | **Collaboration** |  |  |  |
 | Team members | 1 | Unlimited | Unlimited |
 
+All paid plans are available with **monthly** or **annual** billing. Choose annual billing to get **2 months free** — that's Starter at $300/year ($25/mo) and Pro at $1,000/year (~$83/mo).
+
 We provide pricing support for **EUR**/**USD**/**INR** as currency. Contact us at [ping@openstatus.dev](mailto:ping@openstatus.dev) or [book a call](https://openstatus.dev/cal) if you have questions.
 
-**Add-ons** are workspace settings. Once enabled, you can use these configurations for every status page, monitor, etc. in your workspace.
+**Add-ons** are workspace settings. Once enabled, you can use these configurations for every status page, monitor, etc. in your workspace. Add-ons are billed monthly.
 
 ---
 
diff --git a/apps/web/src/lib/metadata/structured-data.ts b/apps/web/src/lib/metadata/structured-data.ts
@@ -94,7 +94,7 @@ export const getJsonLDProduct = (): WithContext<Product> => {
     },
     offers: Object.entries(allPlans).map(([_, value]) => ({
       "@type": "Offer",
-      price: value.price.USD,
+      price: value.price.monthly.USD,
       name: value.title,
       priceCurrency: "USD",
       availability: "https://schema.org/InStock",
@@ -116,7 +116,7 @@ export const getJsonLDSoftwareApplication =
       operatingSystem: "Web, Self-hosted",
       offers: Object.entries(allPlans).map(([_, value]) => ({
         "@type": "Offer",
-        price: value.price.USD,
+        price: value.price.monthly.USD,
         name: value.title,
         priceCurrency: "USD",
         availability: "https://schema.org/InStock",
diff --git a/packages/api/src/router/stripe/index.ts b/packages/api/src/router/stripe/index.ts
@@ -11,7 +11,10 @@ import {
 
 import { Events } from "@openstatus/analytics";
 import { allPlans } from "@openstatus/db/src/schema/plan/config";
-import { addons } from "@openstatus/db/src/schema/plan/schema";
+import {
+  addons,
+  billingIntervals,
+} from "@openstatus/db/src/schema/plan/schema";
 import { updateAddonInLimits } from "@openstatus/db/src/schema/plan/utils";
 import { TRPCError } from "@trpc/server";
 import type { Stripe } from "stripe";
@@ -90,9 +93,9 @@ export const stripeRouter = createTRPCRouter({
       z.object({
         workspaceSlug: z.string(),
         plan: z.enum(workspacePlans),
+        interval: z.enum(billingIntervals).default("monthly"),
         successUrl: z.string().optional(),
         cancelUrl: z.string().optional(),
-        // TODO: plan: workspacePlanSchema
       }),
     )
     .mutation(async (opts) => {
@@ -145,7 +148,7 @@ export const stripeRouter = createTRPCRouter({
           .run();
       }
 
-      const priceId = getPriceIdForPlan(opts.input.plan);
+      const priceId = getPriceIdForPlan(opts.input.plan, opts.input.interval);
       const session = await stripe.checkout.sessions.create({
         payment_method_types: ["card"],
         customer: stripeId,
diff --git a/packages/api/src/router/stripe/utils.ts b/packages/api/src/router/stripe/utils.ts
@@ -1,12 +1,19 @@
 // Shamelessly stolen from dub.co
 
 import type { WorkspacePlan } from "@openstatus/db/src/schema";
-import type { Addons } from "@openstatus/db/src/schema/plan/schema";
+import type {
+  Addons,
+  BillingInterval,
+} from "@openstatus/db/src/schema/plan/schema";
 
 export const getPlanFromPriceId = (priceId: string) => {
   const env =
     process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? "production" : "test";
-  return PLANS.find((plan) => plan.price.monthly.priceIds[env] === priceId);
+  return PLANS.find(
+    (plan) =>
+      plan.price.monthly.priceIds[env] === priceId ||
+      plan.price.yearly.priceIds[env] === priceId,
+  );
 };
 
 export const getFeatureFromPriceId = (priceId: string) => {
@@ -17,10 +24,13 @@ export const getFeatureFromPriceId = (priceId: string) => {
   );
 };
 
-export const getPriceIdForPlan = (plan: WorkspacePlan) => {
+export const getPriceIdForPlan = (
+  plan: WorkspacePlan,
+  interval: BillingInterval = "monthly",
+) => {
   const env =
     process.env.NEXT_PUBLIC_VERCEL_ENV === "production" ? "production" : "test";
-  return PLANS.find((p) => p.plan === plan)?.price.monthly.priceIds[env];
+  return PLANS.find((p) => p.plan === plan)?.price[interval].priceIds[env];
 };
 
 export const getPriceIdForFeature = (feature: keyof Addons) => {
@@ -41,6 +51,12 @@ export const PLANS = [
           production: "price_1RxsLNBXJcTfzsyJ7La5Jn5y",
         },
       },
+      yearly: {
+        priceIds: {
+          test: "XXX",
+          production: "price_1TDlHxBXJcTfzsyJygJw92nU",
+        },
+      },
     },
   },
   {
@@ -52,12 +68,19 @@ export const PLANS = [
           production: "price_1RxsJzBXJcTfzsyJBOztaKlR",
         },
       },
+      yearly: {
+        priceIds: {
+          test: "XXX",
+          production: "price_1TDlGSBXJcTfzsyJMsDV4DRQ",
+        },
+      },
     },
   },
 ] satisfies Array<{
   plan: WorkspacePlan;
   price: {
     monthly: { priceIds: { test: string; production: string } };
+    yearly: { priceIds: { test: string; production: string } };
   };
 }>;
 
diff --git a/packages/db/src/schema/plan/config.ts b/packages/db/src/schema/plan/config.ts
@@ -1,12 +1,12 @@
 import { AVAILABLE_REGIONS, FREE_FLY_REGIONS } from "@openstatus/regions";
 import type { WorkspacePlan } from "../workspaces/validation";
-import type { Addons, PlanLimits, Price } from "./schema";
+import type { Addons, IntervalPrice, PlanLimits, Price } from "./schema";
 
 type PlanConfig = {
   title: "Hobby" | "Starter" | "Pro";
   id: WorkspacePlan;
   description: string;
-  price: Price;
+  price: IntervalPrice;
   addons: Partial<{
     [K in keyof Addons]: {
       title: string;
@@ -24,9 +24,8 @@ export const allPlans: Record<WorkspacePlan, PlanConfig> = {
     id: "free",
     description: "Perfect for personal projects",
     price: {
-      USD: 0,
-      EUR: 0,
-      INR: 0,
+      monthly: { USD: 0, EUR: 0, INR: 0 },
+      yearly: { USD: 0, EUR: 0, INR: 0 },
     },
     addons: {},
     limits: {
@@ -69,9 +68,8 @@ export const allPlans: Record<WorkspacePlan, PlanConfig> = {
     id: "starter",
     description: "Perfect for uptime monitoring",
     price: {
-      USD: 30,
-      EUR: 30,
-      INR: 3000,
+      monthly: { USD: 30, EUR: 30, INR: 3_000 },
+      yearly: { USD: 300, EUR: 300, INR: 30_000 },
     },
     addons: {
       "email-domain-protection": {
@@ -144,9 +142,8 @@ export const allPlans: Record<WorkspacePlan, PlanConfig> = {
     id: "team",
     description: "Perfect for global synthetic monitoring",
     price: {
-      USD: 100,
-      EUR: 100,
-      INR: 10_000,
+      monthly: { USD: 100, EUR: 100, INR: 10_000 },
+      yearly: { USD: 1_000, EUR: 1_000, INR: 100_000 },
     },
     addons: {
       "email-domain-protection": {
diff --git a/packages/db/src/schema/plan/schema.ts b/packages/db/src/schema/plan/schema.ts
@@ -72,6 +72,16 @@ const priceSchema = z.object({
 
 export type Price = z.infer<typeof priceSchema>;
 
+export const billingIntervals = ["monthly", "yearly"] as const;
+export type BillingInterval = (typeof billingIntervals)[number];
+
+const intervalPriceSchema = z.object({
+  monthly: priceSchema,
+  yearly: priceSchema,
+});
+
+export type IntervalPrice = z.infer<typeof intervalPriceSchema>;
+
 export const addons = [
   "email-domain-protection",
   "white-label",
diff --git a/packages/db/src/schema/plan/utils.ts b/packages/db/src/schema/plan/utils.ts
