Fix bug where Payments page would send too many requests to Stripe

This commit is contained in:
Konstantin Wohlwend 2025-10-24 14:16:42 -07:00
parent 5f8cb0239d
commit b3f3c61ca4

View File

@ -1,37 +1,40 @@
"use client";
import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
import { getPublicEnvVar } from "@/lib/env";
import { StackAdminApp } from "@stackframe/stack";
import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
import { loadConnectAndInitialize } from "@stripe/connect-js";
import {
ConnectComponentsProvider,
} from "@stripe/react-connect-js";
import { useTheme } from "next-themes";
import { useEffect, useMemo } from "react";
import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
import { getPublicEnvVar } from "@/lib/env";
import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
import { useEffect } from "react";
import { appearanceVariablesForTheme } from "./stripe-theme-variables";
type StripeConnectProviderProps = {
children: React.ReactNode,
};
const stripeConnectInstances = new Map<string, ReturnType<typeof loadConnectAndInitialize>>();
export function getStripeConnectInstance(adminApp: StackAdminApp) {
if (!stripeConnectInstances.has(adminApp.projectId)) {
stripeConnectInstances.set(adminApp.projectId, loadConnectAndInitialize({
publishableKey: getPublicEnvVar("NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY") ?? throwErr("No Stripe publishable key found"),
fetchClientSecret: async () => {
const { client_secret } = await adminApp.createStripeWidgetAccountSession();
return client_secret;
},
}));
}
return stripeConnectInstances.get(adminApp.projectId)!;
}
export function StripeConnectProvider({ children }: StripeConnectProviderProps) {
const adminApp = useAdminApp();
const { resolvedTheme } = useTheme();
const stripeConnectInstance = useMemo(() => {
const publishableKey = getPublicEnvVar("NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY") ?? throwErr("No Stripe publishable key found");
const fetchClientSecret = async () => {
const { client_secret } = await adminApp.createStripeWidgetAccountSession();
return client_secret;
};
return loadConnectAndInitialize({
publishableKey,
fetchClientSecret,
appearance: { overlays: 'dialog' },
});
}, [adminApp]);
const stripeConnectInstance = getStripeConnectInstance(adminApp);
useEffect(() => {
stripeConnectInstance.update({