Cybersource Developer Community Cybersource Developer Community

coopersandbox1 · ‎12-20-2018

I have an issue calling the IFrameCommunicator on my jsp page. We are aiming for the credit card payment through IFrame lightbox on our application (jsp). I am facing challenges with the IFrameCommunicator.html as nothing in this html seems to be called. I placed this html on the same domain where our application is hosted. I have also set the showReceipt parameter to false in getHostedPaymentPageRequest API call as advised in the documentation. But these are not helping. I am unable to capture the payment gateway responses on my application. Request your help here.

I have put some console.logs on my IframeCommunicator but these never get printed on the console. But the IfrmComm.html loads on the browser and I can see that in the developer tool.

ccpay.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NA Pay</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

#divAuthorizeNetPopupScreen {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background-color: #808080;
opacity: 0.5;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
filter: alpha(opacity=50);
}

#divAuthorizeNetPopup {
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
z-index: 2;
overflow: visible;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupOuter {
background-color: #dddddd;
border-width: 1px;
border-style: solid;
border-color: #a0a0a0 #909090 #909090 #a0a0a0;
padding: 4px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupTop {
height: 23px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose {
position: absolute;
right: 7px;
top: 7px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a {
background-image: url('content/closeButton1.png');
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: inline-block;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:hover {
background-image: url('content/closeButton1h.png');
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:active {
background-image: url('content/closeButton1a.png');
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupInner {
background-color: #ffffff;
border-width: 2px;
border-style: solid;
border-color: #cfcfcf #ebebeb #ebebeb #cfcfcf;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupBottom {
height: 30px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupLogo {
position: absolute;
right: 9px;
bottom: 4px;
width: 200px;
height: 25px;
background-image: url('content/powered_simple.png');
}

.AuthorizeNetPopupSimpleTheme .AuthorizeNetPopupOuter {
border: 1px solid #585858;
background-color: #ffffff;
}
</style>

<script>
var war_clone;
var customer="";
var jason_feed="";
var tab_row="";
function pickSoldto(){

jQuery.ajax({
url:"/irj/servlet/prt/portal/prtmode/refresh/prtroot/pcd!3acom.sap.portal.system!2fgpal_hidden_content!2fgpar!2fsap.com~crmb2b~set_session_info!2fset_session_info?type=GET",
dataType:'html',
cache:false,
async:false,
success:function(data){
console.log("hi"+data);

// Substring due to IE issues
var json_string = data.substring(data.lastIndexOf("<data>")+6,data.lastIndexOf("</data>"));

json_string=json_string.substring(1,json_string.length-1);
var bill_ship_data = jQuery.parseJSON(json_string);

var bill_to_value = bill_ship_data.z_sold_to;
customer = bill_to_value.replace(/^(0+)/g, '');

}

});
}
function loadTableContent(){

jQuery('.loading_animationDet').dialog("open");
jQuery.ajax({
url:'/irj/servlet/prt/portal/prtmode/refresh/prtroot/pcd!3acom.sap.portal.system!2fgpal_hidden_content!2fgpar!2fsap.com~crmb2b~creditcardpmt!2fLoadTable',
type:'POST',
data: {type:"GET",customer:customer},
success:function(data){
if(data.indexOf("<result>") > 0){
jQuery(".modal_report_loading").dialog("close");
alert(data.substring(data.indexOf("<result>")+8,data.indexOf("</result>")));
}else{
tab_row=data.substring(data.lastIndexOf("<rowdata>")+9,data.lastIndexOf("</rowdata>"));
//alert(tab_row);
jQuery("#war_claim_tab > tbody").append(tab_row);
jQuery(".modal_report_loading").dialog("close");
}
}
});
}
function make_payment(){
//alert("Hit Payment");
var json_string="{\"authenticateTestRequest\": {\"merchantAuthentication\": {\"name\": \"3Wc3cFYb7G\",\"transactionKey\": \"449B6P3Gvkgjw99n\"}}}"
var xml_string="<getHostedPaymentPageRequest xmlns=\"AnetApi/xml/v1/schema/AnetApiSchema.xsd\"><merchantAuthentication><name>3Wc3cFYb7G</name><transactionKey>449B6P3Gvkgjw99n</transactionKey></merchantAuthentication><transactionRequest><transactionType>authCaptureTransaction</transactionType><amount>20.00</amount><profile><customerProfileId>123456789</customerProfileId></profile></transactionRequest><hostedPaymentSettings><setting><settingName>hostedPaymentReturnOptions</settingName><settingValue>{\"showReceipt\": false, \"url\": \"https://www.cooperworldprjqa.net/irj/servlet/prt/portal/prtmode/refresh/prtroot/pcd!3acom.sap.portal.system!2fgpal_hidden_content!2fgpar!2fsap.com~crmb2b~creditcardpmt!2fCreditCard_UI\", \"urlText\": \"Continue\", \"cancelUrl\": \"https://mysite.com/cancel\", \"cancelUrlText\": \"Cancel\"}</settingValue></setting><setting><settingName>hostedPaymentIFrameCommunicatorUrl</settingName><settingValue>{\"url\": \"https://www.cooperworldprjqa.net/irj/go/km/docs/documents/Public%20Documents/IfrmComm.html\"}</settingValue></setting></hostedPaymentSettings></getHostedPaymentPageRequest>";
jQuery.ajax({
url:'https://apitest.authorize.net/xml/v1/request.api',
type:'POST',
contentType: "xml",
data: xml_string,
async:false,
success:function(data){
var s = new XMLSerializer();
var XmlStr = s.serializeToString(data);
var token=XmlStr.substring(XmlStr.indexOf("<token>")+7,XmlStr.indexOf("</token>"));
console.log(token);
alert(token);
jQuery("#popupToken").val(token);
jQuery("#inputtoken").val(token);
}
});

/*jQuery.ajax({
url:'/irj/servlet/prt/portal/prtmode/refresh/prtroot/pcd!3acom.sap.portal.system!2fgpal_hidden_content!2fgpar!2fsap.com~crmb2b~creditcardpmt!2fChargeCC',
type:'POST',
cache:false,
data: {type:"GET"},
success:function(data){
//window.open("../../../../../../../sap.com~crmb2b~creditcardpmt/html/IfrmComm.html");
},
error: function(xhr, status, thrown) {
// EDIT 1
console.log(status); // <-- It's alerting "timeout"
}
});*/
}

 

function calculateSum(){
//alert("hi");
var sumTotal=0;
$('table tbody tr').each(function() {
var $tr = $(this);

if ($tr.find('input[type="checkbox"]').is(':checked')) {
//alert("2");
var columns = $tr.find('td').next('td').next('td').val(tab_row);
//alert("6"+columns);
//$(mat).closest('td').next().next().find("input[type='text']").val(desc);

//var $Qnty=parseInt($tr.find('input[type="text"]').val());
var Cost=parseFloat(columns.next('td').html());
//alert("totalyuufg"+Cost);
//sumTotal+=$Qnty*$Cost;
sumTotal= (sumTotal + Cost);
//alert("total"+sumTotal);
}
});

$("#price").val(sumTotal);

}
$(document).ready(function(){
pickSoldto();
loadTableContent();

/* var check;

// Example 1 - With checked
$("#test-with-checked").on("click", function(){
if(ccchecked.checked) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
}); */





});
</script>
</head>
<body>
<table id="war_claim_tab" class="pocw_totals flexigrid_look">
<thead>
<tr>
<th width="80">Select for Payment</th>
<th width="120">VBELN</th>
<th width="80">FKDAT</th>
<th width="80">NETWR</th>

</tr>
</thead>
<tbody></tbody>
</table>
<p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>
<div class="input_container search_input">
&nbsp;
<button onclick="make_payment()" >Get Token</button>
</div>
<form method="post" action="https://test.authorize.net/payment/payment" id="formAuthorizeNetPopup" name="formAuthorizeNetPopup" target="iframeAuthorizeNet" style="display:none;">
<input type="hidden" id="popupToken" name="token" value="" />
</form>
<input type="text" id="inputtoken" value="" />
<br />
<div>
Trigger Accept Transaction
<button id="btnOpenAuthorizeNetPopup" onclick="AuthorizeNetPopup.openPopup()">Open AuthorizeNetPopup</button>
</div>
<div id="divAuthorizeNetPopup" style="display:none;" class="AuthorizeNetPopupGrayFrameTheme">
<div class="AuthorizeNetPopupOuter">
<div class="AuthorizeNetPopupTop">
<div class="AuthorizeNetPopupClose">
<a href="javascript&colon;;" onclick="AuthorizeNetPopup.closePopup();" title="Close"> </a>
</div>
</div>
<div class="AuthorizeNetPopupInner">
<iframe name="iframeAuthorizeNet" id="iframeAuthorizeNet" src="empty.html" frameborder="0" scrolling="no"></iframe>
</div>
<div class="AuthorizeNetPopupBottom">
<div class="AuthorizeNetPopupLogo" title="Powered by Authorize.Net"></div>
</div>
<div id="divAuthorizeNetPopupScreen" style="display:none;"></div>
</div>
</div>

<script type="text/javascript">
(function () {
if (!window.AuthorizeNetPopup) window.AuthorizeNetPopup = {};
if (!AuthorizeNetPopup.options) AuthorizeNetPopup.options = {
onPopupClosed: null
};

AuthorizeNetPopup.closePopup = function () {
document.getElementById("divAuthorizeNetPopupScreen").style.display = "none";
document.getElementById("divAuthorizeNetPopup").style.display = "none";
document.getElementById("iframeAuthorizeNet").src="empty.html";
document.getElementById("btnOpenAuthorizeNetPopup").disabled = false;
if (AuthorizeNetPopup.options.onPopupClosed) AuthorizeNetPopup.options.onPopupClosed();
};


AuthorizeNetPopup.openPopup = function () {
alert("Open");
var popup = document.getElementById("divAuthorizeNetPopup");
var popupScreen = document.getElementById("divAuthorizeNetPopupScreen");
var ifrm = document.getElementById("iframeAuthorizeNet");
var form = document.forms["formAuthorizeNetPopup"];
$("#popupToken").val($("#inputtoken").val());
form.action = "https://test.authorize.net/payment/payment";
ifrm.style.width = "442px";
ifrm.style.height = "578px";

form.submit();

popup.style.display = "";
popupScreen.style.display = "";
centerPopup();
};

AuthorizeNetPopup.onReceiveCommunication = function (querystr) {
alert(querystr);
var params = parseQueryString(querystr);

switch (params["action"]) {
case "successfulSave":
AuthorizeNetPopup.closePopup();
break;
case "cancel":
AuthorizeNetPopup.closePopup();
break;
case "transactResponse":
var response = params["response"];
document.getElementById("token").value = response;
AuthorizeNetPopup.closePopup();
break;
case "resizeWindow":
var w = parseInt(params["width"]);
var h = parseInt(params["height"]);
var ifrm = document.getElementById("iframeAuthorizeNet");
ifrm.style.width = w.toString() + "px";
ifrm.style.height = h.toString() + "px";
centerPopup();
break;
}
};


function centerPopup() {
alert("Centerpop");
var d = document.getElementById("divAuthorizeNetPopup");
d.style.left = "50%";
d.style.top = "50%";
var left = -Math.floor(d.clientWidth / 2);
var top = -Math.floor(d.clientHeight / 2);
d.style.marginLeft = left.toString() + "px";
d.style.marginTop = top.toString() + "px";
d.style.zIndex = "2";
if (d.offsetLeft < 16) {
d.style.left = "16px";
d.style.marginLeft = "0px";
}
if (d.offsetTop < 16) {
d.style.top = "16px";
d.style.marginTop = "0px";
}
}

function parseQueryString(str) {
alert("Parse");
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars.push(pair[0]);
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
}());

</script>
</body>
</html>

 

IfrmComm.html

 

<script type="text/javascript">
function callParentFunction(str) {
if (str && str.length > 0
&& window.parent
&& window.parent.parent
&& window.parent.parent.AuthorizeNetPopup
&& window.parent.parent.AuthorizeNetPopup.onReceiveCommunication)
{
console.log("Calling Parent");
window.parent.parent.AuthorizeNetPopup.onReceiveCommunication(str);
}
}
function receiveMessage(event) {
if (event && event.data) {
callParentFunction(event.data);
}
}
if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}
if (window.location.hash && window.location.hash.length > 1) {
console.log("Reading Hash");
callParentFunction(window.location.hash.substring(1));
}
else{
console.log("Nothing Happens");
}
</script>

Cybersource Developer Community Cybersource Developer Community

Accept Hosted - IFrame Communicator Lightbox - JSP