when i make a stripe payment then i get internal server error
stipe version is 12.9.0,
this my backend code
const ErrorHander = require("../utils/errorhander");
const cachasycError = require("../middleware/cachasycError");
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
//prosees payment
exports.paymentProcess = cachasycError(async (req, res, next) => {
const paymentIntent = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: "usd",
payment_method_types: ["card"],
metadata: {
company: "Ecommerce",
},
});
res.status(200).json({
success: true,
client_secret: paymentIntent.client_secret,
});
});
//sent public key
exports.publicstripeapikey = cachasycError(async (req, res, next) => {
res.status(200).json({
success: true,
stripeapikey: process.env.STRIPE_API_KEY,
});
});
this my frontend code
const ErrorHander = require("../utils/errorhander");
const cachasycError = require("../middleware/cachasycError");
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
//prosees payment
exports.paymentProcess = cachasycError(async (req, res, next) => {
const paymentIntent = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: "usd",
payment_method_types: ["card"],
metadata: {
company: "Ecommerce",
},
});
res.status(200).json({
success: true,
client_secret: paymentIntent.client_secret,
});
});
//sent public key
exports.publicstripeapikey = cachasycError(async (req, res, next) => {
res.status(200).json({
success: true,
stripeapikey: process.env.STRIPE_API_KEY,
});
});
this is my fond end code
import React, { Fragment, useEffect, useRef } from "react";
import CheckoutSteps from "../cart/CheckoutSteps";
import { useSelector, useDispatch } from "react-redux";
import MetaData from "../layout/Header/Metadata";
import Typography from "@mui/material/Typography";
import { ToastContainer, toast } from "react-toastify";
import {
CardNumberElement,
CardCvcElement,
CardExpiryElement,
useStripe,
useElements,
} from "@stripe/react-stripe-js";
import axios from "axios";
import "./payment.css";
import CreditCardIcon from "@mui/icons-material/CreditCard";
import EventIcon from "@mui/icons-material/Event";
import VpnKeyIcon from "@mui/icons-material/VpnKey";
import { useNavigate } from "react-router-dom";
// import { createOrder, clearErrors } from "../../actions/orderAction";
const Payment = () => {
const history = useNavigate();
const orderInfo = JSON.parse(sessionStorage.getItem("orderInfo"));
// const dispatch = useDispatch();
const stripe = useStripe();
const elements = useElements();
const payBtn = useRef(null);
const { shippingInfo, cartItems } = useSelector((state) => state.cart);
const { user } = useSelector((state) => state.user);
// const { error } = useSelector((state) => state.newOrder);
const paymentData = {
amount: Math.round(orderInfo.totalPrice * 100),
};
const order = {
shippingInfo,
orderItems: cartItems,
itemsPrice: orderInfo.subtotal,
taxPrice: orderInfo.tax,
shippingPrice: orderInfo.shippingCharges,
totalPrice: orderInfo.totalPrice,
};
const submitHandler = async (e) => {
e.preventDefault();
payBtn.current.disabled = true;
try {
const config = {
headers: {
"Content-Type": "application/json",
},
};
const { data } = await axios.post(
"/api/v1/payment/process",
paymentData,
config
);
const client_secret = data.client_secret;
if (!stripe || !elements) return;
const result = await stripe.confirmCardPayment(client_secret, {
payment_method: {
card: elements.getElement(CardNumberElement),
billing_details: {
name: user.name,
email: user.email,
address: {
line1: shippingInfo.address,
city: shippingInfo.city,
state: shippingInfo.state,
postal_code: shippingInfo.pinCode,
country: shippingInfo.country,
},
},
},
});
if (result.error) {
payBtn.current.disabled = false;
toast(result.error.message);
} else {
if (result.paymentIntent.status === "succeeded") {
order.paymentInfo = {
id: result.paymentIntent.id,
status: result.paymentIntent.status,
};
console.log("order");
console.log(order);
// dispatch(createOrder(order));
history("/success");
} else {
alert.error("There's some issue while processing payment ");
}
}
} catch (error) {
payBtn.current.disabled = false;
// alert.error(error.response.data.message);
}
};
useEffect(() => {
// if (error) {
// alert.error(error);
// dispatch(clearErrors());
// }
}, [alert]);
return (
<Fragment>
<ToastContainer />
<MetaData title="Payment" />
<CheckoutSteps activeStep={2} />
<div className="paymentContainer">
<form className="paymentForm" onSubmit={(e) => submitHandler(e)}>
<Typography>Card Info</Typography>
<div>
<CreditCardIcon />
<CardNumberElement className="paymentInput" />
</div>
<div>
<EventIcon />
<CardExpiryElement className="paymentInput" />
</div>
<div>
<VpnKeyIcon />
<CardCvcElement className="paymentInput" />
</div>
<input
type="submit"
value={`Pay - ₹${orderInfo && orderInfo.totalPrice}`}
ref={payBtn}
className="paymentFormBtn"
/>
</form>
</div>
</Fragment>
);
};
export default Payment;
Bro i got the same error it client_secret is undefined