utils/actions/stripe.ts is a file that holds my stripe checkout function and manageBilling (for cancelling subscription)

"use server";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SK!);

export default async function checkout(email:string, priceId:string, redirectTo:string) {
    return JSON.stringify(
        await stripe.checkout.sessions.create({
        success_url:redirectTo || process.env.SITE_URL,
        cancel_url: process.env.SITE_URL,
        customer_email: email,
        line_items:[{price:priceId, quantity:1}],
        mode: 'subscription'
    })
)
}

export async function manageBilling(customer_id:string){
    return JSON.stringify(await stripe.billingPortal.sessions.create({
        customer: customer_id,
        return_url: process.env.SITE_URL,
    }))
}

I then use it in my ProfileCard.tsx which I put in my /pricing route (a client component). The “Cancel your subscription” button calls the handleBilling function which uses manageBilling.

import useUser from "@/app/hook/useUser";
import { manageBilling } from "@/utils/actions/stripe";

export default function ProfileCard() {
    const{data:user, isLoading} = useUser();
    if(isLoading) return <></>


    const handleBilling = async () => {
        try {
            if (user?.subscriptions?.customer_id) {
                const data = JSON.parse(await manageBilling(user?.subscriptions?.customer_id));
                window.location.href = data.url;
            }
        } catch (error) {
            console.error("Billing error:", error);
            alert("An error occurred while managing your billing. Please try again later.");
        }
    };

    return(
     <div className="flex items-start card bg-base-100 border border-gray-600 shadow-2xl h-[350px] w-[500px] sm:max-md:w-[350px]">
        <p className="text-2xl font-semibold ml-48 sm:max-md:ml-32 mt-3 italic underline">User info</p>
        <div className="card-body mt-3">
            <div className="space-y-3">
                <p className="text-xl underline">Email: {user?.email}</p>
                {user?.subscriptions?.end_at? 
                    <>
                    <p className="text-xl font-semibold text-green-600">
                        User type: Active
                    </p>
                    <p className="text-lg">
                    Subscription end: {""}
                    {new Date(user?.subscriptions?.end_at).toDateString()}
                </p>
                </>
                :
                <>
                <p className="text-xl font-semibold text-gray-300">
                    User type: Inactive
                </p>
                <p className="text-lg">
                    Subscription end: Inactive
                </p>
                </>
                }
                <p className="text-lg">
                    Created at: {new Date(user?.created_at!).toDateString()}
                </p>
            </div>
            {user?.subscriptions?.customer_id &&
                <div className="mt-8 flex items-center justify-center ml-32"> 
                <button className="btn btn-error rounded-md" onClick={handleBilling}>Cancel your subscription</button>
                </div>
                }
         </div>
        </div>
    );
}

The problem is that whenever I click the “Cancel your subscription” button, I get the following error in the console:

Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

This only happens while deployed on vercel, it worked perfectly on localhost. Everything else stripe related works (checkouts), I don’t get why this doesn’t.

Vercel logs show literally no issue when pressing the button (shows the green code 200 saying ok).

As an absolute beginner trying my best at a full stack website, I am completely stuck, no idea what I can try to do to fix this. I have my STRIPE_SK in my .env.local, and checkouts work perfectly with that same key.