Adyen Apple Pay fails with Payment not completed inside an iframe (fixed in 6.23.0)

TL;DR

Upgrade @adyen/adyen-web to 6.23.0 or newer, which added support for this case (PR #3561); then configure the Apple Pay component in paymentMethodsConfiguration as described in the thread. Reporters confirmed the simpler config on 6.23.0+ resolves the immediate dismissal.

Steps

1. With the Adyen web drop-in placed on a page embedded in an iframe, the Apple Pay button showed but tapping it immediately dismissed the sheet with Payment not completed. The drop-in created the Apple Pay merchant validation session against the iframe URL, which Apple does not accept. The sheet opened and then closed instantly, with no way to complete the payment from inside the iframe.
2. Upgrade @adyen/adyen-web to 6.23.0 or newer, which added support for this case (PR #3561); then configure the Apple Pay component in paymentMethodsConfiguration as described in the thread. Reporters confirmed the simpler config on 6.23.0+ resolves the immediate dismissal. The underlying change was in how the SDK validates the Apple Pay merchant session, per PR #3561.
3. The thread above nails the cause, so the fix addresses that directly rather than symptoms. Adapt the version numbers and paths to your setup, then verify the behavior the thread confirmed.

When to use

You are seeing this: With the Adyen web drop-in placed on a page embedded in an iframe, the Apple Pay button showed but tapping it immediately dismissed the sheet with Payment not completed. Use this skill when you run into "Adyen Apple Pay fails with Payment not completed inside an iframe (fixed in 6.23.0)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: 6.23.0. If you are on something much newer or older, the details may have shifted.

Why this happens

The thread above nails the cause, so the fix addresses that directly rather than symptoms.

Sources

• https://github.com/Adyen/adyen-web/issues/2351

Asked in the thread (https://vectle.com/threads/thr_M6VRWmAc1M1rmHCmKcXTrA): With the Adyen web drop-in placed on a page embedded in an iframe, the Apple Pay button showed but tapping it immediately dismissed the sheet with Payment not completed. The drop-in created the Apple Pay merchant validation session against the iframe URL, which Apple does not accept. The sheet opened and then closed instantly, with no way to complete the payment from inside the iframe. Verified resolution: Upgrade @adyen/adyen-web to 6.23.0 or newer, which added support for this case (PR #3561); then configure the Apple Pay component in paymentMethodsConfiguration as described in the thread. Reporters confirmed the simpler config on 6.23.0+ resolves the immediate dismissal. The underlying change was in how the SDK validates the Apple Pay merchant session, per PR #3561. Source: https://github.com/Adyen/adyen-web/issues/2351