iFrameCommunicator not receiving "'cancel" event - iframe

I'm implementing Authorize.net's "Accept Hosted" iframe method for submitting online payments. I want to embed the Authorize.net checkout form in an iframe (or lightbox) and then redirect my page (or close the iframe/lightbox) when the transaction is complete or is cancelled.
As I understand it, the Authorize.net page embedded in the iframe will itself embed another iframe, used to communicate from the iframe back to my page without running into cross-domain problems.
I see Authorize.net's checkout form in my iframe and the nested iframe with my "communicator" page. However, the communicator doesn't seem to respond to the "cancel" button event. It will respond to the event if I pass a cancelUrl in the hostedPaymentReturnOptions setting, but then the iframe redirects upon clicking the cancel button. I don't want the iframe to redirect, I want my parent page to redirect (or close the iframe/lightbox).
Using this setting:
$setting->setSettingName("hostedPaymentReturnOptions");
$setting->setSettingValue('{"showReceipt":false}');
... the communicator iframe is loaded and I see an event to resize the window:
action=resizeWindow&width=1802&height=572
... but clicking the "cancel" button doesn't seem to fire any event.
Using this setting:
$setting->setSettingName("hostedPaymentReturnOptions");
$setting->setSettingValue('{"showReceipt":false,"cancelUrl":"https://www.example.com/"}');
... the "cancel" button redirects the iframe to "example.com", which is not what I want. I want my parent page to redirect (or take some other action).
What am I doing wrong?
For reference:
Here are some instructions for setting up Accept Hosted.
Here is the recommended method of prompting the checkout form.
Here is the recommended iFrameCommunicator page.
This is essentially the same process I'm using, but the "cancel" button does nothing:
How to implement Authorize.NET Hosted Payments iFrame & Laravel
EDIT:
Note this description from the Authorize.net developer community forum. In my experience, this is not the way the "cancel" button works when the "cancelUrl" is provided. The URL loads inside the iframe, which is not desired.
In an iframe scenario, a click on the "Cancel" button calls the "cancelContinueBtnHandler" function. That function will pass a message to you that the transaction has been cancelled, and if there is a "cancelUrl" that you passed, will then direct the browser to that URL. So, that URL doesn't load within the iframe, but within the browser.
-- community.developer.authorize.net

Looking at the JavaScript code for handling the "cancel" button, nothing happens unless a return url or cancelUrl parameter is provided. And it looks like it redirects the iframe even if the event is passed back to the merchant, which I had not expected.
https://test.authorize.net/payment/scripts/app-min.js
m.cancelContinueBtnHandler = function(w) {
var v = (w === "continue" ? m.continueURL : m.cancelURL);
if (v && g_iframeCommunicatorUrl.length > 0 && m.isIframeCommunication) {
IFrameCommunication.sendCommunicationToMerchant("action=cancel");
window.location = v
} else {
if (v) {
window.location = v
}
}
};
So, I was misunderstanding the way this is intended to work. As others have mentioned, the current documentation is a bit spotty/misleading. Since the iframe redirects regardless, I'll consider it as a fallback for the JavaScript handler. Here's what I'm using now:
$setting->setSettingName("hostedPaymentReturnOptions");
$setting->setSettingValue('{"showReceipt" : false, "url" : "https://www.example.com/return/", "cancelUrl" : "https://www.example.com/cancel/" }');
I will also look into using WebHooks as a more reliable way of recording successful payments.

Related

Fire a page view tag but only if it was from a specific referral URL. Google tag manager

I have a form that when submitted it goes to a different "success page" and I want to use that landing page to track conversions or count how many times people hit the "submit". I could use a page view tag but then that will fire every time someone goes to that page. So perhaps if someone hits the back button and reloads the page then that will count as a form submit.
So I would like to make a page view Tag in google tag manager that only fires if the page view is coming from a specific URL or referred from a specific URL. Is this possible?
Thanks in advance.
It is possible. Enable the built-in "referrer" variable, and on your target page create a trigger "pageview", with an added condition "referrer equals <your referrer>".
Some browsers might not send a referrer header, so this is not 100% reliable. If the page that sends the traffic is under your control, you might consider using a tracking parameter instead.

How to avoid adding URL to browser history on submit

We have a sales flow that at a certain point redirects the user to an external secure page.
This is done calling an internal page with some logic to prepares the request for the external page and then submits the data.
When the user is in the external page, if he clicks the back button will go to our "dummy" page only to be redirected again to the external page.
The user should quickly click twice to get to the correct page.
Is there any way to avoid that? Like not adding the "dummy" page to the history?
I cannot change the external page.
I have read about window.location.replace but in this case I am submitting a form, not redirecting the page.
I'm a bit late to this but you could attach a history.pushState() to the onSubmit event on the interim page which injects the previous page in front.
So where your original flow was
Startpage (S) -> Interim page (I) -> External page (E)
The history version would be
S -> I -> S* -> E
Where S* is the url of S which has been inserted with pushState()
Obviously the better option would be to not have the interim page - maybe it would be better spending the effort on setting up S to do everything you need it to?

Detect Click On Iframe Then Do An Action

I want to add a iframe to my website that has a button in it and when someone clicks on it, it does an action like maybe forward to another page or echo a message. I don't care about the code whether its java, php, html, etc as long as it works. I'm good at coding certain things but this is not one of them, help me out please.
UPDATE:
the iframe is:
iframe src="http://ipget.tk" /iframe
when its clicked on I want it to go to google.com
the iframe will be on a test page on scazioco.com
Using Jquery you can bind an event to your IFrame :
$('#iframe_id').bind('click', function(event) {
window.location = http://www.google.com
});
Replace #iframe_id with the actual Iframe's ID

Validation using navigation

I have some pages in my website and a left menu control. Control helps to navigate from one page to another.
My query is -> While user try to navigate to another page, I want to impose some validation like in the current page if the form is not saved, user will be asked to save it by using a confirm messagebox and if user presses no button, then user will be allowed to navigate otherwise, system will first save the details and then navigate.
Edit - My page is a content page, I meant, this is using a master page.
Use the following steps
window.onbeforeunload = confirmExit;
and a function that stops/continue the page execution.
function confirmExit() {
var email= document.getElementById("email");
if (email.value != "")
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
The way I would do this is to have an onbeforeunload javascript event fire which gives the user the choice to save the form. I personally would also poll the form saving data back whist they are completing it. I think this is the method SO uses.
There is a pretty decent example over on Code Project that may help http://www.codeproject.com/KB/aspnet/AutoSaveFormData.aspx
EDIT:
If you only want to call the save method you can mark it with the [WebMethod] filter and call it using XmlHttpRequest or jQuery's $.post

100% code-behind form post

I am looking for a way to wire up an ASP:LinkButton to appear as a link but in the background (100% in the code behind, no dummy pre-filled form in the markup) do a form post (target=_blank). I have a form action, method and parameters to pass that I will query for in the "click" event of the LinkButton. What is the best way to accomplish this?
Well there are LOTS of ways to do what i think you are trying to do :)
One problem; standard pop-up's don't fire event handler calls as they are mapped via post-back to the page i believe.
If you are happy with GET only submissions:
OPTION A:
Add your link button with no target set and setup a post back event handler for click
setup your URL and pass it back to the page into a JS function that will load right away eg or use jquery etc.
in the JS function you load the URL using window.open() with the target set to "_blank"
EFFECT:
User clicks the link, all code is server-side that works out the URL to show, page refreshes back to where it was and a popup window then loads showing the new URL
OPTION B:
Setup the link to have target="_blank"
make it call a new page or the same page with a querystring argument you can pre-process in the page_load()
in the new page or controlling block of code, do your calculations and Response.Redirect() to the new target
EFFECT:
User clicks the link, no page refresh just a new popup right away with a redirect to the new page. This is a cleaner solution i think!
IF you need POST support:
Dynamically create either elements or a string of HTML representing a form with all the needed input elements and output it into the popup window (using option b as a rough start template) and have a onload submit the form right away which will perform a POST to the URL you decided via server-side script giving the same effect as option b but with a form level POST.

Resources