Dear community,

This IntegrationError is being returned. As shown in the console with the source from: ContinueToPayment.tsx.

What I've tried
I changed the variables in .env named STRIPE_SECRET_KEY with and without quotes (to be and not be a string);

I tried multiple ways of trying to load in STRIPE_SECRET_KEY. Below here are the 'ways' I've tried to load in STRIPE_SECRET_KEY.

1.1: const stripePromise = loadStripe(process.env.STRIPE_SECRET_KEY!);

1.2: const stripePromise = loadStripe(process.env.STRIPE_SECRET_KEY ?? ' ');

1.3: const stripePromise = loadStripe(process.env.STRIPE_SECRET_KEY);.

1.3.1: So 1.3 returns an error in the IDE, as shown below here.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345)

1.3.2: Understanding this return of the error. I am assuming it isn't reading/using a string but is already undefined from the start.

Please let me know if you've encountered this same problem. This is happening in Next.js - 13.4.9 and TypeScript - 5.0.4

Below here shown the top part of my code in ContinueToPayment.tsx, to see what is being imported, etc...

'use client';

import { buttonVariants } from './ui/Button';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(process.env.STRIPE_SECRET_KEY);
// const stripePromise = loadStripe(process.env.STRIPE_SECRET_KEY!);

export default function ContinueToPayment(req: Request, res: Response) {

Thanks in advance.

Best regards.

Paddy