loadStripe keeps giving me {type: "invalid_request_error", message: "Invalid API Key provided: undefined"} error

user_16385863 0
Viewed 430
import { loadStripe } from '@stripe/stripe-js';

const apiKey = `${process.env.REACT_STRIPE_PUBLIC_KEY}`;
const stripePromise = loadStripe(apiKey);

After the promise is fulfilled, _apiKey in the stripePromise object is undefined.

Have been stuck on this error for days. Anyone care to help.

Thanks and much appreciated

stripe-payments reactjs node.js javascript
2 Answers

process.env.REACT_STRIPE_PUBLIC_KEY is most likely empty. It's also unlikely to be available client-side, so likely needs to be rendered as part of the build process.

user_3795380

I finally figured this out guys. Apparently, .env variables in react had to be prefixed with REACT_APP_ then variable name.

Changing my variable name from REACT_STRIPE_PUBLIC_KEY to REACT_APP_STRIPE_PUBLIC_KEY fixed the bug. Thank you you for the insight much appreciated.

user_163858630
Related