CIM - Implementing the onPopupClosed function after showing hosted popup

[Talentville]

Not being a javascript expert (much better at php), I was wondering if anyone had some sample javascript code that I could modify to be able to process the results from whatever the user did in the popup, mainly creating or editing a payment profile ( I am using theCIM  hosted popup).

Obviously I need to call a function to get the profile so that I can show the new values on the screen when the user has clicked on the Save button from the Edit or Create popups, then I guess I would have to redraw either the div containing the current payment info or perhaps just redraw the entire screen so that the widget updates to show new values if entered.

The key is to use the popup to let the user change their credit card info, then to update my DB with either the new payment profile ID or just to update the screen to use new info entered for an existing profileID (if they were editing their profile instead of entering one for the first time).

[TJPride]

Maybe this (untested)?

AuthorizeNetPopup.options.onPopupClosed = function() {
    window.parent.location.reload();
};

[Talentville]

That might work if I just need to redraw the screen, but if the user entered a new payment profile in the popup, I need to retreive that ID and save it in my own database.  I have a table that stores Customer ID and their associated payment and shipping ID (I only let users have one of each to keep it all simple).

If I were using the XML calls to create a new profile, I know that the XML would return the new payment profile ID (assumingI used the createpayment function of course), making it easy for me to take it and save it in my DB, but using the popup, while giving me that ability to pass off all card numbers to Authroize.net, does not seem to return a value for me to just save.  

So, are there return values of any sort when the popup is successfully closed?  Or, if I have to call a routine to use the XML to get the customer profile, extract the payment ID and then save it, I would do that, but that seems to be a roundabout way to get the job done.

Clearly I use different onclick functions to make the correct popup contents show up (manage, edit, add, etc), so the hope here is that the results of what the user did in the popup would be easy to find and extract.

[TJPride]

If you were using XML to create a new profile, you'd be using regular CIM and not hosted CIM. The documentation for hosted CIM says:

The merchant calls Authorize.Net API method GetCustomerProfileRequest to see what changes were made by the customer
− Input: customer profile ID
− Output: list of payment profiles with sensitive fields masked, list of shipping addresses

Here's the XML input for that:

<?xml version="1.0" encoding="utf-8"?> 
<getCustomerProfileRequest 
xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd"> 
  <merchantAuthentication> 
    <name>YourUserLogin</name> 
    <transactionKey>YourTranKey</transactionKey> 
  </merchantAuthentication> 
  <customerProfileId>10000</customerProfileId> 
</getCustomerProfileRequest> 

 In the PHP API, you can also call the function getCustomerProfile($customerProfileId) in the AuthorizeNetCIM class.

[Talentville]

TJ,

No, I am not using the XML for that, I want to use the hosted popup for all of that so I never have to handle credit card data.  In reality, the hosted popup does all the validation as well (I believe), so when it returns, if there is a new payment profile, I will know it has passed at least some tests.

I know how to call teh XML, and if as I said in the previous email, getting the new profileID is easy if I were using that, but with the hosted popup, I have to use the onPopupClose function, but I need that function to call something to update my internal DB with the new (or updated) credit card info and then redraw some or all of the screen to show the new info so that the user knows that the payment profile has been entered or updated.

Since I am no javascript and AJAX expert, I was hoping someone would ahve some sample code that implements the onpopupclose function that is attached to the javascript that runs the popup.  

I think I should be using a $.post or $.ajax call somehow to trigger a call to a php function that updates my internal DB, and when that finishes, I would refresh the screen or at least the div that contains the textual payment info that I show on the screen near the "Edit Payment Info" link.

This is probably standard ajax and java code, but I an not versed enough in either of those to construct a simple post call to get the updated info and save it prior to refreshing my screen.

[TJPride]

If there's an equivalent to the getCustomerProfile() function in your API (Java?), you ought to be able to just have your page call it, update the db, then display the person's info as normal. To tell your page that it needs to update first, you can have the onPopupClosed pass a GET argument:

AuthorizeNetPopup.options.onPopupClosed = function() {
    window.parent.location.assign(
        window.parent.location.pathname + '?update');
};

 Then just have your page check the query string to see if it equals 'update'. If it does, then do what I said above.

[Talentville]

TJ,

Well, it is not very elegant, but perhaps your suggested code will get the job done.  Refreshing the whole screen is not the greatest way to do it, but I am not quite sure I have the ability to figure out how to segregate the proper div by ID and then use AJAX to just update the single area of the screen without a complete redraw.  Perhaps I can find some other code from my site that uses ajax to taget a div and then separate the html for that widget in a file that gets called upon completion of the popup.  If I have to add a GET to each screen that has a link to the payment updating and editing, with a call to the CIM XML function if update is set, well, at least it is a solution. 

I am a bit surprised that the popup callback function does not include any variables such as the payment, customer or shipping ID.  That is what I was hoping for, that the hosted popup would send the callback function the key info about what was done.  That seems strange, that a generic no-parameter callback would be used, especially since there are not that many variations on the popup contents:  create, edit and manage.

[TJPride]

Well, the GET method isn't that bad if you change it to a format of pagename?u=billing - that way you only have to check a single value and run the appropriate update routine. I doubt your page is huge enough so refreshing the whole thing vs just a part of it makes any appreciable difference. FYI, here's the AJAX code I use:

function encodeData(data) {
    var key, parts = [];

    if (data)
        for (key in data)
            parts.push(key + '=' + encodeURIComponent(data[key]));
    return parts.join('&');
}

function sendRequest(page, data, callback) {
    var httpObject, params;

    if (window.ActiveXObject) 
        httpObject = new ActiveXObject('Microsoft.XMLHTTP');
    else if (window.XMLHttpRequest) 
        httpObject = new XMLHttpRequest();
    else {
        window.alert('Your browser does not support AJAX.');
        return;
    }
    
    var params = encodeData(data);

    httpObject.open('POST', page, true);
    httpObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpObject.setRequestHeader('Content-Length', params.length);
    httpObject.setRequestHeader('Connection', 'close');

    httpObject.onreadystatechange = function() {
        if (httpObject.readyState == 4 && httpObject.status == 200)
            callback(httpObject.responseText);
    }
    httpObject.send(params);
}

var ajaxLoaded = true;

 The send code:

sendRequest('/ajax-page.php', {
    'arg_name' : arg_value
}, displayResults);

 The results function:

function displayResults(results) {
    // Do something with data passed
    // by AJAX page
}

To make things really simple, I generally just have the AJAX page generate a block of HTML, then use innerHTML to load it into a div. Perhaps not the most elegant method, but it works.

[wbr]

There still doesn't seem to be an answer to the OP's question regarding how do we know what caused the popup to close.

Did the user click X, Cancel, or Save? If they clicked Save, what happened? Success? Failure? What was saved if success?

Without any of this information, our only option is to do a dumb reload of the entire page. Reloading the page when the user clicks Cancel is bad form, and it will likely anger our users. And doing any page reloading at all kinda defeats the purpose of having these fancy popups to begin with.

Please tell me I'm missing something here and that there is a clear way to get information about why the popup was closed.

[TJPride]

Reloading the page is only a problem if you didn't design it specifically for reloading. I've never had a problem with it. If you have another form on the page, just use document.forms.myformname.submit() instead of telling the page to reload.