Next.js Payment Form Fix

My e-commerce site is built with Next.js, and the checkout flow is stuck at the very last step—payment forms refuse to submit. Everything else renders fine, so I’m sure the problem is isolated to the form logic, API route, or the way the payment gateway SDK is wired in.

Here’s what I need from you: investigate the current Next.js codebase, trace why the payment form never reaches the server, and then implement a clean fix. Whether the issue sits in client-side validation, a stale fetch call, or a misconfigured API route, the final result must be a checkout form that submits, returns the expected success response, and displays errors gracefully when something goes wrong.

Acceptance criteria
• “Pay” button triggers the correct POST request and receives a 2xx from the server or gateway.
• Validation errors show inline without reloading the page.
• No console errors in production mode.
• Solution follows Next.js best practices (API routes or server actions as appropriate) and is fully typed with TypeScript if new code is added.

I’ll give you repo access, test credentials for the gateway, and staging environment details the moment we start. Let me know if you’ve fixed similar payment-flow bugs before and roughly how long you’ll need once you see the code.