function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mahmood ButtMahmood Butt 

Embed “HTML with JavaScript” in VF page

Background
I am working on payment gateway implementation on Salesforce sites using Ingenico with 3D secure. I am using the API which returns a response if the card is 3D enabled. Response will open a pop-up or new window that has a 3D challenge simulation, normally what a user would see with real transaction.
Problem
If I embed the response in <apex:outputText escape='false' value='{!response}'> field nothing happens. Upon taking the response out from debug log and use it as a separate HTML it runs fine as shown below.
Desired 3-D simulation output
User-added image
Workarounds tried

If I display the response in a <div> it shows as a string, rather than an embedded HTML.
e.g.
<div id="responsediv"> 
   {!response} 
</div>
output(rendered as String, not HTML)
<form id="downloadform3D" name="downloadform3D" method="post" 
action="https&#58;//simulator.v-psp.com/SchemeAcsSimulator/acs/checkauthentication&#63;parameters=XXXXXXXX%3d"  >
<noscript>
<div>JavaScript is currently disabled or is not supported by your browser<br/>
Please click on the &quot;Continue&quot; button to continue the processing of your 3-D secure transaction.<br/>
<input class="ncol" type="submit" value="Continue" id="submit1" name="submit1" />
</div>

</noscript>
<div>
<input type="hidden" name="CSRFKEY" value="XXXXXXXXXXXXXXXXXXX" >
...
<input type="hidden" name="PaReq" value="XXXXXXXXXXXXXXXX">
</div>
</form>

<form method="post" action="order_agree.asp" name="uploadForm3D" id="uploadForm3D">
<input type="hidden" name="CSRFKEY" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" >
...
...
<input type="hidden" name="hash_param_3D" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</form>
<SCRIPT LANGUAGE="Javascript" >
<!--
var popupWin;
var submitpopupWin = 0;

function LoadPopup() {
    if (self.name == null)  {
        self.name = "ogoneMain";
    }
    popupWin = window.open('about:blank', 'popupWin', 'height=400, width=390, status=yes, dependent=no, scrollbars=yes, resizable=no');
    if (popupWin != null) {
        if  (!popupWin &#124;&#124; popupWin.closed) {
            return 1;
        } else {
            if (!popupWin.opener &#124;&#124; popupWin.opener == null) {
                popupWin.opener = self;
            }
            self.document.forms.downloadform3D.target = 'popupWin';
            if (submitpopupWin == 1) {
                self.document.forms.downloadform3D.submit();
            }
            popupWin.focus();
            return 0;
        }
    } else {
        return 1;
    }
}
    self.document.forms.downloadform3D.submit();
//-->
</SCRIPT>