Integration and Testing

[jlanawalt]

I am trying out the Hosted Form option of the Customer Information Manager (CIM) using the Lightbox style method. I can Add and Edit Payment Information and the lightbox forms look similar to the ones in the PDF documentation. When I attempt to manage payment and shipping using AuthorizeNetPopup.openManagePopup(), the window lacks the outer grey border, the lower Powered By Authorize.net logo and the close (x) button in the upper right corner so I have to reload the page to get the form to go away.

Invoking the pop-up seems pretty straight forward and I am using the same page that works for the Add and Edit buttons. This is how I am invoking the manage popup:

<button type="button" onclick="AuthorizeNetPopup.openManagePopup()">Manage Payment Profiles</button>

The rest of the sample code using the contentx folder is in place, including the IframeCommunicator.html file, and it is accessable at the same domain as the hosting page. This is the URL I am sending for hostedProfileIFrameCommunicatorUrl: http://localhost:5003/customers/contentx/IframeCommunicator.html

What else would make the window not show the close button?

[jlanawalt · Accepted solution]

The extra images and style references are all in hostedProfileManage.zip. I was just using the hostedProfilePaymentsShipping.zip example code. 

If the only difference between the two were a couple of non-conflicting style sheets I would just add the extras and call it good. There are differences in the same-id divAuthorizeNetPopup in the examplePage.html file that seem like it wasn't setup to mix Manage with Edit/Add buttons on the same page. It seems like they could be all merged together but for now since the designer at Authorize.net decided to not mix them, I will not mix them.

[nik_0811]

Increase the height of the pop up from popup.js which is present in the contextx folder. Save and cancel buttons will be visible.

For close I think you are missing the URL of the image for close button.

[jlanawalt]

I've tried changing up the sizes in popup.js, but it acts like they are overridden by IFrameCommunicator.html, or perhaps by https://secure.authorize.net/profiles/styles/manage.css. The window appears for a moment at the much larger size I specify, and then it resizes back to the same size it always appears at.

I am not convinced this is the problem though. The profile I am managing has one payment information and no shipping information. After the Shipping Information header there is about three times as much white space as it takes to display the one payment information, and when I hover over elements in Chromium's Elements inspector I can see other elements after the span titled "Powered by Authorize.Net" with space to spare.

Speaking of manage.css, it sets .BottomBar display to none. As I inspect the elements, the div with the Powered class is nested in the div with the BottomBar class between the .MainContent_divMainPanel div and the .BottomBarAfter div. Those two elements and the .divIFrameCommunicator div highlight areas on my page as I inspect them. .BottomBar div does not. If I dynamically change .BottomBar to display inline, it appears with it's powered_simple.png background image, placed after the shipping information block but not at the bottom edge of the lightbox iframe.

I am not seeing the code that is suppose to change .BottomBar to make it visible. What is suppose to happen to make this show up at the bottom of the iframe?

I don't see anything that looks like a close button in the images included with the lightbox sample in the contentx folder. I also don't see anything that looks or sounds like a close button in manage.css or profileCommon.css or anywhere in the dynamic content stuffed into iframeAuthorizeNet when it pops up for manage.

What is the URL for the close image? What is the source of the code that should be including it?

[jlanawalt · Accepted solution]

The extra images and style references are all in hostedProfileManage.zip. I was just using the hostedProfilePaymentsShipping.zip example code. 

If the only difference between the two were a couple of non-conflicting style sheets I would just add the extras and call it good. There are differences in the same-id divAuthorizeNetPopup in the examplePage.html file that seem like it wasn't setup to mix Manage with Edit/Add buttons on the same page. It seems like they could be all merged together but for now since the designer at Authorize.net decided to not mix them, I will not mix them.