title: Stripe - Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment
body: <p><strong>Console Error message:</strong> <code>v3:1 Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}_secret_${secret}. You specified: .</code></p>
  <p><strong>You can see the error yourself here:</strong> <a href="https://stormy-forest-38471.herokuapp.com/" rel="nofollow noreferrer">https://stormy-forest-38471.herokuapp.com/</a></p>
  <p><strong>Instructions to get error:</strong> From the main page, click on <code>Menú Diari</code> -&gt; <code>Demanar</code> -&gt; Any of the first 3 buttons -&gt; Select one radio button from each category and then click on <code>Afegeix i paga</code> -&gt; <code>Pagar</code> -&gt; 1st input: 'Random Name', 2nd input: 'Recollida a tenda - Cabrera de Mar', 4th input: '123'...</p>
  <p>Then, according to Stripe documentation, you could fill the payment element with the following data in order to achieve a successfull test payment.</p>
  <p><strong>Visa Number:</strong> '4242 4242 4242 4242'</p>
  <p><strong>MM/AA:</strong> '04/24'</p>
  <p><strong>CVC:</strong> '123'</p>
  <p>Once you press <code>Pagar</code>, you will get the <code>IntegrationError</code> I'm asking for in the console.</p>
  <p>I am trying to deploy a <strong>React.js + Node.js + Express</strong> web using Heroku.</p>
  <p>I have been following this guide, although I am not sure if that's what I need.
  <a href="https://blog.heroku.com/deploying-react-with-zero-configuration" rel="nofollow noreferrer">https://blog.heroku.com/deploying-react-with-zero-configuration</a></p>
  <p>The web is for a restaurant. They want to sell different lunch plans. I am trying to implement the payment using <strong>Stripe</strong>. When I test the app in my localhost, everything works fine. However, when I try to deploy it, something breaks.</p>
  <p>I guess something must be wrong with my <code>server.js</code> or <code>package.json</code> files... The main problem being that I am a complete noob at Back End...</p>
  <p>Everything works as expected (I still have some console logs here and there for development), until I start making requests to the server.</p>
  <p>This is my <strong>server.js</strong></p>
  <pre><code>const { createServer } = require('https');
  const express = require('express');
  const compression = require('compression');
  const morgan = require('morgan');
  const path = require('path');
  
  const normalizePort = (port) =&gt; parseInt(port, 10);
  const PORT = normalizePort(process.env.PORT || 5000);
  
  const app = express();
  const dev = app.get('env') !== 'production';
  
  if (!dev) {
      app.disable('x-powered-by');
      app.use(compression()); // &quot;Will handle a few things for us... (?)&quot;
      app.use(morgan('common'));
  
      app.use(express.static(path.join(__dirname, 'build')));
  
      app.get('*', (req, res) =&gt; {
          res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
      });
  }
  
  const server = createServer(app);
  
  const { resolve } = require('path');
  
  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
  
  app.use(express.json());
  
  const calculateOrderAmount = (items) =&gt; {
      console.log(items);
      let drinksTotal = 0;
      const { water, cola, colaZero, beer, lemonFanta, orangeFanta } = items.drinks;
      drinksTotal += water * 100;
      drinksTotal += (cola + colaZero + lemonFanta + orangeFanta) * 130;
      drinksTotal += beer * 150;
  
      let foodTotal = 0;
      foodTotal += items.primerSegonCount * 895;
      foodTotal += items.dosPrimersCount * 795;
      foodTotal += items.platPostresCount * 695;
  
      grandTotal = parseInt(drinksTotal + foodTotal);
  
      console.log(grandTotal);
  
      return grandTotal;
  };
  
  app.post('/create-payment-intent', async(req, res) =&gt; {
      const { items } = req.body;
      console.log(items);
      // Create a PaymentIntent with the order amount and currency
      const paymentIntent = await stripe.paymentIntents.create({
          amount: calculateOrderAmount(items),
          currency: 'eur'
      });
      res.send({
          clientSecret: '123_secret_123' //paymentIntent.client_secret
      });
  });
  
  app.get('/', function(req, res) {
      res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  
  server.listen(PORT, (err) =&gt; {
      if (err) throw err;
  
      console.log('Server started on port ' + PORT);
  });
  </code></pre>
  <p>This is my package.json</p>
  <pre><code>{
      &quot;name&quot;: &quot;my-app&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;engine&quot;: {
          &quot;node&quot;: &quot;12.16.3&quot;,
          &quot;npm&quot;: &quot;6.14.5&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@stripe/react-stripe-js&quot;: &quot;^1.1.2&quot;,
          &quot;@stripe/stripe-js&quot;: &quot;^1.7.0&quot;,
          &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
          &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
          &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
          &quot;axios&quot;: &quot;^0.19.2&quot;,
          &quot;boostrap&quot;: &quot;^2.0.0&quot;,
          &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
          &quot;compression&quot;: &quot;^1.7.4&quot;,
          &quot;concurrently&quot;: &quot;^5.2.0&quot;,
          &quot;cors&quot;: &quot;^2.8.5&quot;,
          &quot;dotenv&quot;: &quot;^8.2.0&quot;,
          &quot;emailjs-com&quot;: &quot;^2.4.1&quot;,
          &quot;express&quot;: &quot;^4.17.1&quot;,
          &quot;morgan&quot;: &quot;^1.10.0&quot;,
          &quot;node-sass&quot;: &quot;^4.14.1&quot;,
          &quot;nodemon&quot;: &quot;^2.0.4&quot;,
          &quot;react&quot;: &quot;^16.13.1&quot;,
          &quot;react-bootstrap&quot;: &quot;^1.0.1&quot;,
          &quot;react-dom&quot;: &quot;^16.13.1&quot;,
          &quot;react-redux&quot;: &quot;^7.2.0&quot;,
          &quot;react-scripts&quot;: &quot;3.4.1&quot;,
          &quot;react-scroll&quot;: &quot;^1.7.16&quot;,
          &quot;react-stripe-checkout&quot;: &quot;^2.6.3&quot;,
          &quot;reactstrap&quot;: &quot;^8.5.1&quot;,
          &quot;stripe&quot;: &quot;^8.67.0&quot;,
          &quot;uuid&quot;: &quot;^8.2.0&quot;,
          &quot;uuidv4&quot;: &quot;^6.1.1&quot;
      },
      &quot;scripts&quot;: {
          &quot;start&quot;: &quot;react-scripts start&quot;,
          &quot;start-dev&quot;: &quot;nodemon server.js&quot;,
          &quot;build&quot;: &quot;react-scripts build&quot;,
          &quot;test&quot;: &quot;react-scripts test&quot;,
          &quot;eject&quot;: &quot;react-scripts eject&quot;,
          &quot;dev&quot;: &quot;concurrently \&quot;npm run-script start-dev\&quot; \&quot;npm run-script start\&quot;&quot;,
          &quot;heroku-postbuild&quot;: &quot;npm install &amp;&amp; npm run build&quot;
      },
      &quot;eslintConfig&quot;: {
          &quot;extends&quot;: &quot;react-app&quot;
      },
      &quot;browserslist&quot;: {
          &quot;production&quot;: [&quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot;],
          &quot;development&quot;: [&quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot;]
      },
      &quot;homepage&quot;: &quot;.&quot;
  }
  </code></pre>
  <p>This is the <strong>React.js file in charge of the payment</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
  
  // Bootstrap
  import { Container, Row, Col, Button, Spinner, Form } from 'react-bootstrap';
  
  export default function CheckoutForm(props) {
      const [ succeeded, setSucceeded ] = useState(false);
      const [ error, setError ] = useState(null);
      const [ processing, setProcessing ] = useState(false);
      const [ disabled, setDisabled ] = useState(true);
      const [ clientSecret, setClientSecret ] = useState('');
      const stripe = useStripe();
      const elements = useElements();
      useEffect(() =&gt; {
          console.log('inside use Effect');
          // Create PaymentIntent as soon as the page loads
          window
              .fetch('/create-payment-intent', {
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({
                      items: {
                          drinks: props.drinksOrdered,
                          primerSegonCount: props.primerSegonCount,
                          dosPrimersCount: props.dosPrimersCount,
                          platPostresCount: props.platPostresCount
                      }
                  })
              })
              .then((res) =&gt; {
                  console.log(res);
                  return res.json();
              })
              .then((data) =&gt; {
                  console.log(data.clientSecret);
                  console.log(data);
                  setClientSecret(data.clientSecret);
              });
      }, []);
  
      const cardStyle = {
          base: {
              backgroundColor: 'white',
              color: 'grey',
              fontFamily: 'Montserrat, sans-serif',
              fontSmoothing: 'antialiased',
              fontSize: '16px',
              '::placeholder': {
                  color: '#c6c6c6'
              }
          },
          invalid: {
              color: '#fa755a',
              iconColor: '#fa755a'
          },
          complete: {
              color: 'green',
              iconColor: 'green'
          }
      };
  
      const handleCardChange = async (event) =&gt; {
          // Listen for changes in the CardElement
          // and display any errors as the customer types their card details
          setDisabled(event.empty);
          setError(event.error ? event.error.message : '');
      };
  
      const handleSubmit = async (ev) =&gt; {
          ev.preventDefault();
          setProcessing(true);
          const payload = await stripe.confirmCardPayment(clientSecret, {
              payment_method: {
                  card: elements.getElement(CardElement),
                  billing_details: {
                      name: ev.target.name.value
                  }
              }
          });
  
          // Handle Error
          if (payload.error) {
              setError(`Payment failed ${payload.error.message}`);
              setProcessing(false);
          } else if (payload.paymentIntent.status === 'succeeded') {
              // If payment succeeded, send eMail with details
              props.sendEmail();
              setSucceeded(true);
              setError(null);
              setTimeout(() =&gt; {
                  window.location.replace('https://www.cateringroser.cat');
              }, 10000);
          }
      };
  </code></pre>
  <p>Thank you so much in advance.</p>
  <p>Gerard</p>