I have a component
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(() => {
getId();
}, [id]);
const getId = () => {
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;
As you may see I am making request to my API once 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 and I'm passing an id into session variable dynamically. The problem is that it is undefined, but then it completes the request.
This is 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)
at res.toJSON.then.StripeAPIError.message (C:\Users\user\Desktop\zigi\my-app\node_modules\stripe\lib\StripeResource.js:238:35)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
type: 'StripeInvalidRequestError',
raw: {
code: 'resource_missing',
doc_url: 'https://stripe.com/docs/error-codes/resource-missing',
message: 'No such checkout.session: undefined',
request_log_url: 'https://dashboard.stripe.com/test/logs/req_ZrNElSd58VVHSA?t=1666409724',
type: 'invalid_request_error',
headers: {
server: 'nginx',
date: 'Sat, 22 Oct 2022 03:35:24 GMT',
'content-type': 'application/json',
'content-length': '311',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS, DELETE',
'access-control-allow-origin': '*',
'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
'access-control-max-age': '300',
'cache-control': 'no-cache, no-store',
'request-id': 'req_ZrNElSd58VVHSA',
'stripe-version': '2022-08-01',
'strict-transport-security': 'max-age=63072000; includeSubDomains; preload'
},
statusCode: 404,
requestId: 'req_ZrNElSd58VVHSA'
},
rawType: 'invalid_request_error',
code: 'resource_missing',
doc_url: 'https://stripe.com/docs/error-codes/resource-missing',
param: undefined,
detail: undefined,
headers: {
server: 'nginx',
date: 'Sat, 22 Oct 2022 03:35:24 GMT',
'content-type': 'application/json',
'content-length': '311',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS, DELETE',
'access-control-allow-origin': '*',
'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
'access-control-max-age': '300',
'cache-control': 'no-cache, no-store',
'request-id': 'req_ZrNElSd58VVHSA',
'stripe-version': '2022-08-01',
'strict-transport-security': 'max-age=63072000; includeSubDomains; preload'
},
requestId: 'req_ZrNElSd58VVHSA',
statusCode: 404,
charge: undefined,
decline_code: undefined,
payment_intent: undefined,
payment_method: undefined,
payment_method_type: undefined,
setup_intent: undefined,
source: undefined,
page: '/api/getOrder'
}
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:372:5)
at ServerResponse.setHeader (node:_http_outgoing:576:11)
at Object.sendEtagResponse (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\send-payload\index.js:29:13)
at sendData (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\api-utils\node.js:172:27)
at ServerResponse.apiRes.send (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\api-utils\node.js:349:31)
at handler (webpack-internal:///(api)/./pages/api/getOrder.js:12:21)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.apiResolver (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\api-utils\node.js:366:9)
at async DevServer.runApi (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\next-server.js:481:9)
at async Object.fn (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\next-server.js:735:37) {
code: 'ERR_HTTP_HEADERS_SENT',
page: '/api/getOrder'
}
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:372:5)
at ServerResponse.setHeader (node:_http_outgoing:576:11)
at NodeNextResponse.setHeader (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\base-http\node.js:61:19)
at DevServer.renderError (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\base-server.js:1012:17)
at DevServer.renderError (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\next-server.js:843:22)
at DevServer.run (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\dev\next-dev-server.js:715:35)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DevServer.handleRequest (C:\Users\user\Desktop\zigi\my-app\node_modules\next\dist\server\base-server.js:285:20) {
code: 'ERR_HTTP_HEADERS_SENT'
This is my console - https://i.stack.imgur.com/UqEak.png
What am I doing wrong?
