Parsing payload data from razorpay callback url [duplicate]

I am trying to add razorpay to my site, and after successful payment it is redirecting to callback URL with some payload data,
Here is my callback URL where it is redirecting after payment.

https://www.someurl.com/payment-callback.html

and this is how i am getting payload
Payload data

Here is code for my payment-callback.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Callback</title>
    <style>
        body { font-family: Arial, sans-serif; }
        h1 { color: #4CAF50; }
        .status { margin: 20px 0; font-size: 18px; }
        .logs { background: #f9f9f9; padding: 10px; border: 1px solid #ddd; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
<h1>Payment Status</h1>
<div class="status" id="status"></div>
<div class="logs" id="logs"></div>

<script>
    // Function to extract query parameters from the URL
    function getQueryParams() {
        const params = new URLSearchParams(window.location.search);
        const paymentId = params.get('razorpay_payment_id');
        const orderId = params.get('razorpay_order_id');
        const signature = params.get('razorpay_signature');

        return { paymentId, orderId, signature };
    }

    const paymentInfo = getQueryParams();

    // Print the received URL and parameters for debugging
    const currentUrl = window.location.href;
    const logsDiv = document.getElementById('logs');
    logsDiv.innerHTML = `
        <p><strong>Current URL:</strong> ${currentUrl}</p>
        <p><strong>Received Payment ID:</strong> ${paymentInfo.paymentId || 'N/A'}</p>
        <p><strong>Received Order ID:</strong> ${paymentInfo.orderId || 'N/A'}</p>
        <p><strong>Received Signature:</strong> ${paymentInfo.signature || 'N/A'}</p>
    `;

    // Display status based on the query parameters received
    const statusDiv = document.getElementById('status');

    if (paymentInfo.paymentId && paymentInfo.orderId && paymentInfo.signature) {
        statusDiv.innerHTML = `
            <p class="success">Payment Successful!</p>
            <p><strong>Payment ID:</strong> ${paymentInfo.paymentId}</p>
            <p><strong>Order ID:</strong> ${paymentInfo.orderId}</p>
            <p><strong>Signature:</strong> ${paymentInfo.signature}</p>
        `;
        // Optionally: Send these parameters to your server for further verification.
    } else {
        let errorMessage = '<p class="error">Payment Failed or Invalid Response!</p>';

        // Detailed error reporting
        if (!paymentInfo.paymentId) {
            errorMessage += '<p class="error">Missing Payment ID!</p>';
        }
        if (!paymentInfo.orderId) {
            errorMessage += '<p class="error">Missing Order ID!</p>';
        }
        if (!paymentInfo.signature) {
            errorMessage += '<p class="error">Missing Signature!</p>';
        }

        statusDiv.innerHTML = errorMessage;
    }
</script>
</body>
</html>

i am trying to parse it but unable to get, any help would be appreciated.

I am expecting either i get all data in url or i can extract from payload.