developer.authorize.net developer.cybersource.com
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results forย 
Search instead forย 
Did you mean:ย 
Ask a question

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>
mwex501
Member

โ€Ž08-31-2017 07:36 AM

0 Kudos
8 REPLIES 8

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
NexusSoftware
Trusted Contributor

โ€Ž08-31-2017 12:16 PM

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.

mwex501
Member
In response to NexusSoftware

โ€Ž09-26-2017 10:47 AM

0 Kudos

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
NexusSoftware
Trusted Contributor
In response to mwex501

โ€Ž09-26-2017 02:24 PM - edited โ€Ž09-26-2017 02:26 PM

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>

 

mwex501
Member
In response to NexusSoftware

โ€Ž09-27-2017 06:24 AM - edited โ€Ž09-27-2017 06:26 AM

0 Kudos

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
NexusSoftware
Trusted Contributor
In response to mwex501

โ€Ž09-27-2017 07:17 AM - edited โ€Ž09-27-2017 07:23 AM 

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

mwex501
Member
In response to NexusSoftware

โ€Ž09-27-2017 08:23 AM

0 Kudos

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
NexusSoftware
Trusted Contributor
In response to mwex501

โ€Ž09-27-2017 08:29 AM - edited โ€Ž09-27-2017 08:32 AM

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

 

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

Sangu123
Member
In response to mwex501

โ€Ž03-16-2018 05:24 AM

0 Kudos
Copyright © 2024 Khoros, LLC