6

Working on a website that has been integrated with Apple Pay for about a year now with no issues. We are noticing that we are always getting an error now for iOS 13 devices only. iOS 12 and under all work as expected.

Front end click handler:

<div class="btn btn-apple">
  <div class="apple-pay-button apple-pay-button-white" lang="en" data-bind="click: intializeApplePaySession"></div>
</div>

JS click handler:

self.intializeApplePaySession = function() {
  new RestClient(RestClient.POST, "/rest/model/someController", {},
    //Success
    function(data, textStatus, jqXHR) {

      var session = new ApplePaySession(3,data.applePayPaymentRequest);
      initializeCallbacks(session);
      session.begin();
    },
...

"Must create a new ApplePaySession from a user gesture handler." is always thrown at

var session = new ApplePaySession(3,data.applePayPaymentRequest);

for all iOS 13 devices. iOS 12 and below work fine with the same code.

From my debugging I can see that the event being handled is a MouseEvent which makes sense to me. Any ideas as to why this is being thrown?

4 Answers 4

6

We are evolving away from letting websites make cross origin calls without the user's input.

One of the ways this has been locked down for a while is that you can't fire, for instance, a submit button for a form... unless you do it from a click() handler. So you can put a big shiny "Buy now" image on the page and submit the form from clicking on that image, but you can't just do a setTimeout(form.submit(), 100)

I think you've got the same class of thing going here. The REST call is in the click handler, but the apple pay call is in the callback to the REST call, and therefore not really in the click() handler.

Of course you're using the REST call to generate the data to pass to Apple. You may have to generate that data speculatively. But before doing that infrastructure work, I'd experiment with whether an async version of your click handler passes their sanity checks.

2
  • Spot on. Looking at that click handler, you could probably get away with initializing the RestClient as soon the viewmodel loads (and save the data it returns), since the handler doesn't seem to pass any purchase-related data to the RestClient anyway. Then the code that is now in the success callback would become initializeApplePaySession. Commented Oct 5, 2019 at 9:54
  • Thanks both Jason and Brother Woodrow, this actually makes sense. I can definitely decouple the Rest call from the creation of the Apple Pay session. I will try this out.
    – Paul Hoke
    Commented Oct 5, 2019 at 21:04
1

Working snippet following discussion with Jason and Brother Woodrow

Synchronous function to call backend and get current cart details. The reason we previously had this in the success callback is because we are using a SPA framework so the cart can change at any time. We cannot call this when the page loads or the data may be stale.

self.getApplePayData = function() {
  var self = this;
  new RestClient(RestClient.POST, "/rest/model/getApplePayPaymentRequest", {},
    function(data, textStatus, jqXHR) {
      self.applePayData = data;
    },
....

 self.intializeApplePaySession = function() {
  var self = this;
  self.getApplePayData();
  var session = new ApplePaySession(3,self.applePayData.applePayPaymentRequest);

I think the key issue is that we were creating a new ApplePaySession from within the success callback of the rest call which Apple does not seem to want to be possible anymore.

4
  • Did you try async? Or does your browser base not allow ES6?
    – Jason
    Commented Oct 7, 2019 at 19:27
  • @Jason It appears that async isn't working for this.
    – gillytech
    Commented May 30, 2022 at 2:49
  • I don't see how that can work if there is no async or callback. I tried to emulate this in my own app and I'm not seeing any different result.
    – gillytech
    Commented May 30, 2022 at 3:09
  • I tried making my own initializer function async, and then doing an await on the server call, but it made no difference. I wish Apple would simply go back further in the call stack so that they realize the whole thing was indeed initiated by a user gesture. Oh, well. I'll just have to make the server call earlier on in the process, outside of the click handler.
    – Aquarelle
    Commented Apr 9 at 23:24
1

Reference from the official documentation

You attempt to create the ApplePaySession outside of a user gesture handler. The exception error "Must create a new ApplePaySession from a user gesture handler" appears.

So in your case, you must create an apple pay session like

session = new window.ApplePaySession(version, request);

then create a request to the server and receive a response.

const data = async getSomeCheckoutData();

and you can proceed with payment throw apple pay

...
session.begin();

The main idea, it's, first of all, create a session. Then you can do requests and after it start apple pay session.

2
  • Best Answers which actually worked as variables like session, request all needs to be created in the click handler method itself.
    – vibs2006
    Commented Feb 2, 2022 at 11:34
  • This answer fails to understand that he needs the data from the server before he can create the Apple Pay session.
    – Aquarelle
    Commented Apr 9 at 23:22
1

You must declare ApplePayInstance variable above class, to trick apple pay session, so that it consider it as gesture, Also don't call in promises

http://baiduhix.blogspot.com/2018/06/must-create-new-applepaysession-from.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.