Hi,
I'm trying to integrate Stripe Elements into my Next.js application. Everything works fine in development, but in production, the payment form does not render properly. I suspect it's due to Content Security Policy (CSP) issues.

Stripe packages I'm using:
@stripe/react-stripe-js v3.7.0
@stripe/stripe-js v7.3.0

import type Stripe from "stripe";
import { PaymentMethodFormWrapper } from "../../../../components/payment/payment-form";
import prisma from "../../../../lib/prisma";
import { verifySession } from "../../../../lib/session";
import { stripe } from "../../../../lib/stripe";

const PaymentPage = async () => {
    const session = await verifySession();

    const subscription = await prisma.subscription.findFirst({
        where: { userId: session.user.id },
        select: { stripeCustomerId: true },
    });

    const setupIntent = await stripe.setupIntents.create({
        customer: subscription?.stripeCustomerId,
        payment_method_types: ["card"],
    });

    return <PaymentMethodFormWrapper clientSecret={setupIntent.client_secret} />;
};

export default PaymentPage;

"use client";

import { Elements, PaymentElement } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

export const stripePromise = loadStripe(
    String(process.env.NEXT_PUBLIC_STRIPE_KEY),
);

export const PaymentMethodFormWrapper = ({
    clientSecret,
}: { clientSecret: string | null }) => {
    if (clientSecret === null) {
        return <div>No Client Secret</div>;
    }

    return (
        <Elements stripe={stripePromise} options={{ clientSecret }}>
            <PaymentMethodForm />
        </Elements>
    );
};

const PaymentMethodForm = () => {
    return <PaymentElement />;
};

In production, Stripe Elements do not load properly, and I get several CSP-related errors in the browser console