Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/

Question

I am trying to create a stripe payment app using reactJS and expressJS, I am getting this error:

Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EPROTO)

In package.json file I have set proxy as -

"proxy": "https://localhost:5000"

In my react component I have -

const onToken = token => {
    axios({
      url: "payment",
      method: "post",
      data: {
        amount: priceForStripe,
        token: token
      }
    })
      .then(response => {
        alert("succesful payment");
      })
      .catch(error => {
        console.log("Payment Error: ", error);
        alert(
          "There was an issue with your payment! Please make sure you use the provided credit card."
        );
      });
  };

In my server.js I have -

const stripe = require("stripe")("sk_test_...");
app.post("/payment", (req, res) => {
  const body = {
    source: req.body.token.id,
    amount: req.body.amount,
    currency: "usd"
  };

  stripe.charges.create(body, (stripeErr, stripeRes) => {
    if (stripeErr) {
      res.status(500).send({ error: stripeErr });
    } else {
      res.status(200).send({ success: stripeRes });
    }
  });
});

whenever I submit any payment I hit error -

I tried all method linked here but can't solve that issue. I heartily thank if anyone explain any solution of that problem.

Answer 1

Since your backend works fine without stripe, the 500 error indicates that stripe is the problem.

This is related to the information you are sending in the body of the stripe charges.create request. I think you are missing the customer.id.

This post arjunphp.com/node-stripe-express-js shows the charges.create request as

{ amount, 
  description: "Sample Charge", 
    currency: "usd", 
    customer: customer.id 
}

Answer 2

As @CherryDT mentioned, first I set proxy to "proxy": "http://localhost:5000". Then I change my backend code as @Greg M suggested -

app.post("/payment", (req, res) => {
  stripe.customers
    .create({
      email: req.body.email, // customer email, which user need to enter while making payment
      source: req.body.token.id // token for the given card
    })
    .then(customer =>
      stripe.charges.create({
        // charge the customer
        amount: req.body.amount,
        description: "Sample Charge",
        currency: "usd",
        customer: customer.id
      })
    )
    .then(charge => res.status(200).send({ success: "success" }));
});

That's it. My payment method works perfectly.

Answer 3

I think the proxy error is a red herring. The real issue is the parsing on your server, causing the 500.

It looks like by default Axios encodes the json for you (but you should double check the request). To access JSON encoded request body data in Express, you need to use the body-parser middleware.

See this answer for an example: How do I consume the JSON POST data in an Express application

Answer 4

I'm taking the exact react course from Andre. My solution was to start the backend server.

So whoever gets into this issue from the same course either try the answer above or:

npm start

or

yarn start