# Apple pay gives an error InvalidAccessError: Must create a new ApplePaySession from a user gesture handler

**URL:** <https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703>\
**Category:** Questions\
**Tags:** web-payments-sdk\
**Created:** [April 15, 2022, 6:54am UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703 "2022-04-15T06:54:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![noobmaster69](https://avatars.discourse-cdn.com/v4/letter/n/e95f7d/32.png) [@noobmaster69](https://developer.squareup.com/forums/u/noobmaster69)\
**Post date:** [April 15, 2022, 6:54am UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/1 "2022-04-15T06:54:38Z")

</div>

Hi, we are using Square SDK to offer Card, Google Pay and Apple Pay payments but Apple Pay is not working each time i click on button it ends up saying `InvalidAccessError: Must create a new ApplePaySession from a user gesture handler.` I couldn’t find anything in the docs to deal with it. I have followed the documentation which worked great so far for Card and Google Pay methods but Apple Pay doesn’t work.

Can someone help us, getting rid of this error.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [April 15, 2022, 3:50pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/2 "2022-04-15T15:50:34Z")

</div>

👋 Is this only with an iOS 13 device? If so it looks like there’s some new behavior you need to be aware of with the device from [this post](https://stackoverflow.com/questions/58242537/ios-13-apple-pay-button-click-throws-error-must-create-a-new-applepaysession-f). 🙂

---

<div class="post-metadata">

**Author:** ![noobmaster69](https://avatars.discourse-cdn.com/v4/letter/n/e95f7d/32.png) [@noobmaster69](https://developer.squareup.com/forums/u/noobmaster69)\
**Post date:** [April 15, 2022, 6:09pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/3 "2022-04-15T18:09:27Z")

</div>

Hi thanks for your response, actually this is happening on safari browser of a Macbook running Mac OS Monterey. I checked the link you attached, it has something related to apple pay but not really anything on Square web SDK and how to solve it within it. What exactly i need to do apart from standard integration based on your documentation of apple pay.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [April 15, 2022, 6:45pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/4 "2022-04-15T18:45:43Z")

</div>

Okay, thanks for clarifying where this is happening. Do you have the steps to reproduce and what’s your app ID? 🙂

---

<div class="post-metadata">

**Author:** ![noobmaster69](https://avatars.discourse-cdn.com/v4/letter/n/e95f7d/32.png) [@noobmaster69](https://developer.squareup.com/forums/u/noobmaster69)\
**Post date:** [April 17, 2022, 7:45am UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/5 "2022-04-17T07:45:31Z")

</div>

Our app id is `sandbox-sq0idb-INHD8MywK2CrHHZLQLk4Gw` and this is happening on the payment page when we click on Apple Pay button. This is how we initialise Apple Pay button. `private async initializeApplePay(payments, amount) { const paymentRequest = this.buildPaymentRequest(payments, amount); // Note: You do not need to`attach` applePay. return await payments.applePay(paymentRequest); }`

and we call it like this

```auto
const payments = window.Square.payments(environment.square.appId, environment.square.locationId);
    amount = amount.toFixed(2);

```

I have also attached the screenshot of the error for reference.

 ![Screenshot 2022-04-17 at 1.12.41 PM](https://global.discourse-cdn.com/square/original/2X/f/f4643dd71194194f3a6a6933afde05535c833bc2.png)

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [April 18, 2022, 6:25pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/6 "2022-04-18T18:25:26Z")

</div>

👋 The error your getting is an error reported by [Apple](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/creating_an_apple_pay_session).  
Are you not calling `applePay.tokenize()` from inside a user gesture handler such as `onclick`? Apple Pay can’t be triggered by a programmatic action alone. It has to be done directly from a handler triggered by a customer action. 🙂

---

<div class="post-metadata">

**Author:** ![noobmaster69](https://avatars.discourse-cdn.com/v4/letter/n/e95f7d/32.png) [@noobmaster69](https://developer.squareup.com/forums/u/noobmaster69)\
**Post date:** [April 19, 2022, 6:32pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/7 "2022-04-19T18:32:58Z")

</div>

@Bryan we doing exactly same i have added our function which gets called on button click it gets called on click and then it calls apple tokenize function :

```auto
  async applePayClicked() {
        console.log('Apple Pay Click Handler');
  this.paymentMethod = 'Square-ApplePay';
    try {
      // disable the submit button as we await tokenization and make a
      // payment request.
      this.cardButton = true;
      // Create an instance of the loading spinner and pass the message we want this spinner to have
      this.processingSpinner = this.createLoadingSpinner(
        'Submitting Order<br>Please Wait...'
      );
      await (await this.processingSpinner).present();
      const token = await this.tokenize(this.paymentService.applePay);
      await this.placeOrder(token);
    } catch (e) {
      this.cardButton = false;
      //displayPaymentResults('FAILURE');
      console.error(e);
      this.displayPaymentError('ApplePay');
    }
  }

```

And then this function gets called from HTML like this :

```auto
   <div id="apple-pay-button" (click)="applePayClicked()" #applePay></div>

```

What can be wrong in this. Can you please guide us.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [April 19, 2022, 9:51pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/8 "2022-04-19T21:51:06Z")

</div>

A few things we need clarity on. First:

```auto
const token = await this.tokenize(this.paymentService.applePay);

```

what is `this.tokenize` and `this.paymentService.applePay` ?

Second:

```auto
<div id="apple-pay-button" (click)="applePayClicked()" #applePay></div>

```

Is that `(click)` an event handler definition? Also what framework are you using? 🙂

---

<div class="post-metadata">

**Author:** ![noobmaster69](https://avatars.discourse-cdn.com/v4/letter/n/e95f7d/32.png) [@noobmaster69](https://developer.squareup.com/forums/u/noobmaster69)\
**Post date:** [May 2, 2022, 6:19pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/9 "2022-05-02T18:19:54Z")

</div>

Hi @Bryan-Square, sorry for delayed response, this click event is click event handler and we are using Angular 12. Also i have a good news, i was able to fix the issue myself. I just checked and found as soon as user clicks on apple pay button we were calling applePayClicked function which basically calls square SDK to create apple pay token using this function  
`const token = await this.tokenize(this.paymentService.applePay);`  
but i just realised we were also creating a progress bar to avoid any more clicks to the Apple Pay button before calling it and this statement was using `await` this statement was creating progress bar asynchronously and then only creating token.

I read somewhere (in a stack-overflow answer) that apple Pay Doesn’t like await after apple pay button is clicked. So i simply removed promise and continued to call `tokenize` function and it just worked.

**So basically solution is to remove any async call in the click function of Apple Pay button, there should not be any kind of delay between clicking the function and calling token method of apple pay.**

So as per my understanding, if there is time difference between Button click and token create statement then Apple Pay assume that this was not button click and hence it was behaving like this. I really suggest this should be added somewhere in Documentation (a warning or note) to inform other devs, so they can avoid this error as it is not clear at all.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [May 2, 2022, 6:29pm UTC](https://developer.squareup.com/forums/t/apple-pay-gives-an-error-invalidaccesserror-must-create-a-new-applepaysession-from-a-user-gesture-handler/5703/10 "2022-05-02T18:29:58Z")

</div>

Thanks for sharing your findings! 🙂