Reply
Highlighted
Regular Contributor
Posts: 72
Registered: ‎07-06-2011

Almost got it.. one final hump to get over

I've pretty much managed to get all of the CIM system working on our site.

 

The only thing that is still not working correctly is the IFrame popup window that opens when a customer needs to add/modify their payment information.

 

The window comes up correctly,  and it appears the customer can add/modify their data correctly,  but when they push the button that is supposed to return them to our site,  that's where it goes all wrong..

 

The specific page they are supposed to be sent to does load.. but it loads inside the IFrame.

It's supposed to close the IFrame and return the user to our specified URL in the main window.

 

I've spent the whole day trying various workarounds to this, including having an onload event in the page that comes up to (at the very least) force the Iframe window to close.   But even with the onload event handler set to every setting I can think of (trying to close the 'top', the 'parent' using the name of the IFrame itself, etc..)  nothing happens.  The page just loads into the IFrame.

 

The only way to get the IFrame to close is to hit the 'X' at the top left of the IFrame box. 

 

What I've done thus far is just put "Please click the X at the upper left of this box" on the resulting page that shows up inside the IFrame.

 

Kind of clunky..  and doesn't do much good to try to automatically reload the customer's payment profile information when they are done.

 

Is this actually broken, or am I missing something?

 

Thanks,

WHeis

 

Highlighted
Regular Contributor
Posts: 72
Registered: ‎07-06-2011

Re: Almost got it.. one final hump to get over

[ Edited ]

I was asked why I would really 'care' that the customer has to push the 'x' at the top left of the screen to close the popup.

 

The button on the screen that gets set up when I set the hostedProfileReturnUrlText and hostedProfileReturnUrl through the getHostedProfilePageRequest call triggers a specific page and functions on my site.  It runs the getCustomerProfileRequest call so our system can find out what the customer added/modified/deleted while using the CIM popup.

 

If a customer makes changes and then just clicks the 'X' to close the IFrame popup,  without clicking the generated button, the page that was set up using the hostedProfileReturnUrl setting wont load - so we cant update the record at our end to reflect any changes that were made.

 

I can see in the popup.js file an optional setting to run whatever function I may need if the 'X' is clicked,  by setting the AuthorizeNetPopup.options.onPopupClosed = function() attribute within that page.

 

I've tried a variety of things to get that to work, but thus far haven't found anything at all that does.  I think the problem may be because I need the function to work in the original window the IFrame was called from.  I've tried using 'parent' and 'top' within the function attribute to target the function to a page... but nothing has worked.

 

Basically all I need is for the function to refresh the originating page (I.E. popup-start.htm) and add variables that were passed through the IFrame.

 

So, when the X is pushed, the main window refreshes to something like  "popup-start.htm?customerProfileId=1234&profileManage=done"

 

The customerProfileId part of that allows me to keep track of the customer using the system,  and the profileManage=done tells the system that the customer just got back from the CIM system and we need to go check for any changes that were made.

 

Still.. it would be wonderful if the actual button created on the IFrame just sent the user back to the originating (parent) window to the URL I specified.   I could easily have the word "Close" put on that button, and then remove the 'x' at the top of the screen completely.   That way the user would have no choice but to push the button.

 

 

Highlighted
Regular Contributor
Posts: 72
Registered: ‎07-06-2011

Re: Almost got it.. one final hump to get over

Got it :)

 

Not sure why it wasn't working before.. I'm sure I tried this method previously and got an error.

 

AuthorizeNetPopup.options.onPopupClosed = function redirect()
    {
        location.replace("http://www.mydomain.com/mypage.cfm?variable_1=#variable_1#&variable_2=#variable_2#&CIMdone=1");
    }

 

The page that called the IFrame is reloaded and the variables passed correctly :)

 

If mypage.cfm detects the CIMdone=1 parameter in the URL string,  it can run whatever code I want it to.

 

Too bad the hostedProfileReturnUrl button doesn't close the window.   You'd think that would be simple enough to accomplish using a window.close() function.

 

What sense does it make to keep the user in the IFrame window if they are done using it?

 

/frustrated, but happy there is a clunky workaround

Highlighted
Regular Contributor
Posts: 72
Registered: ‎07-06-2011

Re: Almost got it.. one final hump to get over

[ Edited ]

Ok.. solved it.   Not the way I wanted to,  but it works :)

 

In the getHostedProfilePageRequest XML, I removed the two settings for hostedProfileReturnUrl and hostedProfileReturnUrlText.

 

This had the effect of making no button at all show up inside the IFrame.

 

I then changed the Manage.css file.   Specifically I altered a couple lines within it to look like this:

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose { position:absolute; right:165px; top:7px; }
.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a {
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	display: inline-block;
}

 

 In that bit of code,  I have changed the position to  right:165px;  (explained in a moment).   I also removed ALL references to the closebutton.png file

 

Within the actual page that calls the IFrame,  I made a change to one line.

 

 In the line that stores the a href tag,  I changed it to read this:

<a href="javascript&colon;;" onclick="AuthorizeNetPopup.closePopup();" title="Close">Click&nbsp;Here&nbsp;When&nbsp;Finished&nbsp;[<b>X</b>]</a>

 

The reason the manage.css file was changed to say right:165px; (described earlier) is so that the text from the above change would fit in the window properly.

 

Additionally, on the page that calls the IFrame,  I added this to the script code on the page:

AuthorizeNetPopup.options.onPopupClosed = function redirect()
    {
        location.replace("http://www.mydomain.com/my_file.cfm?variable_1=#value_1#&variable_2=#value_2#&CIMdone=1");
    }

 

That code causes the page listed in the location.replace string to load up on the users screen when the "Click Here When Finished" text is clicked on the IFrame.

 

On that resulting page,  I run whatever API calls I need to get the most recent data from the CIM system.

 

IFrame closes with 1 click = Yes :)

Button within the IFrame displays = No :)

Customer is redirected to the correct page when the IFrame closes = Yes :)

Customer is confused as to why there are two different buttons to push = No :)

Customer pushes the wrong button = No :)

 

Solved :) :)

 

WHeis