Why Google Pay doesn't work from iPhone Safary after an ajax request?

I try to add a Googla Pay button on a website. I follow the Google Pay implementation tutorial (https://developers.google.com/pay/api/web/guides/tutorial).

There is a code:

var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
    .then(function(response) {
        //...
    })
    .catch(function(err) {
        //...
    });

I need to get some data from my server side before I call the above code so I do the http post request. Within success hanlder of my post request I call the above code. It works fine in my Android browser and my laptop browser. But it doesn't work from Safari. I get the "Unexpected developer error please try again later" error. If I call it without ajax request it works in Safari as well. Could someone suggest the solution?

Thanks for including the jsfiddle.

The reason that it's not working is because Google Pay tries to open a popup window when you call loadPaymentData in Safari. When a new window is triggered as the result of a click event (user initiated action), the popup window opens as expected. When it is triggered by a non-user initiated action, Google Pay gets loaded in the same window which ends up causing it to fail.

It looks like when you make an ajax request in the click handler and then call loadPaymentData, Safari considers it a non-user initiated action.

Check out the following example in Safari:

const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');

ajaxButton.addEventListener('click', event => {
  $.get('/echo/json/', () => {
    window.open('about:blank');
  });
});

nojaxButton.addEventListener('click', event => {
  window.open('about:blank');
});

I would recommend avoiding making any http calls on the button click event before loadPaymentData. If you can fetch the data before the button is clicked, then do so.

Out of interest, what kind of data are you fetching?