title: API POST http://localhost:3000/[object%20Object]
body: <p>I am making the payment app with stripe. (base on the stripe <a href="https://github.com/tmarek-stripe/demo-react-stripe-js" rel="nofollow noreferrer">repo</a>)</p>
  <p>I made server.js with express.</p>
  <p>When I clicked the pay button is clicked, console shows <code>xhr.js:177 POST http://localhost:3000/[object%20Object] 404 (Not Found) </code>
  this error.</p>
  <p><a href="https://i.stack.imgur.com/C60dA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C60dA.jpg" alt="enter image description here" /></a></p>
  <pre><code>server.js
  const express = require('express');
  const cors = require('cors');
  const bodyParser = require('body-parser');
  const path = require('path');
  if (process.env.NODE_ENV !== 'production') require('dotenv').config();
  const stripe = require('stripe')(process.env.SECRET_KEY);
  
  const app = express();
  const port = process.env.PORT || 5000;
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  app.use(cors());
  
  if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, 'client/build')));
  
    app.get('*', function (req, res) {
      res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
    });
  }
  app.listen(port, error =&gt; {
    if (error) throw error;
    console.log('server running on port' + port);
  });
  
  app.post('/pay', async (req, res) =&gt; {
    if (req.method === 'POST') {
      try {
        const { amount } = req.body;
        const paymentIntent = await stripe.paymentIntents.create({
          amount,
          currency: 'usd',
        });
        res.status(200).send(paymentIntent.client_secret);
      } catch (err) {
        res.status(500).json({ statusCode: 500, message: err.message });
      }
    } else {
      res.setHeader('Allow', 'POST');
      res.status(405).end('Method Not Allowed');
    }
  });
  </code></pre>
  <p>this is the checkout form</p>
  <pre><code>Checkoutform.js
  import React, { useState } from 'react';
  import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
  import BillingDetailsFields from './BillingDetailForm';
  import axios from 'axios';
  import styled from 'styled-components';
  import payment_intents from './api/payment_intents';
  
  const CheckoutForm = ({ price, onSuccessfulCheckout }) =&gt; {
    const [isProcessing, setProcessingTo] = useState(false);
    const [checkoutError, setCheckoutError] = useState();
  
    const stripe = useStripe();
    const elements = useElements();
  
    const handleCardDetailsChange = ev =&gt; {
      ev.error ? setCheckoutError(ev.error.message) : setCheckoutError();
    };
    const handleFormSubmit = async e =&gt; {
      e.preventDefault();
      const billingDetails = {
        name: e.target.name.value,
        email: e.target.email.value,
        address: {
          city: e.target.city.value,
          line1: e.target.address.value,
          state: e.target.state.value,
          postal_code: e.target.zip.value,
        },
      };
  
      setProcessingTo(true);
  
      const cardElement = elements.getElement('card');
  
      try {
      const { data: clientSecret } = await axios.post(
        { payment_intents },
        {
          amount: price,
        }
      );
      console.log(clientSecret);
  
      const paymentMethodReq = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
        billing_details: billingDetails,
      });
  
      if (paymentMethodReq.error) {
        setCheckoutError(paymentMethodReq.error.message);
        setProcessingTo(false);
        return;
      }
  
      const { error } = await stripe.confirmCardPayment(clientSecret, {
        payment_method: paymentMethodReq.paymentMethod.id,
      });
  
      if (error) {
        setCheckoutError(error.message);
        setProcessingTo(false);
        return;
      }
  
      onSuccessfulCheckout();
      } catch (err) {
        setCheckoutError(err.message);
      }
    };
    const cardElementOpts = {
      hidePostalCode: true,
    };
    return (
      &lt;form onSubmit={handleFormSubmit}&gt;
        &lt;div&gt;
          &lt;CheckoutTitle&gt;Pay with&lt;/CheckoutTitle&gt;
          &lt;BillingDetailsFields /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;CardElementContainer&gt;
            &lt;CardElement
              option={cardElementOpts}
              onChange={handleCardDetailsChange}
            /&gt;
          &lt;/CardElementContainer&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;PayBtn disabled={isProcessing || !stripe}&gt;
            {isProcessing ? 'Processing...' : `Confirm and Pay`}
          &lt;/PayBtn&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  };
  
  
  </code></pre>
  <p>I think there is an issue with the app.post('/pay', async (req, res) =&gt; {}
  But I really don't know what is the problem.</p>