topic Re: Accept Hosted Form and Redirecting in Integration and Testing

Accept Hosted Form and Redirecting

mwex501 — Thu, 31 Aug 2017 14:36:17 GMT

Hello:

I am building a solution using an Authorize.net Accept Hosted form within an iframe. Currently the solution works but not exactly as expected.

At the moment when a payment is made, the receipt is provided in the iframe window.

My goal is to NOT show a receipt, instead to REDIRECT to a new page that would PROCESS the results and mark the order as complete in the ecommerce engine.

While I followed the instructions in the documentation, it still shows the receipt instead of redirecting.

Based on the documentation I would assume the following would redirect to the processing script instead of showing the receipt:

<setting>
                <settingName>hostedPaymentReturnOptions</settingName>
                <settingValue>{"showReceipt" : false, "url":"https://www.hiddendomain.com/temp/auth.net/testreceipt.php"}</settingValue>
</setting>

Any idea what I am doing wrong?

Below is the complete code in my test application:

<html>
<head></head>
<body>
<?php
$transactionKey = 'hiddentransactionkey';
$api_login_id = 'hiddenloginid';
$url = "https://apitest.authorize.net/xml/v1/request.api";

//token request
$xmlStr = '<getHostedPaymentPageRequest xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd">
<merchantAuthentication>
        <name>'.$api_login_id.'</name>
        <transactionKey>'.$transactionKey.'</transactionKey>
</merchantAuthentication>
<transactionRequest>
        <transactionType>authCaptureTransaction</transactionType>
        <amount>20.00</amount>
        <billTo>
         <firstName>Ellen</firstName>
         <lastName>Johnson</lastName>
         <company>Souveniropolis</company>
         <address>14 Main Street</address>
         <city>Pecan Springs</city>
         <state>TX</state>
         <zip>44628</zip>
         <country>USA</country>
      </billTo>
      <shipTo>
         <firstName>China</firstName>
         <lastName>Bayles</lastName>
         <company>Thyme for Tea</company>
         <address>12 Main Street</address>
         <city>Pecan Springs</city>
         <state>TX</state>
         <zip>44628</zip>
         <country>USA</country>
      </shipTo>
</transactionRequest>
<hostedPaymentSettings>
        <setting>
                <settingName>hostedPaymentBillingAddressOptions</settingName>
                <settingValue>{"show": false, "required":true}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentButtonOptions</settingName>
                <settingValue>{"text": "Pay"}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentReturnOptions</settingName>
                <settingValue>{"showReceipt" : false, "url":"https://www.hiddendomain.com/temp/auth.net/testreceipt.php"}</settingValue>
        </setting>
        <setting>
         <settingName>hostedPaymentShippingAddressOptions</settingName>
         <settingValue>{"show": false, "required":true}</settingValue>
      </setting>
        <setting>
                <settingName>hostedPaymentStyleOptions</settingName>
                <settingValue>{"bgColor":"red"}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentOrderOptions</settingName>
                <settingValue>{"show": false}</settingValue>
        </setting>
</hostedPaymentSettings>
</getHostedPaymentPageRequest>';

$xml = new SimpleXMLElement($xmlStr);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/xml'));
curl_setopt($ch, CURLOPT_POSTFIELDS, $xml->asXML());
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10000);
// The following two curl SSL options are set to "false" for ease of development/debug purposes only.
// Any code used in production should either remove these lines or set them to the appropriate
// values to properly use secure connections for PCI-DSS compliance.
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);    //for production, set value to true or 1
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);    //for production, set value to 2
curl_setopt($ch, CURLOPT_DNS_USE_GLOBAL_CACHE, false);
$content = curl_exec($ch);

$hostedPaymentResponse = new SimpleXMLElement($content);

?>
<iframe id="load_payment" src="https://test.authorize.net/payment/payment?token=<?php echo $hostedPaymentResponse->token ?>" class="embed-responsive-item" name="load_payment" width="600" height="650" frameborder="1" scrolling="no">
</iframe>
<form id="send_hptoken" name="authForm" action="https://test.authorize.net/payment/payment" method="post" target="load_payment" >
<input type="hidden" name="token" value="<?php echo $hostedPaymentResponse->token ?>" />
</form>
<script>
document.authForm.submit();
</script>
</body>
</html>

Re: Accept Hosted Form and Redirecting

NexusSoftware — Thu, 31 Aug 2017 19:16:23 GMT

Hello,

You need to specify an iframe communicator url, an example of which is at https://github.com/AuthorizeNet/accept-sample-app/blob/master/IFrameCommunicator.html and handle the response in your parent page:

<setting>
<settingName>hostedPaymentIFrameCommunicatorUrl</settingName>
<settingValue>{"url": "https://YOUR_FANCY_WEBSITE.COM/icommunicator.html"}</settingValue>
</setting>

To handle the response, you could have something like the following in your parent page:

<script>
    window.CommunicationHandler = {};
    function parseQueryString(str) {
        var vars = [];
        var arr = str.split('&');
        var pair;
        for (var i = 0; i < arr.length; i++) {
            pair = arr[i].split('=');
            vars[pair[0]] = unescape(pair[1]);
        }
        return vars;
    }
    window.CommunicationHandler.onReceiveCommunication = function (argument) {
        params = parseQueryString(argument.qstr)
        parentFrame = argument.parent.split('/')[4];
        switch (params['action']) {
            case "transactResponse":
                var transResponse = JSON.parse(params['response']);
if (transResponse.transId > 0) {
$('#load_payment').hide();
$('#demo').html("Thank you. Your Transaction Id is: "+transResponse.transId);

 }           
                                
        }

    }

</script>

Re: Accept Hosted Form and Redirecting

mwex501 — Tue, 26 Sep 2017 17:47:06 GMT

TY for the response but this doesn't seem to work.

Seems that action is always "resizeWindow" and never "transactResponse" even when the transaction is completed.

Note I am in sandbox mode if that effects the responses.

Re: Accept Hosted Form and Redirecting

NexusSoftware — Tue, 26 Sep 2017 21:26:12 GMT

To see what is being passed, you could try :

console.log(params);

Do you have a live URL to check out? Posting to the Sandbox doesn't make any difference.

Re: Accept Hosted Form and Redirecting

mwex501 — Wed, 27 Sep 2017 13:26:57 GMT

I set up a test script here:

https://www.breyerhorses.com/temp/auth.net/test.php

The iframe communicator is located here:

https://www.breyerhorses.com/temp/auth.net/authnet_iframe_communicator.html

The outstanding issues are:

* The only action I receive is resize window (I am logging the actions to the console)

* Also, though I am sending an address, it is returning a BLANK address on the THANK YOU page. My objective is to send an address from our cart and not allow the customer to modify it in the hosted window.

Below is the code in test.php:

<?php

$transactionKey = ''; // removed to protect the innocent
$api_login_id = '';
$url = "https://apitest.authorize.net/xml/v1/request.api";

$xmlStr = '<getHostedPaymentPageRequest xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd">
<merchantAuthentication>
        <name>'.$api_login_id.'</name>
        <transactionKey>'.$transactionKey.'</transactionKey>
</merchantAuthentication>
<transactionRequest>
        <transactionType>authCaptureTransaction</transactionType>
        <amount>1.00</amount>
<order>
<invoiceNumber>1</invoiceNumber>
</order>
        <billTo>
         <firstName>bfirst</firstName>
         <lastName>blast</lastName>
         <company>bcompany</company>
         <address>baddress</address>
         <city>bcity</city>
         <state>MD</state>
         <zip>12345</zip>
         <country>US</country>
      </billTo>
      <shipTo>
         <firstName>sfirst</firstName>
         <lastName>slast</lastName>
         <company>scompany</company>
         <address>saddress</address>
         <city>scity</city>
         <state>MD</state>
         <zip>23456</zip>
         <country>US</country>
      </shipTo>

</transactionRequest>
<hostedPaymentSettings>
        <setting>
                <settingName>hostedPaymentBillingAddressOptions</settingName>
                <settingValue>{"show": false, "required":false}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentButtonOptions</settingName>
                <settingValue>{"text": "Pay"}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentReturnOptions</settingName>
                <settingValue>{"url":"https://www.breyerhorses.com/temp/auth.net/authnet_response.php?action=continue","urlText":"Continue","cancelUrl":"https://www.breyerhorses.com/temp/auth.net/authnet_response.php?action=cancel","cancelUrlText":"Cancel"}</settingValue>
        </setting>
        <setting>
         <settingName>hostedPaymentShippingAddressOptions</settingName>
         <settingValue>{"show": false, "required":false}</settingValue>
</setting>
        <setting>
                <settingName>hostedPaymentStyleOptions</settingName>
                <settingValue>{"bgColor":"#B00"}</settingValue>
        </setting>
        <setting>
                <settingName>hostedPaymentIFrameCommunicatorUrl</settingName>
                <settingValue>{"url": "https://www.breyerhorses.com/temp/auth.net/authnet_iframe_communicator.html"}</settingValue>
        </setting>
</hostedPaymentSettings>
</getHostedPaymentPageRequest>';

$xml = new SimpleXMLElement($xmlStr);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/xml'));

curl_setopt($ch, CURLOPT_POSTFIELDS, $xml->asXML());
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10000);
// The following two curl SSL options are set to "false" for ease of development/debug purposes only.
// Any code used in production should either remove these lines or set them to the appropriate
// values to properly use secure connections for PCI-DSS compliance.
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);    //for production, set value to true or 1
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);    //for production, set value to 2
curl_setopt($ch, CURLOPT_DNS_USE_GLOBAL_CACHE, false);


$content = curl_exec($ch);

$hostedPaymentResponse = new SimpleXMLElement($content);
$hostedPaymentToken = $hostedPaymentResponse->token;
?>
<html>
<head>
<script>
    window.CommunicationHandler = {};
    function parseQueryString(str) {
        var vars = [];
        var arr = str.split('&');
        var pair;
        for (var i = 0; i < arr.length; i++) {
            pair = arr[i].split('=');
            vars[pair[0]] = unescape(pair[1]);
        }
        return vars;
    }
    window.CommunicationHandler.onReceiveCommunication = function (argument) {
console.log('onReceiveCommunication');
console.log(argument);
        params = parseQueryString(argument.qstr)
console.log(params);
        parentFrame = argument.parent.split('/')[4];
        switch (params['action']) {
            case "transactResponse":
                var transResponse = JSON.parse(params['response']);
if (transResponse.transId > 0) {
console.log('transId:'+transResponse.transId);
//$('#load_payment').hide();
//$('#demo').html("Thank you. Your Transaction Id is: "+transResponse.transId);

 }          break;
             case "resizeWindow":
var win = document.getElementById('load_payment');
win.style.height = params['height'];
break;

        }

    }

</script>
</head>
<body>
<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="600" height="650" frameborder="1" scrolling="no"></iframe>
<form id="send_hptoken" name="authForm" action="https://test.authorize.net/payment/payment" method="post" target="load_payment" >
<input type="hidden" name="token" value="<?php echo $hostedPaymentToken; ?>" />
</form>
<script>
document.authForm.submit();
</script>
</body>

</html>

Re: Accept Hosted Form and Redirecting

NexusSoftware — Wed, 27 Sep 2017 14:23:04 GMT

What works at https://nexwebhost.com/authorizenet/get-hosted.html, is posting the following XML:

<getHostedPaymentPageRequest xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd">
  <merchantAuthentication>
    <name>YOUR_LOGIN</name>
    <transactionKey>YOUR_TRANSACTION_KEY</transactionKey>
  </merchantAuthentication>
  <transactionRequest>
    <transactionType>authCaptureTransaction</transactionType>
    <amount>'.$amount.'</amount>
  </transactionRequest>
  <hostedPaymentSettings>
    <setting>
      <settingName>hostedPaymentIFrameCommunicatorUrl</settingName>
      <settingValue>{"url": "https://nexwebhost.com/authorizenet/iCommunicator.html"}</settingValue>
    </setting>
    <setting>
      <settingName>hostedPaymentBillingAddressOptions</settingName>
      <settingValue>{"show": false, "required":false}</settingValue>
    </setting>
    <setting>
      <settingName>hostedPaymentButtonOptions</settingName>
      <settingValue>{"text": "Pay"}</settingValue>
    </setting>
    <setting>
      <settingName>hostedPaymentReturnOptions</settingName>
      <settingValue>{"showReceipt" : false, "url":"https://nexwebhost.com","urlText":"Continue","cancelUrl":"https://nexwebhost.com","cancelUrlText":"Cancel"}</settingValue>
    </setting>
  </hostedPaymentSettings>
</getHostedPaymentPageRequest>

The following script in iCommunicator.html:

<script type="text/javascript">

 function callParentFunction(str) {
   if (str && str.length > 0 && window.parent && window.parent.parent 
     && window.parent.parent.CommunicationHandler && window.parent.parent.CommunicationHandler.onReceiveCommunication)
   {
      var referrer = document.domain;
      window.parent.parent.CommunicationHandler.onReceiveCommunication({qstr : str , parent : referrer});
   }
 }
 
 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) {
   callParentFunction(window.location.hash.substring(1));
 }

 </script>

And the following script on the parent page:

	<script>
    window.CommunicationHandler = {};
    function parseQueryString(str) {
        var vars = [];
        var arr = str.split('&');
        var pair;
        for (var i = 0; i < arr.length; i++) {
            pair = arr[i].split('=');
            vars[pair[0]] = unescape(pair[1]);
        }
        return vars;
    }
    window.CommunicationHandler.onReceiveCommunication = function (argument) {
        params = parseQueryString(argument.qstr)
        parentFrame = argument.parent.split('/')[4];
        switch (params['action']) {
            case "transactResponse":
                var transResponse = JSON.parse(params['response']);
if (transResponse.transId > 0) {
$('#payform').hide();
$('#payframe').hide();
$('#response').html("Thank you. Your Transaction Id is: "+transResponse.transId);

 }           
                                
        }

    }

</script>

If you have hostedPaymentBillingAddressOptions set to false, then the billing address wll not be passed.

<setting>
       <settingName>hostedPaymentBillingAddressOptions</settingName>
         <settingValue>{"show": false, "required":false}</settingValue>
        </setting>

Re: Accept Hosted Form and Redirecting

mwex501 — Wed, 27 Sep 2017 15:23:28 GMT

"showReceipt" : false,

did the trick to allow the transactResponse messages to start showing. Thanks!

So is there anyway to pass the address to the token and NOT allow the customer to change that address in the hosted iframe?

Re: Accept Hosted Form and Redirecting

NexusSoftware — Wed, 27 Sep 2017 15:32:13 GMT

Currently no, but it is one of the product ideas being requested: https://community.developer.authorize.net/t5/Ideas/Accepted-Hosted-Allow-BillTo-and-ShipTo-to-be-submitted-without/idi-p/59239

Re: Accept Hosted Form and Redirecting

Sangu123 — Fri, 16 Mar 2018 12:24:20 GMT

Could you please advise on which tag should have, "showReceipt": false, value. ??.

We tried putting for "hostedPaymentReturnOptions' still it was not working as expected.