Reply
Member
Posts: 9
Registered: ‎08-30-2017

Accept Hosted Form and Redirecting

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>
Posts: 465
Topics: 0
Kudos: 92
Blog Posts: 0
Ideas: 0
Solutions: 37
Registered: ‎04-28-2017

Re: Accept Hosted Form and Redirecting

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>

 

Powered by NexWebSites.com -
Certified Authorize.net developers
Member
Posts: 9
Registered: ‎08-30-2017

Re: Accept Hosted Form and Redirecting

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.

Posts: 465
Topics: 0
Kudos: 92
Blog Posts: 0
Ideas: 0
Solutions: 37
Registered: ‎04-28-2017

Re: Accept Hosted Form and Redirecting

[ Edited ]

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. 

Powered by NexWebSites.com -
Certified Authorize.net developers
Member
Posts: 9
Registered: ‎08-30-2017

Re: Accept Hosted Form and Redirecting

[ Edited ]

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>

 

Posts: 465
Topics: 0
Kudos: 92
Blog Posts: 0
Ideas: 0
Solutions: 37
Registered: ‎04-28-2017

Re: Accept Hosted Form and Redirecting

[ Edited ]

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>

 

Powered by NexWebSites.com -
Certified Authorize.net developers
Member
Posts: 9
Registered: ‎08-30-2017

Re: Accept Hosted Form and Redirecting

"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?

Posts: 465
Topics: 0
Kudos: 92
Blog Posts: 0
Ideas: 0
Solutions: 37
Registered: ‎04-28-2017

Re: Accept Hosted Form and Redirecting

[ Edited ]

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-sub...

Powered by NexWebSites.com -
Certified Authorize.net developers
Member
Posts: 8
Registered: ‎02-12-2018

Re: Accept Hosted Form and Redirecting

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

 

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