gistfile1.txt

xhr.js:251     POST https://fr-shop-production.up.railway.app/api/orders 500
dispatchXhrRequest @ xhr.js:251
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:146
httpMethod @ Axios.js:185
wrap @ bind.js:5
handlePayment @ Cart.jsx:37
await in handlePayment (async)
callCallback @ react-dom.development.js:4164
.
.
.


Another Error:
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code: 
"ERR_BAD_RESPONSE"
config: 
{transitional: {…}, adapter: 'xhr', transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message: 
"Request failed with status code 500"
name: 
"AxiosError"
request: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response: 
{data: {…}, status: 500, statusText: '', headers: AxiosHeaders, config: {…}, …}
stack: 
"AxiosError: Request failed with status code 500\n    at settle (http://localhost:3000/static/js/bundle.js:71977:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:70663:66)"
[[Prototype]]: 
Error



My Code:

import { loadStripe } from "@stripe/stripe-js";
import makeRequest from "../../makeRequest";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Cart.scss";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import { removeItem, resetCart } from "../../redux/cartReducer";

const Cart = () => {
  const products = useSelector((state) => state.cart.products);

  const dispatch = useDispatch();
   const [paymentError, setPaymentError] = useState(null);

  const totalPrice = () => {
    let total = 0;
    products.forEach((item) => {
      total += item.quantity * item.price;
    });
    return total.toFixed(2);
  };

  const stripePromise = loadStripe(
    "pk_test_51NgTlNLMYb3slf8ZwSq1g65zBPhFQNxRBiuufqgTcJ4f6fZOzCNslLnqhiaPPFuzzO11robVAFPg9W2rRRybdOrG00sloUrLGu"
  );

 
  const handlePayment = async () => {
    if (products.length <= 0) return;

    try {
      const stripe = await stripePromise;
      const res = await makeRequest.post("/orders", {
        products,
      });
      await stripe.redirectToCheckout({
        sessionId: res.data.stripeSession.id,
      });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="cart">
      <h1>Products in your cart</h1>
      {products?.map((item) => (
        <div className="item" key={item.id}>
          <img src={`${item.img}`} alt="clothe image" />
          <div className="details">
            <h1>{item.title}</h1>
            <p>{item.desc?.substring(0, 100)}</p>
            <div className="price">
              {item.quantity} x ${item.price}
            </div>
          </div>
          <DeleteOutlineOutlinedIcon
            className="delete"
            onClick={() => dispatch(removeItem(item.id))}
          />
        </div>
      ))}

      <div className="total">
        <span>SUBTOTAL</span>
        <span>${totalPrice()}</span>
      </div>
      <button onClick={handlePayment}>PROCEED TO CHECKOUT</button>
      {paymentError && <div className="error">{paymentError}</div>}
       <span className="reset" onClick={() => dispatch(resetCart())}>
        Reset Cart
      </span>
    </div>
  );
};

export default Cart;


makeRequest component:

import axios from "axios";

const makeRequest = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    Authorization: "bearer " + process.env.REACT_APP_API_TOKEN,
  },
});

export default makeRequest;