httpbrowserfrontendpayment-request-api

GooglePay Error: "Must be in a top-level browsing context or an iframe needs to specify 'allowpaymentrequest' explicitly"

This has happened to me when I tried to add Google Pay via Stripe into my app. It has appeared only after deployment, not during local development.

The app does not use any iframes and the code is run in top-level browser context.

Solution

  • It turned out this was due to this permission policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/payment.

    I had Permissions-Policy: geolocation=(), microphone=(), camera=(), payment=(self). Removing the payment restriction allowed me to get rid of this error.

    I tried to find what origins to put there specifically to make Google Pay work well, but I could not find any good resources.