Stripe Checkout Flow

// Create a customer in Stripe
const createCustomerInStripe = async (uuid: string, email: string) => {
  const customerData = { metadata: { supabaseUUID: uuid }, email };
  const newCustomer = await stripe.customers.create(customerData);
  if (!newCustomer) throw new Error("Stripe customer creation failed.");
  return newCustomer.id;
};
 
// Upsert customer to Supabase
const upsertCustomerToSupabase = async (
  uuid: string,
  stripeCustomerId: string
) => {
  const { error } = await supabaseAdmin
    .from("customers")
    .upsert([{ id: uuid, stripe_customer_id: stripeCustomerId }]);
 
  if (error)
    throw new Error(`Supabase customer insert/update failed: ${error.message}`);
 
  return stripeCustomerId;
};
 
// Create or retrieve a Stripe customer
export const createOrRetrieveCustomer = async ({
  email,
  uuid,
}: {
  email: string;
  uuid: string;
}) => {
  // Check if customer exists in Supabase
  const { data: existingSupabaseCustomer, error: queryError } =
    await supabaseAdmin
      .from("customers")
      .select("*")
      .eq("id", uuid)
      .maybeSingle();
 
  if (queryError) {
    throw new Error(`Supabase customer lookup failed: ${queryError.message}`);
  }
 
  // Retrieve Stripe customer ID or check by email
  let stripeCustomerId: string | undefined;
  if (existingSupabaseCustomer?.stripe_customer_id) {
    const existingStripeCustomer = await stripe.customers.retrieve(
      existingSupabaseCustomer.stripe_customer_id
    );
    stripeCustomerId = existingStripeCustomer.id;
  } else {
    // Check if customer exists in Stripe by email
    const stripeCustomers = await stripe.customers.list({ email });
    stripeCustomerId =
      stripeCustomers.data.length > 0 ? stripeCustomers.data[0].id : undefined;
  }
 
  // Create customer if needed
  const stripeIdToInsert = stripeCustomerId
    ? stripeCustomerId
    : await createCustomerInStripe(uuid, email);
 
  // Sync to Supabase if needed
  if (existingSupabaseCustomer && stripeCustomerId) {
    if (existingSupabaseCustomer.stripe_customer_id !== stripeCustomerId) {
      await supabaseAdmin
        .from("customers")
        .update({ stripe_customer_id: stripeCustomerId })
        .eq("id", uuid);
    }
    return stripeCustomerId;
  } else {
    await upsertCustomerToSupabase(uuid, stripeIdToInsert);
    return stripeIdToInsert;
  }
};

"use server";
 
import { stripe } from "./config";
import { createSupabaseClient } from "@/utils/supabase/server";
import { createOrRetrieveCustomer } from "@/utils/supabase/admin";
 
function getURL(path: string = "") {
  let url =
    process.env.NEXT_PUBLIC_SITE_URL ??
    process.env.VERCEL_PROJECT_PRODUCTION_URL ??
    "http://localhost:3000";
 
  // Make sure to include https:// when not localhost
  url = url.startsWith("http") ? url : `https://${url}`;
  // Remove trailing slash
  url = url.endsWith("/") ? url.slice(0, -1) : url;
 
  return path ? `${url}${path}` : url;
}
 
export type CheckoutResponse = {
  url?: string;
  errorRedirect?: string;
};
 
export async function checkoutWithStripe(
  priceId: string,
  redirectPath: string = "/protected/subscription"
): Promise<CheckoutResponse> {
  try {
    const supabase = await createSupabaseClient();
    const {
      error,
      data: { user },
    } = await supabase.auth.getUser();
 
    if (error || !user) {
      throw new Error("Could not get user session.");
    }
 
    // Get or create Stripe customer
    let customer: string;
    try {
      customer = await createOrRetrieveCustomer({
        uuid: user.id,
        email: user.email || "",
      });
    } catch {
      throw new Error("Unable to access customer record.");
    }
 
    // Create checkout session
    const session = await stripe.checkout.sessions.create({
      billing_address_collection: "required",
      customer,
      customer_update: {
        address: "auto",
      },
      line_items: [
        {
          price: priceId,
          quantity: 1,
        },
      ],
      mode: "subscription",
      allow_promotion_codes: true,
      success_url: getURL(redirectPath),
      cancel_url: getURL("/protected/pricing"),
    });
 
    if (session.url) {
      return { url: session.url };
    } else {
      throw new Error("Unable to create checkout session.");
    }
  } catch (error) {
    if (error instanceof Error) {
      return {
        errorRedirect: `/protected/pricing?error=${encodeURIComponent(error.message)}`,
      };
    }
    return {
      errorRedirect: `/protected/pricing?error=Unknown error occurred`,
    };
  }
}

"use client";
 
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ProductWithPrices } from "@/utils/supabase/queries";
import { checkoutWithStripe } from "@/utils/stripe/server";
import { useState } from "react";
import { useRouter } from "next/navigation";
 
interface PricingCardProps {
  product: ProductWithPrices;
  isCurrentPlan: boolean;
}
 
export default function PricingCard({ product, isCurrentPlan }: PricingCardProps) {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
 
  function getCurrencySymbol(currency: string) {
    switch (currency?.toLowerCase()) {
      case "usd":
        return "$";
      case "eur":
        return "€";
      case "gbp":
        return "£";
      case "cad":
      case "aud":
        return "$";
      default:
        return currency?.toUpperCase() || "$";
    }
  }
 
  async function handleSelectPlan(priceId: string) {
    setIsLoading(true);
 
    try {
      const { url, errorRedirect } = await checkoutWithStripe(priceId);
 
      if (errorRedirect) {
        router.push(errorRedirect);
        return;
      }
 
      if (url) {
        window.location.assign(url);
      }
    } catch (error) {
      console.error("Checkout error:", error);
    } finally {
      setIsLoading(false);
    }
  }
 
  // Get the monthly price (or first available price)
  const price = product.prices?.find((p) => p.interval === "month") ||
    product.prices?.[0];
 
  if (!price) {
    return null;
  }
 
  const { name, description } = product;
  const symbol = getCurrencySymbol(price.currency);
  const priceString = price.unit_amount
    ? `${symbol}${(price.unit_amount / 100).toFixed(2)}`
    : "Custom";
 
  return (
    <Card className="p-6 space-y-4">
      <div className="space-y-2">
        <h3 className="text-xl font-medium">{name}</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-3xl font-bold">{priceString}</span>
          {price.interval && (
            <span className="text-muted-foreground">/{price.interval}</span>
          )}
        </div>
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
      </div>
 
      <Button
        className="w-full"
        onClick={() => handleSelectPlan(price.id)}
        disabled={isLoading || isCurrentPlan}
        variant={isCurrentPlan ? "secondary" : "default"}
      >
        {isLoading
          ? "Loading..."
          : isCurrentPlan
            ? "Current Plan"
            : "Select Plan"}
      </Button>
    </Card>
  );
}