Realex payment, response cant be Handled .Net

i trying to implement a hpp full redirect to realex payment, i have 2 controllers one that send the request to the realex payment server and the second to which the response is sent back. i get the response in json as such

{"RESULT":"00","AUTHCODE":"12345","MESSAGE":"[ test system ] AUTHORISED","PASREF":"15441812060166886","AVSPOSTCODERESULT":"M","AVSADDRESSRESULT":"M","CVNRESULT":"M","ACCOUNT":"internet","MERCHANT_ID":"MyID","ORDER_ID":"UYCRWpJtlE-B1n62SE7EKg","TIMESTAMP":"20181207111253","AMOUNT":"199","MERCHANT_RESPONSE_URL":"URL to my webcontroller","pas_uuid":"b3cfa79e-2b60-4f2a-9dad-cfa897f17189","SHA1HASH":"c193e099da587b28810775f388d15c2f88fd637c","BATCHID":"601099"}

the problem im having is this json is displayed in a page with the following URL. https://pay.sandbox.realexpayments.com/card.html?guid=b3cfa79e-2b60-4f2a-9dad-cfa897f17189 but i want to extract the order id and transaction id and amount from this json and display it in some sort of form in a out company page to inform the user that there payment as been successfull or declined based on the outcome.

the client side code that invokes it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<!-- reference to your css file below. You can also use a separate css from your desktop more at https://developer.realexpayments.com/#!/hpp/customisation-->
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="rxp-js-master/lib/rxp-hpp.js"></script>
<script>

  $(document).ready(function() {

    $.getJSON("URL to my first controller", function(jsonFromRequestEndpoint) { 
    ///alert(jsonFromRequestEndpoint);
      RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
      // When using full page redirect your Response URL must be an absolute link

      RealexHpp.redirect.init("payButtonId", "URL to my second controller", jsonFromRequestEndpoint);


      const URL = "https://development.eurowatchcentral.com"
            const data = jsonFromRequestEndpoint;

            $.post(URL, data, function(data, status){

            console.log ('${data} and status is ${status}')

            });
      });


  });




</script>
</head>
<body>
<!-- The tag <hpp:body /> below indicates where the payment form will be placed - for all guidelines on templates please visit https://developer.realexpayments.com/#!/hpp/customisation-->
        <div>

<form >

<button type="button" value="payButtonId" id ="payButtonId">Click Me!</button>
        </div>

        <p id="demo"></p>
    </form> 
</body>
</html>

i tried looking for any relevant steps in the API but i struggled to find any.

When using Full Page Redirect (as opposed to an iFrame), the HPP will send the response POST to your second controller. This is sent as a standard HTTP POST, it's not sent as a JSON string.

At the moment as well, the HPP will render any HTML content that is outputted by the second controller to the browser. So what we'd usually recommend at that point is that after checking the response is valid (checking the hash and the timestamp etc.) you can use a JavaScript redirect to redirect the browser to your desired URL. For example, a success or a failure page.