Question 241606 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Node.js receive form data sent from frontend

node.js server

app.post('/create-checkout-session', (req,res) =>{
  console.log(req.form);
  console.log(req.body);
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: "price_id",
        quantity: 1,
      },
    ],
    metadata: {
      id: 1,
      email: "soubhagya",
    },
    mode: "payment",
    success_url: `https://www.youtube.com/?success=true`,
    cancel_url: `https://www.youtube.com/?canceled=true`,
  });

  res.redirect(303, session.url);
})

React frontend

      <form
          action="http://localhost:4000/create-checkout-session"
          method="POST"
        >
          <input
            type="text"
            name="user"
            value={"hellowowowowowo"}
            disabled
          />
          <button
            type="submit"
            className="w-32 text-white bg-primary-purple hover:bg-primary-700 font-medium rounded-sm text-sm p-4 xs:w-full"
          >
            GET STARTED
          </button>
        </form>

Here is my code where i am sending some data to baackend. but,In backend i am not getting any data.
How can i receive form data in backend ?

Please take a loook

Tags:

2

Answers


  1. 0
    • Did you set JSON parse on app.js?
    • Did you correct API endpoint? It seems you did not miss the api/payment.
      I think you defined routes.js or something file as a pre-url.
      Please make sure.
    • check your browser console and network to confirm the requirements with data to the back end.
    Login or Signup to reply.
  2. 0

    Your backend looks fine, but instead of using forms actions to send request, why not use the onSubmit event. It should look something like that:

    <form onSubmit={() => fetch('http://localhost:4000/create-checkout-session'), {method: 'POST'}}>
          <input
            type="text"
            name="user"
            value={"hellowowowowowo"}
            disabled
          />
          <button
            type="submit"
            className="w-32 text-white bg-primary-purple hover:bg-primary-700 font-medium rounded-sm text-sm p-4 xs:w-full"
          >
            GET STARTED
          </button>
        </form>

    I used the fetch method in my example, but you can use any library that you want (Axios for example).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search