Problem:

I have ApplePay on my website (), it works and successefull pay.

Now I try to integrate IFrame (src=";) in subdomain () with form, which contains apple pay and get an error

Trying to start an Apple Pay session from a document with an different security origin than its top-level frame

Both sites used Https.

Main domain (with and without www) and subdomain verified in apple developer account.

Problem:

I have ApplePay on my website (https://www.example./order), it works and successefull pay.

Now I try to integrate IFrame (src="https://www.example./order") in subdomain (https://sub.example.) with form, which contains apple pay and get an error

Trying to start an Apple Pay session from a document with an different security origin than its top-level frame

Both sites used Https.

Main domain (with and without www) and subdomain verified in apple developer account.

• javascript
• iframe
• subdomain
• applepay

3 Answers 3

This error can be found in the webkit source

if (!ancestorDocument->securityOrigin().isSameSchemeHostPort(topOrigin))
    return Exception { InvalidAccessError, "Trying to start an Apple Pay session from a document with an different security origin than its top-level frame." };
}

isSameSchemeHostPort function checks that the protocol, domain and port of the iframe and page are the same

return a.protocol == b.protocol
    && a.host == b.host
    && a.port == b.port

As a result, the protocol, domain, and port of the frame and page must be the same to integrate iframe with ApplePay.

This just got fixed in https://github./WebKit/WebKit/pull/11485.

Once this fix is in, the allow attribute's domain config should be respected - eg. <iframe src="https://payment.example" allow="payment 'self'" /> should work now if the iframe is embedded into parent document hosted on a different domain, eg. https://host.example.

You can't use Frames with Apple Pay as it is considered bad practice