jojilede

[stable lotus]

that's prod

this is local:

this is stripe elements btw

code:

const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(`${process.env.NEXT_PUBLIC_STRIPE_PUB_KEY}`, {
      apiVersion: "2022-11-15",
    });
  }

  return stripePromise;
};

export default function CustomerPaymentsPage() {
  const stripePromise = getStripe();
  const {loggedUserData, refetchLoggedUser} = useAppContext();

  if (!loggedUserData) {
    return (
      <Layout>
        <Spinner />
      </Layout>
    );
  }

  if (!loggedUserData?.GetLoggedUser?.UserProfile?.StripeCustomerId) {
    return <ActivateCustomerPayments refetchLoggedUser={refetchLoggedUser} />;
  }

  return (
    <CheckoutContextProvider>
      <CustomerPayments stripePromise={stripePromise} />
    </CheckoutContextProvider>
  );
}```

[cloud robin]

Hi there! Any chance you can log the value of process.env.NEXT_PUBLIC_STRIPE_PUB_KEY to make sure it's being set correctly?

You could also try hard coding your publishable key just to test it out

[stable lotus]

can the public key be permanently exposed like that?

I think so right

bc it shows up on the network requests anyway?

[cloud robin]

It can be visible, yep

[stable lotus]

nice

I should be able to take it from here

[cloud robin]

Still, using an environment variable makes sense so I recommend double checking that the value is being set correctly