How to handle a POST request with form-data to a Next.js page using the App router

Question

I'm struggling for over a week with a problem on a project that has a go-live next week. The project consists of a Next.js App using the App router. The issue is within the online payment flow.

The flow is:

1. Once the client decides to pay, I make an API call to the payment provider with the payment details and a callbackUrl.
2. I receive the API response from the payment provider with the payment id, the redirect URL for the payment page, and other details.
3. I successfully redirect the customer to the provider's payment page.
4. The customer fills in the card details and then he is redirected to the callback URL I've provided at step 1.

The issue is at step 4. The payment provider makes redirects the customer with a POST request to my callbackUrl that contains the payment result in the form-data.

As you might know, in Next.js you cannot access the request details on the client side. Additionally, if I define the page as server rendered. I get the below error:

TypeError: s is not a function
    at /Users/.../broker_app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:6390
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async t0 (/Users/.../broker_app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773)
    at async rh (/Users/.../broker_app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636)
    at async doRender (/Users/.../app/node_modules/next/dist/server/base-server.js:1391:30)
    at async cacheEntry.responseCache.get.routeKind (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:1552:28)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:1460:28)
    at async DevServer.renderPageComponent (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:1843:24)
    at async DevServer.renderToResponseImpl (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:1881:32)
    at async DevServer.pipeImpl (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:909:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/.../broker_app/node_modules/next/dist/server/next-server.js:266:17)
    at async DevServer.handleRequestImpl (/Users/.../broker_app/node_modules/next/dist/server/base-server.js:805:17) {
  page: '/payment_check'
}

This used to work fine when I was using the pages router in Next.js, because I was able to access the request object in the getServerSideProps function, see below.

export async function getServerSideProps({ req, res }) {
    try {
        await getBody(req, res);
        console.log(req.method, req.body);
        ...
        await savePayment(payment);
        ...
        }
        return {
            props: {
                payment
            }
        };

    }
    catch (error) {
        console.log(error);
        ...
    }

}

This is the only way the payment provider can return the payment status. How should I modify my flow or handle the redirect to be able this work?

Thanks in advance!

• I have tried intercepting the POST request in the middleware file, I was able to access the form-data and encode it in a header cookie, but I still get the same error when the request hits the page.
• I have tried making the page client side and use a server action that I call with useEffect, but I still get the same error.