Browser popup blocked despite user clicking button to initiate it

Question

I have a button on my website which allows a user to login to their bank via Yodlee/Plaid using a popup login screen. The problem is the popup is being blocked by both safari and chrome on mobile. The popup works on the desktop. I have read that safari and chrome blocks all popups if a user has not clicked a button to initiate them or if they take longer than one second from the click event.

My problem is my frontend has to make a call to my backend to retrieve a token before initiating the popup. All this takes longer than one second, therefore, blocking the popup. I am fairly new to JS any input to resolve this issue would be much appreciate.

//makes call to backend to get yodlee access token 
function getAccessToken(){
    $.ajax({
        url: "/request/access-token",
        headers: {'X-CSRFToken': csrf_token},
        type: "POST",
        data: {'id': uuid},
        dataType: "json",
        context: document.body,
        success: function(data){
            var accessToken = data['access_token'];
            openFastLink();
      }
    });
}

//opens fastlink popup
function openFastLink(){
    window.fastlink.open({
      fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
      accessToken: 'Bearer ' + accessToken,
      forceIframe: true,
      iframeScrolling: true,
      params: {
        configName : 'Aggregation'
      },
      onSuccess: function (data) {
        alert('account linked!')
      }
    },
    'container-fastlink');
}

<button onclick="getAccessToken()">Link Account</button>

Answer 1

Your click is not activating the open, the ajax return is.

If you are sure the user will need the access token, just get it

I did not make an actual snippet because it will not run anyway here.

$(function() {
  let accessToken;

  $.ajax({
    url: "/request/access-token",
    headers: {
      'X-CSRFToken': csrf_token
    },
    type: "POST",
    data: {
      'id': uuid
    },
    dataType: "json",
    context: document.body,
    success: function(data) {
      accessToken = data['access_token'];
      $("#linkAccount").show()
    }
  });


  //opens fastlink popup
  $("#linkAccount").on("click", function() {
    window.fastlink.open({
        fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
        accessToken: 'Bearer ' + accessToken,
        forceIframe: true,
        iframeScrolling: true,
        params: {
          configName: 'Aggregation'
        },
        onSuccess: function(data) {
          $("#linkAccount").hide()
          $("#linked").show()
        }
      },
      'container-fastlink');
  });
});

.hide {
  display: none;
}

<button type="button" id="linkAccount" class="hide">Link Account</button>
<div id="linked" class="hide">Account linked</div>