feat(cloud): add billing wip

2025-06-26 18:27:59 +00:00 · 2024-10-20 00:14:27 -06:00
parent 319584d911
commit fe0a662afd
11 changed files with 4933 additions and 37 deletions
--- a/apps/dokploy/components/dashboard/settings/billing/review-payment.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/review-payment.tsx
@@ -0,0 +1,141 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { format } from "date-fns";
+import { ArrowRightIcon } from "lucide-react";
+import { useState } from "react";
+import { calculatePrice } from "./show-billing";
+
+interface Props {
+	isAnnual: boolean;
+	serverQuantity: number;
+}
+
+export const ReviewPayment = ({ isAnnual, serverQuantity }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: billingSubscription } =
+		api.stripe.getBillingSubscription.useQuery();
+
+	const { data: calculateUpgradeCost } =
+		api.stripe.calculateUpgradeCost.useQuery(
+			{
+				serverQuantity,
+				isAnnual,
+			},
+			{
+				enabled: !!serverQuantity && isOpen,
+			},
+		);
+
+	// const { data: calculateNewMonthlyCost } =
+	// 	api.stripe.calculateNewMonthlyCost.useQuery(
+	// 		{
+	// 			serverQuantity,
+	// 			isAnnual,
+	// 		},
+	// 		{
+	// 			enabled: !!serverQuantity && isOpen,
+	// 		},
+	// 	);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">Review Payment</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Upgrade Plan</DialogTitle>
+					<DialogDescription>
+						You are about to upgrade your plan to a{" "}
+						{isAnnual ? "annual" : "monthly"} plan. This will automatically
+						renew your subscription.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-row w-full gap-4 items-center">
+					<div className="flex flex-col border gap-4 p-4 rounded-lg w-full">
+						<Label className="text-base font-semibold border-b border-b-divider pb-2">
+							Current Plan
+						</Label>
+						<div className="grid flex-1 gap-2">
+							<Label>Amount</Label>
+							<span className="text-sm text-muted-foreground">
+								${billingSubscription?.monthlyAmount}
+							</span>
+						</div>
+						<div className="grid flex-1 gap-2">
+							<Label>Servers</Label>
+
+							<span className="text-sm text-muted-foreground">
+								{billingSubscription?.totalServers}
+							</span>
+						</div>
+						<div className="grid flex-1 gap-2">
+							<Label>Next Payment</Label>
+							<span className="text-sm text-muted-foreground">
+								{billingSubscription?.nextPaymentDate
+									? format(billingSubscription?.nextPaymentDate, "MMM d, yyyy")
+									: "-"}
+								{/* {format(billingSubscription?.nextPaymentDate, "MMM d, yyyy")} */}
+							</span>
+						</div>
+					</div>
+					<div className="size-10">
+						<ArrowRightIcon className="size-6" />
+					</div>
+					<div className="flex flex-col border gap-4 p-4 rounded-lg w-full">
+						<Label className="text-base font-semibold border-b border-b-divider pb-2">
+							New Plan
+						</Label>
+						<div className="grid flex-1 gap-2">
+							<Label>Amount</Label>
+							<span className="text-sm text-muted-foreground">
+								${calculatePrice(serverQuantity).toFixed(2)}
+							</span>
+						</div>
+						<div className="grid flex-1 gap-2">
+							<Label>Servers</Label>
+							<span className="text-sm text-muted-foreground">
+								{serverQuantity}
+							</span>
+						</div>
+						<div className="grid flex-1 gap-2">
+							<Label>Difference</Label>
+							<span className="text-sm text-muted-foreground">
+								{Number(billingSubscription?.totalServers) === serverQuantity
+									? "-"
+									: `$${calculateUpgradeCost} USD`}{" "}
+							</span>
+						</div>
+						{/* <div className="grid flex-1 gap-2">
+							<Label>New {isAnnual ? "annual" : "monthly"} cost</Label>
+							<span className="text-sm text-muted-foreground">
+								{Number(billingSubscription?.totalServers) === serverQuantity
+									? "-"
+									: `${calculateNewMonthlyCost} USD`}{" "}
+							</span>
+						</div> */}
+					</div>
+				</div>
+
+				<DialogFooter className="sm:justify-end">
+					<DialogClose asChild>
+						<Button type="button" variant="secondary">
+							Pay
+						</Button>
+					</DialogClose>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -0,0 +1,228 @@
+import { Button } from "@/components/ui/button";
+import { NumberInput } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { loadStripe } from "@stripe/stripe-js";
+import clsx from "clsx";
+import { CheckIcon, MinusIcon, PlusIcon } from "lucide-react";
+import React, { useState } from "react";
+import { toast } from "sonner";
+import { ReviewPayment } from "./review-payment";
+
+const stripePromise = loadStripe(
+	"pk_test_51QAm7bF3cxQuHeOz0xg04o9teeyTbbNHQPJ5Tr98MlTEan9MzewT3gwh0jSWBNvrRWZ5vASoBgxUSF4gPWsJwATk00Ir2JZ0S1",
+);
+
+export const calculatePrice = (count: number, isAnnual = false) => {
+	if (isAnnual) {
+		if (count === 1) return 40.8;
+		if (count <= 3) return 81.5;
+		return 81.5 + (count - 3) * 35.7;
+	}
+	if (count === 1) return 4.0;
+	if (count <= 3) return 7.99;
+	return 7.99 + (count - 3) * 3.5;
+};
+
+export const ShowBilling = () => {
+	const { data: admin } = api.admin.one.useQuery();
+	const { data, refetch } = api.stripe.getProducts.useQuery();
+	const { mutateAsync: createCheckoutSession } =
+		api.stripe.createCheckoutSession.useMutation();
+
+	const [serverQuantity, setServerQuantity] = useState(3);
+
+	const { mutateAsync: upgradeSubscription } =
+		api.stripe.upgradeSubscription.useMutation();
+	const [isAnnual, setIsAnnual] = useState(false);
+
+	const handleCheckout = async (productId: string) => {
+		const stripe = await stripePromise;
+
+		if (data && admin?.stripeSubscriptionId && data.subscriptions.length > 0) {
+			upgradeSubscription({
+				subscriptionId: admin?.stripeSubscriptionId,
+				serverQuantity,
+				isAnnual,
+			})
+				.then(async (subscription) => {
+					toast.success("Subscription upgraded successfully");
+					await refetch();
+				})
+				.catch((error) => {
+					toast.error("Error to upgrade the subscription");
+					console.error(error);
+				});
+		} else {
+			createCheckoutSession({
+				productId,
+				serverQuantity: serverQuantity,
+				isAnnual,
+			}).then(async (session) => {
+				await stripe?.redirectToCheckout({
+					sessionId: session.sessionId,
+				});
+			});
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-4 w-full justify-center">
+			<Tabs
+				defaultValue="monthly"
+				className="w-full"
+				onValueChange={(e) => {
+					console.log(e);
+					setIsAnnual(e === "annual");
+				}}
+			>
+				<TabsList>
+					<TabsTrigger value="monthly">Monthly</TabsTrigger>
+					<TabsTrigger value="annual">Annual</TabsTrigger>
+				</TabsList>
+			</Tabs>
+			{data?.products?.map((product) => {
+				const featured = true;
+
+				return (
+					<div key={product.id}>
+						<section
+							className={clsx(
+								"flex flex-col rounded-3xl  border-dashed border-2 px-4 max-w-sm",
+								featured
+									? "order-first bg-black border py-8 lg:order-none"
+									: "lg:py-8",
+							)}
+						>
+							<h3 className="mt-5 font-medium text-lg text-white">
+								{product.name}
+							</h3>
+							<p
+								className={clsx(
+									"text-sm",
+									featured ? "text-white" : "text-slate-400",
+								)}
+							>
+								{product.description}
+							</p>
+							<p className="order-first text-3xl font-semibold tracking-tight text-primary">
+								$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
+							</p>
+
+							<ul
+								role="list"
+								className={clsx(
+									" mt-4 flex flex-col gap-y-2 text-sm",
+									featured ? "text-white" : "text-slate-200",
+								)}
+							>
+								{[
+									"All the features of Dokploy",
+									"Unlimited deployments",
+									"Self-hosted on your own infrastructure",
+									"Full access to all deployment features",
+									"Dokploy integration",
+									"Free",
+								].map((feature) => (
+									<li key={feature} className="flex text-muted-foreground">
+										<CheckIcon />
+										<span className="ml-4">{feature}</span>
+									</li>
+								))}
+							</ul>
+							<div className="flex flex-col gap-2 mt-4">
+								<div className="flex items-center gap-2 justify-center">
+									<span className="text-sm text-muted-foreground">
+										{serverQuantity} Servers
+									</span>
+								</div>
+
+								<div className="flex items-center space-x-2">
+									<Button
+										disabled={serverQuantity <= 1}
+										variant="outline"
+										onClick={() => {
+											if (serverQuantity <= 1) return;
+
+											if (serverQuantity === 3) {
+												setServerQuantity(serverQuantity - 2);
+												return;
+											}
+											setServerQuantity(serverQuantity - 1);
+										}}
+									>
+										<MinusIcon className="h-4 w-4" />
+									</Button>
+									<NumberInput
+										value={serverQuantity}
+										onChange={(e) => {
+											if (Number(e.target.value) === 2) {
+												setServerQuantity(3);
+												return;
+											}
+											setServerQuantity(e.target.value);
+										}}
+									/>
+
+									<Button
+										variant="outline"
+										onClick={() => {
+											if (serverQuantity === 1) {
+												setServerQuantity(3);
+												return;
+											}
+
+											setServerQuantity(serverQuantity + 1);
+										}}
+									>
+										<PlusIcon className="h-4 w-4" />
+									</Button>
+								</div>
+								<div
+									className={cn(
+										data.subscriptions.length > 0
+											? "justify-between"
+											: "justify-end",
+										"flex flex-row  items-center gap-2 mt-4",
+									)}
+								>
+									{data.subscriptions.length > 0 && (
+										<ReviewPayment
+											isAnnual={isAnnual}
+											serverQuantity={serverQuantity}
+										/>
+									)}
+
+									<div className="justify-end">
+										<Button
+											onClick={async () => {
+												handleCheckout(product.id);
+											}}
+											disabled={serverQuantity < 1}
+										>
+											Subscribe
+										</Button>
+									</div>
+								</div>
+							</div>
+						</section>
+					</div>
+				);
+			})}
+
+			{/* <Button
+            variant="destructive"
+            onClick={async () => {
+                // Crear una sesión del portal del cliente
+                const session = await createCustomerPortalSession();
+
+                // Redirigir al portal del cliente en Stripe
+                window.location.href = session.url;
+            }}
+        >
+            Manage Subscription
+        </Button> */}
+		</div>
+	);
+};
--- a/apps/dokploy/drizzle/0041_small_aaron_stack.sql
+++ b/apps/dokploy/drizzle/0041_small_aaron_stack.sql
@@ -0,0 +1,3 @@
+ALTER TABLE "admin" ADD COLUMN "stripeCustomerId" text;--> statement-breakpoint
+ALTER TABLE "admin" ADD COLUMN "stripeSubscriptionId" text;--> statement-breakpoint
+ALTER TABLE "admin" ADD COLUMN "totalServers" integer DEFAULT 0 NOT NULL;
--- a/apps/dokploy/drizzle/meta/0041_snapshot.json
+++ b/apps/dokploy/drizzle/meta/0041_snapshot.json
--- a/apps/dokploy/drizzle/meta/_journal.json
+++ b/apps/dokploy/drizzle/meta/_journal.json
@@ -288,6 +288,13 @@
      "when": 1728780577084,
      "tag": "0040_graceful_wolfsbane",
      "breakpoints": true
+    },
+    {
+      "idx": 41,
+      "version": "6",
+      "when": 1729314952330,
+      "tag": "0041_small_aaron_stack",
+      "breakpoints": true
    }
  ]
 }
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -34,13 +34,12 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
-		"stripe": "17.2.0",
-		"@dokploy/server": "workspace:*",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/legacy-modes": "6.4.0",
 		"@codemirror/view": "6.29.0",
+		"@dokploy/server": "workspace:*",
 		"@dokploy/trpc-openapi": "0.0.4",
 		"@hookform/resolvers": "^3.3.4",
 		"@octokit/webhooks": "^13.2.7",
@@ -62,6 +61,7 @@
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-toggle": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
+		"@stripe/stripe-js": "4.8.0",
 		"@tanstack/react-query": "^4.36.1",
 		"@tanstack/react-table": "^8.16.0",
 		"@trpc/client": "^10.43.6",
@@ -103,6 +103,8 @@
 		"recharts": "^2.12.7",
 		"slugify": "^1.6.6",
 		"sonner": "^1.4.0",
+		"ssh2": "1.15.0",
+		"stripe": "17.2.0",
 		"superjson": "^2.2.1",
 		"swagger-ui-react": "^5.17.14",
 		"tailwind-merge": "^2.2.0",
@@ -112,11 +114,9 @@
 		"ws": "8.16.0",
 		"xterm-addon-fit": "^0.8.0",
 		"zod": "^3.23.4",
-		"zod-form-data": "^2.0.2",
-		"ssh2": "1.15.0"
+		"zod-form-data": "^2.0.2"
 	},
 	"devDependencies": {
-		"autoprefixer": "10.4.12",
 		"@types/adm-zip": "^0.5.5",
 		"@types/bcrypt": "5.0.2",
 		"@types/js-yaml": "4.0.9",
@@ -125,8 +125,10 @@
 		"@types/node-schedule": "2.1.6",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",
+		"@types/ssh2": "1.15.1",
 		"@types/swagger-ui-react": "^4.18.3",
 		"@types/ws": "8.5.10",
+		"autoprefixer": "10.4.12",
 		"drizzle-kit": "^0.21.1",
 		"esbuild": "0.20.2",
 		"lint-staged": "^15.2.7",
@@ -135,8 +137,7 @@
 		"tsx": "^4.7.0",
 		"typescript": "^5.4.2",
 		"vite-tsconfig-paths": "4.3.2",
-		"vitest": "^1.6.0",
-		"@types/ssh2": "1.15.1"
+		"vitest": "^1.6.0"
 	},
 	"ct3aMetadata": {
 		"initVersion": "7.25.2"
--- a/apps/dokploy/pages/dashboard/settings/billing.tsx
+++ b/apps/dokploy/pages/dashboard/settings/billing.tsx
@@ -1,33 +1,12 @@
-import { ShowNodes } from "@/components/dashboard/settings/cluster/nodes/show-nodes";
+import { ShowBilling } from "@/components/dashboard/settings/billing/show-billing";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
-import { api } from "@/utils/api";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import type { GetServerSidePropsContext } from "next";
 import React, { type ReactElement } from "react";

 const Page = () => {
-	const { data } = api.stripe.getProducts.useQuery();
-	console.log(data);
-	return (
-		<div className="flex flex-col gap-4 w-full">
-			{data?.map((product) => (
-				<div key={product.id} className="border p-4 rounded-lg shadow-md">
-					<h2 className="text-xl font-semibold">{product.name}</h2>
-					{product.description && (
-						<p className="text-gray-500">{product.description}</p>
-					)}
-					<p className="text-lg font-bold">
-						Price: {product.default_price.unit_amount / 100}{" "}
-						{product.default_price.currency.toUpperCase()}
-					</p>
-					{/* <button className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
-						Subscribe
-					</button> */}
-				</div>
-			))}
-		</div>
-	);
+	return <ShowBilling />;
 };

 export default Page;
--- a/apps/dokploy/server/api/routers/stripe.ts
+++ b/apps/dokploy/server/api/routers/stripe.ts
@@ -1,18 +1,358 @@
+import { admins } from "@/server/db/schema";
+import {
+	BASE_PRICE_MONTHLY_ID,
+	GROWTH_PRICE_MONTHLY_ID,
+	SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+	getStripeItems,
+	getStripePrices,
+	getStripeSubscriptionItems,
+	getStripeSubscriptionItemsCalculate,
+	updateBasePlan,
+} from "@/server/utils/stripe";
+import { findAdminById } from "@dokploy/server";
+import { TRPCError } from "@trpc/server";
+import { eq } from "drizzle-orm";
 import Stripe from "stripe";
+import { z } from "zod";
 import { adminProcedure, createTRPCRouter } from "../trpc";

 export const stripeRouter = createTRPCRouter({
-	getProducts: adminProcedure.query(async () => {
+	getProducts: adminProcedure.query(async ({ ctx }) => {
+		const admin = await findAdminById(ctx.user.adminId);
+		const stripeCustomerId = admin.stripeCustomerId;
+
 		const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
 			apiVersion: "2024-09-30.acacia",
 		});

 		const products = await stripe.products.list({
 			expand: ["data.default_price"],
+			active: true,
 		});
-		console.log(products);
-		return products.data;
+
+		if (!stripeCustomerId) {
+			return {
+				products: products.data,
+				subscriptions: [],
+			};
+		}
+
+		const subscriptions = await stripe.subscriptions.list({
+			customer: stripeCustomerId,
+			status: "active",
+			expand: ["data.items.data.price"],
+		});
+
+		return {
+			products: products.data,
+			subscriptions: subscriptions.data,
+		};
 	}),
+	createCheckoutSession: adminProcedure
+		.input(
+			z.object({
+				productId: z.string(),
+				serverQuantity: z.number().min(1),
+				isAnnual: z.boolean(),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+				apiVersion: "2024-09-30.acacia",
+			});
+
+			const items = getStripeItems(input.serverQuantity, input.isAnnual);
+
+			const session = await stripe.checkout.sessions.create({
+				// payment_method_types: ["card"],
+				mode: "subscription",
+				line_items: [...items],
+				// subscription_data: {
+				// 	trial_period_days: 0,
+				// },
+				metadata: {
+					serverQuantity: input.serverQuantity,
+				},
+				success_url:
+					"http://localhost:3000/api/stripe.success?sessionId={CHECKOUT_SESSION_ID}",
+				cancel_url: "http://localhost:3000/dashboard/settings/billing",
+			});
+
+			return { sessionId: session.id };
+		}),
+
+	upgradeSubscription: adminProcedure
+		.input(
+			z.object({
+				subscriptionId: z.string(), // ID de la suscripción actual
+				serverQuantity: z.number().min(1),
+				isAnnual: z.boolean(),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+				apiVersion: "2024-09-30.acacia",
+			});
+
+			const { subscriptionId, serverQuantity, isAnnual } = input;
+
+			// Price IDs
+			// const price1ServerId = "price_1QBk3bF3cxQuHeOzCmSlyFB3"; // $4.00
+			// const priceUpToThreeId = "price_1QBkPiF3cxQuHeOzceNiM2OJ"; // $7.99
+			// const priceAdditionalId = "price_1QBkr9F3cxQuHeOzTBo46Bmy"; // $3.50
+
+			// Obtener suscripción actual
+			const { baseItem, additionalItem } = await getStripeSubscriptionItems(
+				subscriptionId,
+				isAnnual,
+			);
+
+			// const updateBasePlan = async (newPriceId: string) => {
+			// 	await stripe.subscriptions.update(subscriptionId, {
+			// 		items: [
+			// 			{
+			// 				id: baseItem?.id,
+			// 				price: newPriceId,
+			// 				quantity: 1,
+			// 			},
+			// 		],
+			// 		proration_behavior: "always_invoice",
+			// 	});
+			// };
+
+			const deleteAdditionalItem = async () => {
+				if (additionalItem) {
+					await stripe.subscriptionItems.del(additionalItem.id);
+				}
+			};
+
+			const updateOrCreateAdditionalItem = async (
+				additionalServers: number,
+			) => {
+				if (additionalItem) {
+					await stripe.subscriptionItems.update(additionalItem.id, {
+						quantity: additionalServers,
+					});
+				} else {
+					await stripe.subscriptions.update(subscriptionId, {
+						items: [
+							{
+								price: SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+								quantity: additionalServers,
+							},
+						],
+						proration_behavior: "always_invoice",
+					});
+				}
+			};
+
+			if (serverQuantity === 1) {
+				await deleteAdditionalItem();
+				if (
+					baseItem?.price.id !== BASE_PRICE_MONTHLY_ID &&
+					baseItem?.price.id
+				) {
+					await updateBasePlan(
+						subscriptionId,
+						baseItem?.id,
+						BASE_PRICE_MONTHLY_ID,
+					);
+				}
+			} else if (serverQuantity >= 2 && serverQuantity <= 3) {
+				await deleteAdditionalItem();
+				if (
+					baseItem?.price.id !== GROWTH_PRICE_MONTHLY_ID &&
+					baseItem?.price.id
+				) {
+					await updateBasePlan(
+						subscriptionId,
+						baseItem?.id,
+						GROWTH_PRICE_MONTHLY_ID,
+					);
+				}
+			} else if (serverQuantity > 3) {
+				if (
+					baseItem?.price.id !== GROWTH_PRICE_MONTHLY_ID &&
+					baseItem?.price.id
+				) {
+					await updateBasePlan(
+						subscriptionId,
+						baseItem?.id,
+						GROWTH_PRICE_MONTHLY_ID,
+					);
+				}
+				const additionalServers = serverQuantity - 3;
+				await updateOrCreateAdditionalItem(additionalServers);
+			}
+
+			await stripe.subscriptions.update(subscriptionId, {
+				metadata: {
+					serverQuantity: serverQuantity.toString(),
+				},
+			});
+
+			return { success: true };
+		}),
+	createCustomerPortalSession: adminProcedure.mutation(
+		async ({ ctx, input }) => {
+			const admin = await findAdminById(ctx.user.adminId);
+
+			if (!admin.stripeCustomerId) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: "Stripe Customer ID not found",
+				});
+			}
+			const stripeCustomerId = admin.stripeCustomerId;
+
+			const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+				apiVersion: "2024-09-30.acacia",
+			});
+
+			const session = await stripe.billingPortal.sessions.create({
+				customer: stripeCustomerId,
+				return_url: "http://localhost:3000/dashboard/settings/billing",
+			});
+
+			return { url: session.url };
+		},
+	),
+	success: adminProcedure.query(async ({ ctx }) => {
+		const sessionId = ctx.req.query.sessionId as string;
+
+		if (!sessionId) {
+			throw new Error("No session_id provided");
+		}
+
+		const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+			apiVersion: "2024-09-30.acacia",
+		});
+
+		const session = await stripe.checkout.sessions.retrieve(sessionId);
+
+		if (session.payment_status === "paid") {
+			console.log("Payment successful!");
+
+			const stripeCustomerId = session.customer as string;
+			console.log("Stripe Customer ID:", stripeCustomerId);
+
+			const stripeSubscriptionId = session.subscription as string;
+			console.log("Stripe Subscription ID:", stripeSubscriptionId);
+
+			await db
+				?.update(admins)
+				.set({
+					stripeCustomerId,
+					stripeSubscriptionId,
+				})
+				.where(eq(admins.adminId, ctx.user.adminId))
+				.returning();
+		} else {
+			console.log("Payment not completed or failed.");
+		}
+
+		ctx.res.redirect("/dashboard/settings/billing");
+
+		return true;
+	}),
+
+	getBillingSubscription: adminProcedure.query(async ({ ctx }) => {
+		const admin = await findAdminById(ctx.user.adminId);
+
+		const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+			apiVersion: "2024-09-30.acacia",
+		});
+
+		const stripeSubscriptionId = admin.stripeSubscriptionId;
+		const subscription =
+			await stripe.subscriptions.retrieve(stripeSubscriptionId);
+
+		const totalServers = subscription.metadata.serverQuantity;
+		console.log(subscription.metadata);
+		let totalAmount = 0;
+
+		for (const item of subscription.items.data) {
+			const quantity = item.quantity || 1;
+			const amountPerUnit = item.price.unit_amount / 100;
+
+			totalAmount += quantity * amountPerUnit;
+		}
+
+		return {
+			nextPaymentDate: new Date(subscription.current_period_end * 1000),
+			monthlyAmount: `${totalAmount.toFixed(2)} USD`,
+			totalServers,
+		};
+	}),
+
+	calculateUpgradeCost: adminProcedure
+		.input(
+			z.object({
+				serverQuantity: z.number().min(1),
+				isAnnual: z.boolean(),
+			}),
+		)
+		.query(async ({ input, ctx }) => {
+			const admin = await findAdminById(ctx.user.adminId);
+			const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+				apiVersion: "2024-09-30.acacia",
+			});
+
+			if (!admin.stripeSubscriptionId) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "Subscription not found",
+				});
+			}
+
+			const subscriptionId = admin.stripeSubscriptionId;
+
+			const items = await getStripeSubscriptionItemsCalculate(
+				subscriptionId,
+				input.serverQuantity,
+				input.isAnnual,
+			);
+			console.log(items);
+
+			if (!subscriptionId) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "Subscription not found",
+				});
+			}
+			const upcomingInvoice = await stripe.invoices.retrieveUpcoming({
+				subscription: subscriptionId,
+				subscription_items: items,
+				subscription_proration_behavior: "always_invoice",
+			});
+
+			const totalAmount = upcomingInvoice.total / 100;
+			return totalAmount;
+		}),
+	calculateNewMonthlyCost: adminProcedure
+		.input(
+			z.object({
+				serverQuantity: z.number().min(1),
+				isAnnual: z.boolean(),
+			}),
+		)
+		.query(async ({ input, ctx }) => {
+			const serverCount = input.serverQuantity;
+
+			const prices = await getStripePrices(input.isAnnual);
+			let monthlyCost = 0;
+			if (serverCount === 1) {
+				monthlyCost = prices?.basePrice?.unit_amount / 100;
+			} else if (serverCount >= 2 && serverCount <= 3) {
+				monthlyCost = prices?.growthPrice?.unit_amount / 100;
+			} else if (serverCount > 3) {
+				monthlyCost =
+					prices?.growthPrice?.unit_amount / 100 +
+					(serverCount - 3) * (prices?.additionalPrice?.unit_amount / 100);
+			}
+
+			return monthlyCost.toFixed(2);
+		}),
 });
 // {
 // 	"Parallelism": 1,
--- a/apps/dokploy/server/utils/stripe.ts
+++ b/apps/dokploy/server/utils/stripe.ts
@@ -0,0 +1,257 @@
+import Stripe from "stripe";
+
+export const BASE_PRICE_MONTHLY_ID =
+	process.env.STRIPE_BASE_PRICE_MONTHLY_ID || ""; // $4.00
+export const GROWTH_PRICE_MONTHLY_ID =
+	process.env.STRIPE_GROWTH_PRICE_MONTHLY_ID || ""; // $7.99
+export const SERVER_ADDITIONAL_PRICE_MONTHLY_ID =
+	process.env.STRIPE_SERVER_ADDITIONAL_PRICE_MONTHLY_ID || ""; // $3.50
+
+export const BASE_PRICE_YEARLY_ID =
+	process.env.STRIPE_BASE_PRICE_YEARLY_ID || ""; // $40.80
+export const GROWTH_PRICE_YEARLY_ID =
+	process.env.STRIPE_GROWTH_PRICE_YEARLY_ID || ""; // $81.50
+export const ADDITIONAL_PRICE_YEARLY_ID =
+	process.env.STRIPE_SERVER_ADDITIONAL_PRICE_YEARLY_ID || ""; // $35.70
+
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+	apiVersion: "2024-09-30.acacia",
+});
+
+export const getStripeItems = (serverQuantity: number, isAnnual: boolean) => {
+	const items = [];
+
+	if (isAnnual) {
+		if (serverQuantity === 1) {
+			items.push({
+				price: BASE_PRICE_YEARLY_ID,
+				quantity: 1,
+			});
+		} else if (serverQuantity <= 3) {
+			items.push({
+				price: GROWTH_PRICE_YEARLY_ID,
+				quantity: 1,
+			});
+		} else {
+			items.push({
+				price: GROWTH_PRICE_YEARLY_ID,
+				quantity: 1,
+			});
+			items.push({
+				price: ADDITIONAL_PRICE_YEARLY_ID,
+				quantity: serverQuantity - 3,
+			});
+		}
+
+		return items;
+	}
+	if (serverQuantity === 1) {
+		items.push({
+			price: BASE_PRICE_MONTHLY_ID,
+			quantity: 1,
+		});
+	} else if (serverQuantity <= 3) {
+		items.push({
+			price: GROWTH_PRICE_MONTHLY_ID,
+			quantity: 1,
+		});
+	} else {
+		items.push({
+			price: GROWTH_PRICE_MONTHLY_ID,
+			quantity: 1,
+		});
+		items.push({
+			price: SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+			quantity: serverQuantity - 3,
+		});
+	}
+
+	return items;
+};
+
+export const getStripeSubscriptionItemsCalculate = async (
+	subscriptionId: string,
+	serverQuantity: number,
+	isAnnual: boolean,
+) => {
+	const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+	const currentItems = subscription.items.data;
+	const items = [];
+
+	if (isAnnual) {
+		const baseItem = currentItems.find(
+			(item) =>
+				item.price.id === BASE_PRICE_YEARLY_ID ||
+				item.price.id === GROWTH_PRICE_YEARLY_ID,
+		);
+		const additionalItem = currentItems.find(
+			(item) => item.price.id === ADDITIONAL_PRICE_YEARLY_ID,
+		);
+		if (serverQuantity === 1) {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: BASE_PRICE_YEARLY_ID,
+					quantity: 1,
+				});
+			}
+		} else if (serverQuantity <= 3) {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: GROWTH_PRICE_YEARLY_ID,
+					quantity: 1,
+				});
+			}
+		} else {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: GROWTH_PRICE_YEARLY_ID,
+					quantity: 1,
+				});
+			}
+
+			if (additionalItem) {
+				items.push({
+					id: additionalItem.id,
+					price: ADDITIONAL_PRICE_YEARLY_ID,
+					quantity: serverQuantity - 3,
+				});
+			} else {
+				items.push({
+					price: ADDITIONAL_PRICE_YEARLY_ID,
+					quantity: serverQuantity - 3,
+				});
+			}
+		}
+	} else {
+		const baseItem = currentItems.find(
+			(item) =>
+				item.price.id === BASE_PRICE_MONTHLY_ID ||
+				item.price.id === GROWTH_PRICE_MONTHLY_ID,
+		);
+		const additionalItem = currentItems.find(
+			(item) => item.price.id === SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+		);
+		if (serverQuantity === 1) {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: BASE_PRICE_MONTHLY_ID,
+					quantity: 1,
+				});
+			}
+		} else if (serverQuantity <= 3) {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: GROWTH_PRICE_MONTHLY_ID,
+					quantity: 1,
+				});
+			}
+		} else {
+			if (baseItem) {
+				items.push({
+					id: baseItem.id,
+					price: GROWTH_PRICE_MONTHLY_ID,
+					quantity: 1,
+				});
+			}
+
+			if (additionalItem) {
+				items.push({
+					id: additionalItem.id,
+					price: SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+					quantity: serverQuantity - 3,
+				});
+			} else {
+				items.push({
+					price: SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+					quantity: serverQuantity - 3,
+				});
+			}
+		}
+	}
+
+	return items;
+};
+
+export const updateBasePlan = async (
+	subscriptionId: string,
+	subscriptionItemId: string,
+	newPriceId: string,
+) => {
+	await stripe.subscriptions.update(subscriptionId, {
+		items: [
+			{
+				id: subscriptionItemId,
+				price: newPriceId,
+				quantity: 1,
+			},
+		],
+		proration_behavior: "always_invoice",
+	});
+};
+
+export const deleteAdditionalItem = async (subscriptionItemId: string) => {
+	await stripe.subscriptionItems.del(subscriptionItemId);
+};
+
+export const getStripeSubscriptionItems = async (
+	subscriptionId: string,
+	isAnual: boolean,
+) => {
+	const subscription = await stripe.subscriptions.retrieve(subscriptionId, {
+		expand: ["items.data.price"],
+	});
+
+	if (isAnual) {
+		const baseItem = subscription.items.data.find(
+			(item) =>
+				item.price.id === BASE_PRICE_YEARLY_ID ||
+				item.price.id === GROWTH_PRICE_YEARLY_ID,
+		);
+		const additionalItem = subscription.items.data.find(
+			(item) => item.price.id === ADDITIONAL_PRICE_YEARLY_ID,
+		);
+
+		return {
+			baseItem,
+			additionalItem,
+		};
+	}
+	const baseItem = subscription.items.data.find(
+		(item) =>
+			item.price.id === BASE_PRICE_MONTHLY_ID ||
+			item.price.id === GROWTH_PRICE_MONTHLY_ID,
+	);
+	const additionalItem = subscription.items.data.find(
+		(item) => item.price.id === SERVER_ADDITIONAL_PRICE_MONTHLY_ID,
+	);
+
+	return {
+		baseItem,
+		additionalItem,
+	};
+};
+
+export const getStripePrices = async (isAnual: boolean) => {
+	const basePrice = isAnual
+		? await stripe.prices.retrieve(BASE_PRICE_YEARLY_ID)
+		: await stripe.prices.retrieve(BASE_PRICE_MONTHLY_ID);
+
+	const growthPrice = isAnual
+		? await stripe.prices.retrieve(GROWTH_PRICE_YEARLY_ID)
+		: await stripe.prices.retrieve(GROWTH_PRICE_MONTHLY_ID);
+
+	const additionalPrice = isAnual
+		? await stripe.prices.retrieve(ADDITIONAL_PRICE_YEARLY_ID)
+		: await stripe.prices.retrieve(SERVER_ADDITIONAL_PRICE_MONTHLY_ID);
+
+	return {
+		basePrice,
+		growthPrice,
+		additionalPrice,
+	};
+};
--- a/packages/server/src/db/schema/admin.ts
+++ b/packages/server/src/db/schema/admin.ts
@@ -1,5 +1,5 @@
 import { relations } from "drizzle-orm";
-import { boolean, pgTable, text } from "drizzle-orm/pg-core";
+import { boolean, integer, pgTable, text } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import { nanoid } from "nanoid";
 import { z } from "zod";
@@ -28,6 +28,9 @@ export const admins = pgTable("admin", {
 	createdAt: text("createdAt")
 		.notNull()
 		.$defaultFn(() => new Date().toISOString()),
+	stripeCustomerId: text("stripeCustomerId"),
+	stripeSubscriptionId: text("stripeSubscriptionId"),
+	totalServers: integer("totalServers").notNull().default(0),
 });

 export const adminsRelations = relations(admins, ({ one, many }) => ({
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -227,6 +227,9 @@ importers:
      '@radix-ui/react-tooltip':
        specifier: ^1.0.7
        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@stripe/stripe-js':
+        specifier: 4.8.0
+        version: 4.8.0
      '@tanstack/react-query':
        specifier: ^4.36.1
        version: 4.36.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3295,6 +3298,10 @@ packages:
    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
    engines: {node: '>=18'}

+  '@stripe/stripe-js@4.8.0':
+    resolution: {integrity: sha512-+4Cb0bVHlV4BJXxkJ3cCLSLuWxm3pXKtgcRacox146EuugjCzRRII5T5gUMgL4HpzrBLVwVxjKaZqntNWAXawQ==}
+    engines: {node: '>=12.16'}
+
  '@swagger-api/apidom-ast@1.0.0-alpha.9':
    resolution: {integrity: sha512-SAOQrFSFwgDiI4QSIPDwAIJEb4Za+8bu45sNojgV3RMtCz+n4Agw66iqGsDib5YSI/Cg1h4AKFovT3iWdfGWfw==}

@@ -10950,6 +10957,8 @@ snapshots:

  '@sindresorhus/merge-streams@2.3.0': {}

+  '@stripe/stripe-js@4.8.0': {}
+
  '@swagger-api/apidom-ast@1.0.0-alpha.9':
    dependencies:
      '@babel/runtime-corejs3': 7.25.7
@@ -13027,7 +13036,7 @@ snapshots:
      eslint: 8.45.0
      eslint-import-resolver-node: 0.3.9
      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
      eslint-plugin-jsx-a11y: 6.9.0(eslint@8.45.0)
      eslint-plugin-react: 7.35.0(eslint@8.45.0)
      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.45.0)
@@ -13051,7 +13060,7 @@ snapshots:
      enhanced-resolve: 5.17.1
      eslint: 8.45.0
      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
      fast-glob: 3.3.2
      get-tsconfig: 4.7.5
      is-core-module: 2.15.0
@@ -13073,7 +13082,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0):
    dependencies:
      array-includes: 3.1.8
      array.prototype.findlastindex: 1.2.5