6

I recently started integrating Apple Pay into my website which actually loads the payment view in an iframe. Here the catch is my iframe loads in a different domain than my website. I followed the developer.apple.com site to integrate the Apple Pay into my website and created all the certificates and identifiers necessary.

Actual issue is when I'm trying to create the Apple Pay session, I'm receiving an error InvalidAccessError: Trying to start an Apple Pay session from a document with an different security origin than its top-level frame." I've not seen anyone facing this before.

Below is the code that I tried to create the Apple session.

var merchantIdentifier = 'my merchant identifier registered in developer account';
var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
var canMakePayments = false;
promise.then(function (canMakePayments) {
    if(canMakePayments) {
        var session = new ApplePaySession(3, request);
    }
}, function(error) {
       alert(error);
});

As soon as the canMakePayments true line hits the code is trying to create an ApplePaySession and that is where I'm receiving the error.

Dharman
  • 30,962
  • 25
  • 85
  • 135
iOS dev
  • 470
  • 7
  • 23
  • Hi @iOS dev I've stumbled onto a similar problem. Did the below solution work ? And specifically did you have control over the top-level domain to setup any of the apple verifications or was it not necessary ? – noob Mama Jan 31 '22 at 19:14

2 Answers2

5

Only way is running some JS on the top frame and communicate between them using messages.

E.g. in the top frame

window.addEventListener('message', (event) => {
  if(event.data.type === 'applepay') {
    const session = new ApplePaySession(...);

    ...

    session.onpaymentauthorized = (event) => {
      event.source.postMessage({ type: 'paymentauthorized', payment: event.payment});
    }

  }
});

in the iframe

window.addEventListener('message', (event) => {
  if(event.data.type ==== 'paymentauthorized') {
    // do something with the event.data.payment data you received
  }
});
iframe.postMessage({type: 'applepay' });
Lemnis
  • 462
  • 3
  • 13
0

late answer to your question but I have created a Pull Request in the WebKit (Safari) repository to fix this issue, feel free to comment and suggest more!

https://github.com/WebKit/WebKit/pull/11485

Zeswen
  • 261
  • 4
  • 12