Next.js 14 | Phone Pe Payment Gateway Integration | Bad Request | Too Many Request - 429 | 404 Errors Resolved.

Posted on May 28, 2024
phone pe
By MmantraTech
499 Views

Before going to check this article, Please go through my youtube video for step by step integration of Phone pe payment gateway with Next.js 14.

Youtube link : https://www.youtube.com/watch?v=4oDmBjusoKM

After integrating the PhonePe payment gateway, several users encountered issues. Below are the problems and their corresponding solutions:

Problem 1: Bad Request

Solution: The PhonePe team recommended initiating the payment request from the server side rather than the client side (Client Components). Consequently, I modified the code in the Next.js project, creating a Server Action and shifting the payment request code to the Server Action.

UPDATED CODE LINK:

https://drive.google.com/file/d/177CZjg4PCfjzE-WOLEHeMyJu4ouFZoau/view?usp=sharing

Problem 2: Too Many Requests (429)

The issue was related to sandbox credentials. The website credentials were as follows:

NEXT_PUBLIC_MERCHANT_ID=PGTESTPAYUAT

NEXT_PUBLIC_SALT_KEY=099eb0cd-02cf-4e2a-8aca-3e6c6aff0399

NEXT_PUBLIC_SALT_INDEX=1

Solution: The PhonePe team suggested updating these credentials to:

NEXT_PUBLIC_MERCHANT_ID=PGTESTPAYUAT86

NEXT_PUBLIC_SALT_KEY=96434309-7796-489d-8924-ab56988a6076

NEXT_PUBLIC_SALT_INDEX=1

Problem 3: 401/404 Errors

Solution: Ensure that the callback and redirect URL is defined correctly, for example:

http://localhost:3000/api/status/${transactionid}

According to the Next.js 14 App Router concept, the "API/status/[id]" folder should be inside the APP folder, and there should be a route.js file. I have structured the calls according to this architecture.

If you are following the pages/api directory structure, you will encounter a 404 error. Please ensure you call routes accordingly.

I will also create a video to address these problems in detail. I hope these solutions help resolve your issues or assist in debugging. If the problem persists, please email me for further assistance.