Getting "show() was not triggered by user activation" when I am fetching data required for creating payment request

Hello, I am implementing apple pay using paymentrequest api. But when I try to fetch some data and await for the data fetch to get complete it throws error " show() was not triggered by user activation" Here's the code I have:

// this function is called on click of apple-pay-button
const onApplePayButtonClicked = async () => {
   if (!window.PaymentRequest) {
      return;
    }
 try {
   const data = await getData();
  // consider paymentMethodData, paymentDetails, paymentOptions to be some mock data for now I will update it as per data fetched
  const request = new window.PaymentRequest(paymentMethodData, paymentDetails, paymentOptions);

      const response = await request.show();
      const status = 'success';
      await response.complete(status);
    } catch (e) {
      // Handle errors
      console.log('Received error', e);
    }
}
// getData function
function getData(){
return window
    .fetch(`${mockUrl}`, {
      method: 'GET',
      headers,
    })
    .then(response => response.json())
    .catch(err => console.error(err));
}

Any help would be appreciated. Thanks!