Using Accept Hosted Page IFrame / Lightbox

[authDevForumer]

I am trying to get the Accept Hosted Page ideally as a lightbox but I can't seem to get anywhere regarding a few things.

I am not really sure what the point of the hostedPageReturnOptions are as I don't want the IFrame to "return" anywhere as it didn't "go" anywhere. I want to present it as a popup over the screen and simply be notified of the user's selections. Currently the only messages I am getting to the IFrameCommunicator are windowResize messages. I only get cancel messages if I give a cancelUrl but that results in a nested IFrame as the IFrame navigates to that url and then I have an IFrame in an IFrame which is definitely not how this is supposed to work.

After reading the documentation there are several claims that a lightbox can be accomplished via styling the IFrame's container and adding a positioned "X" button in the top right corner. However I was reading another page here that had a developer claim you cannot hide the cancel button. Which begs the question, what is the point of the cancel and continue buttons?

With only getting windowResize messages I'm not sure how I am meant to know whether or not a transaction occurred, or if it was successful. 

If anyone has any insights regarding this or has dealt with simliar results from trying to use the Accept Hosted Page any feedback would be greatly appreciated.

[authDevForumer]

Setting showReceipt to false solved one of the issues as now I am getting the transactionResponse. I am not sure how you are meant to close the IFrame without getting a message regarding the transaction from the IFrameCommunicator

[Aaron]

Hi @authDevForumer,

Note, this is all assuming showReceipt=false AND the form is loaded in an iframe.

When the user encounters the form, they have two things they can do. They can either click the "Cancel" button or enter information and click the "Pay" button. Those are the possible actions on the form itself. If you've loaded the form up in a styled border with an "X" button or something like that, that would be a third choice, but that's entirely your creation, so it's entirely your choice what happens when they click that button.

If the user clicks the "cancel" button, you should be receiving an "action=cancel" message through the iFrameCommunicator. If a user doesn't click cancel, but instead proceeds through payment, you should be receiving an "action=transactResponse" message, as well as a response string that gives you all of the transaction details to use in presenting a receipt to the user. If you receive either message, you'd close the lightbox and prepare an appropriate response to the user.

In these scenarios, you probably don't want to send either a cancel URL or a continue URL in the token request. If showReceipt=false, AND the form is loaded in an iframe, the continue URL is ignored. Instead, the transaction information is sent via iFrameCommunicator, and the form just sits there waiting for you to dismiss the frame.

If you send a cancel URL, that URL will be loaded inside the iframe when the user clicks "Cancel", but that's of rather limited utility. Off the top of my head, the only use case I can think of is if you wanted to load up a quick "Cancelling your transaction" page before you dismissed the iframe entirely. Otherwise, if you don't provide a cancel URL, the form will send the action=cancel message, then just sit there waiting for you to dismiss it in code.

[authDevForumer · Accepted solution]

After continuing to test with the Accepted Host page it is making a lot more sense now. I believe the main confusion was caused by this line in the documentation "If the value of the showReceipt field is false, a return URL must be provided in the "url" parameter. Otherwise the receipt page will be shown." Simply setting showReceipt to false has fixed everything now and it's working great. I am getting the messages just as you mentioned in your post. Thanks for the quick response!

[Aaron]

Hi @authDevForumer,

Thanks for the feedback! We'll see how we can make things clearer in the documentation.

[MusicMonkey5555]

I am also using the hosted payment page: https://developer.authorize.net/api/reference/features/accept_hosted.html

I get the transactResponse action from the iframe communicator, as well as a resize in the beginning, but I never get the cancel action, so the button is just sitting there doing nothing. I am not passing any url for cancel is that why? I was under the assumption I dont need to when using a lightbox iframe.

[Aaron]

You're right. In my testing, if you don't pass a cancel URL, you don't get the message of action=cancel. Digging through our sample app, it seems we get around it by passing a cancel URL of 

thisPageUrl()."return.html"

That return.html page is just a simple page with a script:

<html>
<head>
	<script type="text/javascript">
		window.onload = function() {
    		parent.returnLoaded();
		}
	</script>
</head>
<body>

</body>
</html>

That calls a returnLoaded() function in the parent page, and in the sample app, that function is very simple:

	function returnLoaded() {
		console.log("Return Page Called ! ");
	}

I don't think you'd even need a script in that return.html page. I think that page could just be blank, and you'd use the action=cancel message to tear down the iframe.

I'm not aware of a good reason why the cancel message wouldn't be passed if there's no URL specified. It seems strange that would be the case, so I'm going to investigate internally to see if that's by design.

[raviparmarce88]

Did you get the solution ?

I am still facing this issue with IE browser.

When click on 'Cancel' button it reload my parent page in iFrame even passed all the required parameters for Return options.