title: Stripe publish key stored in .env can't be read by React
body: <p>I'm building an e-commerce site, the Cart page holds the checkout process's button.</p>
  <p>I created an <code>.env</code> file inside front-side folder, then pasted in my <strong>Publishable key</strong>:</p>
  <p><strong>.env</strong> code:</p>
  <pre><code>REACT_APP_STRIPE = pk_test_51LJh5TCx0CP76PWrc0hRSESvbF00x8voeXAS...
  </code></pre>
  <p><strong>Cart.jsx</strong> page code:</p>
  <pre><code>import StripeCheckout from &quot;react-stripe-checkout&quot;;
  
  const KEY = process.env.REACT_APP_STRIPE;
  //...
              &lt;StripeCheckout
                name=&quot;ShopTn&quot;
                image=&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWHNj9PK7N9WLGXRF5FDbA7XdtjH6caLiwnBW2__PWC3crRyS_XiocBVKnP9GONqvVp9A&quot;
                description={`Your total is ${cart.total} DT`}
                billingAddress
                shippingAddress
                amount={cart.taotal * 100}
                currency=&quot;TTD&quot;
                token={onToken}
                stripeKey={KEY}
              &gt;
                &lt;Button
                  style={{
                    border: &quot;none&quot;,
                    width: 120,
                    borderRadius: 5,
                    padding: &quot;20px&quot;,
                    backgroundColor: &quot;black&quot;,
                    color: &quot;white&quot;,
                    fontWeight: &quot;600&quot;,
                    cursor: &quot;pointer&quot;,
                  }}
                &gt;
                  CHECKOUT NOW
                &lt;/Button&gt;
              &lt;/StripeCheckout&gt;
  </code></pre>
  <p><strong>Warning errors i'm receiving:</strong></p>
  <p>I'm getting this error in console.dev:</p>
  <blockquote>
  <p>Warning: Failed prop type: The prop <code>stripeKey</code> is marked as required in <code>ReactStripeCheckout</code>, but its value is <code>undefined</code>.</p>
  </blockquote>
  <p>Edit (Please ignore this edit part):
  upon pressing CHECKOUT NOW <code>button</code>, i'm expecting to open stripe checkout interface directly, but i'm getting this JS alert saying:</p>
  <blockquote>
  <p>Stripe Checkout is missing the required <code>key</code> parameter. Please contact the website owner or support@stripe.com.</p>
  </blockquote>
  <p>Edit:</p>
  <p>I tried put my publishable key in JSX (like this code below) and it works fine:</p>
  <pre><code>const KEY = &quot;pk_test_51LJh5TCx0CP76PWrc0hRSESuLLs9TSjpI7bUnDdgu4r0w&quot;;
  </code></pre>