Dynamic REF parameter to Facebook Messenger Checkbox Plugin

I was trying to set a dynamic ref parameter to Facebook Messenger Checkbox Plugin but whatever I try it doesn't work. I want ref parameter to be the city from where user is visiting. Below is my code which I use on my website. Please tell me what is wrong in my code or is it possible ref parameter to be dynamic?

var geoApi = "http://ip-api.com/json/";
$.getJSON(geoApi, function(data) {
    var city = data.city;
    var enccity = "b64:" + window.btoa(city);
});

    window.fbMessengerPlugins = window.fbMessengerPlugins || {
        init: function() {
            FB.init({
                appId: "1678638095724206",
                xfbml: true,
                version: "v2.6"
            });
        },
        callable: []
    };
window.fbMessengerPlugins.callable.push(function() {
    var ruuid, fbPluginElements = document.querySelectorAll(".fb-messenger-checkbox[page_id='114293299247854']");
    if (fbPluginElements) {
        for (i = 0; i < fbPluginElements.length; i++) {
            ruuid = 'cf_' + (new Array(16).join().replace(/(.|$)/g, function() {
                return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"]();
            }));
            fbPluginElements[i].setAttribute('user_ref', ruuid);
            fbPluginElements[i].setAttribute('origin', window.location.href);
            fbPluginElements[i].setAttribute('ref', enccity);
            window.confirmOptIn = function() {
                FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
                    app_id: "1678638095724206",
                    page_id: "114293299247854",
                    ref: enccity,
                    user_ref: ruuid
                });
            };
        }
    }
});
window.fbAsyncInit = window.fbAsyncInit || function() {
    window.fbMessengerPlugins.callable.forEach(function(item) {
        item();
    });
    window.fbMessengerPlugins.init();
};
setTimeout(function() {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}, 0);