Add Stripe checkout for Growth plan subscription

Author: jnsdls

apps/dashboard/.env.example

@@ -64,3 +64,5 @@ ANALYTICS_SERVICE_URL=""
 
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""
+GROWTH_PLAN_SKU=""
+PAYMENT_METHOD_CONFIGURATION=""

apps/dashboard/package.json

@@ -21,6 +21,8 @@
     "@radix-ui/react-tooltip": "1.2.7",
     "@sentry/nextjs": "9.34.0",
     "@shazow/whatsabi": "0.22.2",
+    "@stripe/react-stripe-js": "4.0.2",
+    "@stripe/stripe-js": "7.9.0",
     "@tanstack/react-query": "5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "@thirdweb-dev/api": "workspace:*",

apps/dashboard/src/@/actions/stripe-actions.ts

@@ -1,8 +1,13 @@
 import "server-only";
 
+import { headers } from "next/headers";
 import Stripe from "stripe";
 import type { Team } from "@/api/team/get-team";
-import { STRIPE_SECRET_KEY } from "@/constants/server-envs";
+import {
+  GROWTH_PLAN_SKU,
+  PAYMENT_METHOD_CONFIGURATION,
+  STRIPE_SECRET_KEY,
+} from "@/constants/server-envs";
 
 let existingStripe: Stripe | undefined;
 
@@ -72,3 +77,59 @@ export async function getStripeBalance(customerId: string) {
   // Stripe returns a positive balance for credits, so we need to divide by -100 to get the actual balance (as long as the balance is not 0)
   return customer.balance === 0 ? 0 : customer.balance / -100;
 }
+
+export async function fetchClientSecret(team: Team) {
+  "use server";
+  const origin = (await headers()).get("origin");
+  const stripe = getStripe();
+  const customerId = team.stripeCustomerId;
+
+  if (!customerId) {
+    throw new Error("No customer ID found");
+  }
+
+  // Create Checkout Sessions from body params.
+  const session = await stripe.checkout.sessions.create({
+    ui_mode: "embedded",
+    line_items: [
+      {
+        // Provide the exact Price ID (for example, price_1234) of
+        // the product you want to sell
+        price: GROWTH_PLAN_SKU,
+        quantity: 1,
+      },
+    ],
+    mode: "subscription",
+
+    return_url: `${origin}/get-started/team/${team.slug}/select-plan?session_id={CHECKOUT_SESSION_ID}`,
+    automatic_tax: { enabled: true },
+    allow_promotion_codes: true,
+    customer: customerId,
+    customer_update: {
+      address: "auto",
+    },
+    payment_method_collection: "always",
+    payment_method_configuration: PAYMENT_METHOD_CONFIGURATION,
+    subscription_data: {
+      trial_period_days: 14,
+      trial_settings: {
+        end_behavior: {
+          missing_payment_method: "cancel",
+        },
+      },
+    },
+  });
+
+  if (!session.client_secret) {
+    throw new Error("No client secret found");
+  }
+
+  return session.client_secret;
+}
+
+export async function getStripeSessionById(sessionId: string) {
+  const session = await getStripe().checkout.sessions.retrieve(sessionId, {
+    expand: ["line_items", "payment_intent"],
+  });
+  return session;
+}

apps/dashboard/src/@/analytics/report.ts

@@ -161,6 +161,18 @@ export function reportOnboardingMembersUpsellPlanSelected(properties: {
   posthog.capture("onboarding members upsell plan selected", properties);
 }
 
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of teams that completed the team member step during onboarding
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportTeamMemberStepCompleted() {
+  posthog.capture("onboarding members completed");
+}
+
 /**
  * ### Why do we need to report this event?
  * - To track the number of teams that completed onboarding

apps/dashboard/src/@/components/project/create-project-modal/index.tsx

@@ -160,7 +160,7 @@ const createProjectFormSchema = z.object({
 
 type CreateProjectFormSchema = z.infer<typeof createProjectFormSchema>;
 
-function CreateProjectForm(props: {
+export function CreateProjectForm(props: {
   createProject: (param: Partial<Project>) => Promise<{
     project: Project;
     secret: string;
@@ -419,7 +419,7 @@ function DomainsAlert(props: {
   );
 }
 
-function CreatedProjectDetails(props: {
+export function CreatedProjectDetails(props: {
   project: Project;
   secret: string;
   onComplete: () => void;

apps/dashboard/src/@/constants/server-envs.ts

@@ -91,3 +91,24 @@ if (REDIS_URL) {
     REDIS_URL,
   );
 }
+
+export const GROWTH_PLAN_SKU = process.env.GROWTH_PLAN_SKU || "";
+
+if (GROWTH_PLAN_SKU) {
+  experimental_taintUniqueValue(
+    "Do not pass GROWTH_PLAN_SKU to the client",
+    process,
+    GROWTH_PLAN_SKU,
+  );
+}
+
+export const PAYMENT_METHOD_CONFIGURATION =
+  process.env.PAYMENT_METHOD_CONFIGURATION || "";
+
+if (PAYMENT_METHOD_CONFIGURATION) {
+  experimental_taintUniqueValue(
+    "Do not pass PAYMENT_METHOD_CONFIGURATION to the client",
+    process,
+    PAYMENT_METHOD_CONFIGURATION,
+  );
+}