Getting a Blank Screen After Submitting 3D Secure Challenge Form in CyberSource Integration

Question

I'm integrating EMV 3-D Secure authentication with CyberSource. After receiving the PENDING_AUTHENTICATION response, I'm attempting to redirect the user to the ACS (Access Control Server) URL for the 3D Secure challenge.

Request :

{
  "clientReferenceInformation": {
    "code": "TC50171_100"
  },
  "processingInformation": {
    "actionList": [
      "CONSUMER_AUTHENTICATION"
    ]
  },
  "paymentInformation": {
    "card": {
      "number": "4000000000001091",
      "expirationMonth": "12",
      "expirationYear": "2030"
    }
  },
  "orderInformation": {
    "amountDetails": {
      "totalAmount": "173.00",
      "currency": "AED"
    },
    "billTo": {
      "firstName": "John",
      "lastName": "Smith",
      "address1": "201 S. Division St._1",
      "address2": "Suite 500",
      "locality": "Foster City",
      "administrativeArea": "Dubai",
      "postalCode": "94404",
      "country": "AE",
      "email": "accept@cybersource.com",
      "phoneNumber": "6504327113"
    }
  },
  "deviceInformation": {
    "httpAcceptBrowserValue": "application/json",
    "httpAcceptContent": "application/json",
    "httpBrowserLanguage": "en-US",
    "httpBrowserJavaEnabled": false,
    "httpBrowserColorDepth": "24",
    "httpBrowserScreenHeight": "480",
    "httpBrowserScreenWidth": "640",
    "httpBrowserTimeDifference": "+330",
    "userAgentBrowserValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36"
  },
  "consumerAuthenticationInformation": {
    "authenticationType" : "02",
    "challengeCode" : "03",
    "deviceChannel": "Browser",
        "returnUrl" : "https://eoa0rrziqlx17zs.m.pipedream.net/"
  }
}

Response :

{
  "clientReferenceInformation": {
    "code": "TC50171_100"
  },
  "consumerAuthenticationInformation": {
    "challengeRequired": "N",
    "authenticationTransactionId": "Yg3A0FBpJUvxwmuz1Tk0",
    "strongAuthentication": {
      "OutageExemptionIndicator": "0"
    },
    "token": "AxjzbwSTiQgQxbPcfvX3AEIBT34iyLJPEB8OUQk12tJMvRjUBcBAPAAA+wRt",
    "acsUrl": "https://0merchantacsstag.cardinalcommerce.com/MerchantACSWeb/creq.jsp",
    "acsReferenceNumber": "Cardinal ACS",
    "stepUpUrl": "https://centinelapistag.cardinalcommerce.com/V2/Cruise/StepUp",
    "pareq": "eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiJjNjY4NmU3MS0zNmFkLTQ1MTQtYWNiMC0wMzBhMDk3MjU3NzMiLCJhY3NUcmFuc0lEIjoiOWI0NjU1ZDUtNjU2My00YjdhLTgxYjYtYWExYWQwZTVmNmQ3IiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjAyIn0",
    "directoryServerTransactionId": "342aaf9a-508a-4ac7-bf65-942bf88f82da",
    "veresEnrolled": "Y",
    "threeDSServerTransactionId": "c6686e71-36ad-4514-acb0-030a09725773",
    "acsOperatorID": "MerchantACS",
    "specificationVersion": "2.1.0",
    "acsTransactionId": "9b4655d5-6563-4b7a-81b6-aa1ad0e5f6d7"
  },
  "errorInformation": {
    "reason": "CONSUMER_AUTHENTICATION_REQUIRED",
    "message": "The cardholder is enrolled in Payer Authentication. Please authenticate the cardholder before continuing with the transaction."
  },
  "id": "7250151602696073704951",
  "paymentInformation": {
    "card": {
      "bin": "400000",
      "type": "VISA"
    }
  },
  "status": "PENDING_AUTHENTICATION",
  "submitTimeUtc": "2024-08-30T10:52:40Z"
}

I then use this form to submit the challenge request:

<div id="threedsChallengeRedirect" xmlns="http://www.w3.org/1999/html" style=" height: 100vh"> 
    <form id ="threedsChallengeRedirectForm" method="POST" action="https://0merchantacsstag.cardinalcommerce.com/MerchantACSWeb/creq.jsp"> 
        <input type="hidden" name="creq" value="eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiJlMGI3YzFlNS1jNTBmLTRiMTEtYmIyNC02Y2M2NDU1NTdhOTEiLCJhY3NUcmFuc0lEIjoiZTJjNDM1NTktZWMwYS00MTNiLTk0OGQtMjY4ZWQzZWY4N2Y5IiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjAyIn0" />
        <input type="hidden" name="TermUrl" value="https://eoa0rrziqlx17zs.m.pipedream.net"/>
    </form> 
    <script id="authenticate-payer-script"> var e=document.getElementById("threedsChallengeRedirectForm"); if (e) { e.submit(); if (e.parentNode !== null) { e.parentNode.removeChild(e); } } </script> 
</div>

Issue: Instead of loading the challenge screen, I'm getting a black screen. The form appears to submit correctly, but nothing is displayed. How can I resolve this issue and ensure the challenge screen is properly rendered?

Additional Context: I'm using a sandbox environment for testing. The creq value is correctly generated and is pareq value of the response. The TermUrl is an endpoint that should handle the response after the challenge is completed. Any guidance would be appreciated!