I currently have a component implemented
import React, { useEffect } from "react";
import styles from "../styles/success.module.css";
import { useRouter } from "next/router";
import axios from "axios";
const Success = () => {
const {
query: { id },
} = useRouter();
useEffect(() => {
fetchId();
}, [id]);
const fetchId = () => {
axios
.put("api/getOrder", {
id,
})
.then((res) => {
if (res.status === 200) {
console.log(res.data.session);
}
})
.catch((err) => {
console.log(err);
});
};
return (
<div className={styles.success}>
<h1>Thank you for your purchase {id}</h1>
</div>
);
};
export default Success;
In this code snippet, I am making an API request once the ID is loaded
const stripe = require('stripe')(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);
export default async function handler(req, res) {
const session = await stripe.checkout.sessions.retrieve(`${req.body.id}`)
res.status(200).send({
nessage: '200',
session
});
res.status(500).send({
message: '500'
});
}
This is my backend setup and I dynamically assign an ID to the session variable. The issue arises when it initially appears as undefined, but ultimately fulfills the request.
The following represents the output displayed in my console:
error - StripeInvalidRequestError: No such checkout.session: undefined
at Function.generate (C:\Users\user\Desktop\zigi\my-app\node_modules\stripe\lib\Error.js:40:16)
...
[Additional Details can be accessed via the link provided above]
Please provide assistance on how to rectify this situation. Thank you.