I am implementing Stripe in my project and getting this error on the browser: Failed prop type: The prop `stripeKey` is marked as required in `ReactStripeCheckout`, but its value is `undefined`.

I'm storing my publishable key in a .env file in the client folder: REACT_APP_STRIPE = pk_mykeykey

And in my component, I've assigned the key to KEY:

const KEY = process.env.REACT_APP_STRIPE

And here's my Stripe component:

             name="Lama Shop"
             image="https://avatars.githubusercontent.com/u/1486366?v=4"
             billingAddress
             shippingAddress
             description={`Your total is $${cart.total}`}
             amount={cart.total * 100}
             token={onToken}
             stripeKey={KEY}
            >
              
            <Button>CHECKOUT NOW</Button>
            </StripeCheckout>

I've console.logged the key, it returns undefined and the token also returns null.

CodePudding user response：

Try:

1. re-starting the node-server again. Environment variables are only handled once in a react-app's lifecycle, which is on startup of the react app server.
2. Make sure your .env file is located in the same root directory as your package.json file, and if you aren't using create-react-app, make sure its included in your build script.
3. If the above steps didn't resolve your issue, you shouldn't need dotenv when building a react app, but you can import as such:

    import * as dotenv from "dotenv"
    //insert your config file path here
    const configPath = "./path/to/.env"
    const configVariables = dotenv.config(configPath)
    const key = configVariables.REACT_APP_STRIPE
    console.log(key)