Question

I’m attempting to get started with google wallet and am generating a jwt token via an ajax request.

When a user hits the purchase button it fires the purchase() function which in turn sends off some data to get the jwt using the get_jwt_token_for_user() function. I’ve set the ajax request to not be asynchronous to ensure that the jwt is sent to the google payments handler.

However the purchase() function seems to continue before the jwt is returned by the get_jwt_token_for_user() function. The log output shows that the numbers 1 and 2 are printed to console before the jwt is printed to the console from the get_jwt_token_for_user() function.

function get_jwt_token_for_user(the_key)
{
    var JwtTokenURL = "/get_jwt_token";
    var the_user_name = $('#user_name').val();
    var the_user_email = $('#user_email').val();
    var the_user_number = $('#user_number').val();
    $.ajax({ 
        type: "Get",
        url: JwtTokenURL,
        data: {user_number : the_user_number, user_name : the_user_name, user_email : the_user_email, the_d_key : the_key},
        async: false,
        success: function(result) {
            var myObject = JSON.parse(result);
            console.log(myObject.jwt_token);
            return myObject.jwt_token
        },
        failure: function(fail){ alert(fail); }
     });
}

function purchase(the_key)
{
    console.log("1");
    var jwt_token = get_jwt_token_for_user(the_key);
    console.log("2");
    if (jwt_token !== "")
    {
        console.log(jwt_token);
        goog.payments.inapp.buy({
            parameters: {},
            'jwt'     : jwt_token,
            'success' : successHandler,
            'failure' : failureHandler
          });
    }
}

Any idea what I can do to ensure that the ajax request has returned the data before the purchase() function marches on without the jwt value?

Answer 1

Your get_jwt_token_for_user function doesn’t return anything, you need something more like this:

function get_jwt_token_for_user(the_key) {
    //...
    var myObject;
    $.ajax({ 
        //...
        success: function(result) {
            myObject = JSON.parse(result);
        },
        //...
     });
     return myObject ? myObject.jwt_token : '';
}

Returning something from your success callback doesn’t cause that value to be returned by $.ajax and JavaScript functions do not return the value of their last expressions, you must include an explicit return if you want your function to return something.

You should also stop using async:false as soon as possible, it is rather user-hostile and it is going away. Your code should look more like this:

function get_jwt_token_for_user(the_key, callback) {
    //...
    $.ajax({ 
        type: "Get",
        url: JwtTokenURL,
        data: {user_number : the_user_number, user_name : the_user_name, user_email : the_user_email, the_d_key : the_key},
        success: function(result) {
            var myObject = JSON.parse(result);
            callback(myObject.jwt_token);
        },
        failure: function(fail){ alert(fail); }
     });
}

function purchase(the_key) {
    get_jwt_token_for_user(the_key, function(jwt_token) {
        if (jwt_token !== "") {
            //...
        }
    });
}