Visa Checkout Button in IFrame

[mz]

I'm trying to use Visa Checkout on a Facebook Messenger Webview (it's just an iframe with some Messenger APIs enabled). The key thing to note here is "iframe."

I have an example page that integrates with Visa Checkout with no issues when opened independently, but fails in an iframe.

The error message that I get is: Error creating payment request DOMException: Failed to construct 'PaymentRequest': Must be in a top-level browsing context or an iframe needs to specify 'allowpaymentrequest' explicitly

I can't control how Facebook Messenger generates the Webview. I am hoping there is a way to tell Visa Checkout to fall back to using something other than W3C's "PaymentRequest".

[mz]

Seriously, am I the only one in the world who needs to use the Visa Checkout button inside an iframe? FOR FACEBOOK WEB VIEW!!!

[API_Products · Accepted solution]

Hello,

Thanks for posting your question. The issue does not appear to be caused by Visa Checkout not functioning appropriately, but it  does look like an issue with IFrames. The mentioned DOM Exception occurs because the referenced URL is not from the same source as the application itself. However, I cannot comment on this issue directly, but there are several pages regarding the development for Facebook applications, and messenger applications that discuss the issue and a way around security limitations. Please try a Google search, and specifically search for sites related to the development for Facebook.

Thank you,

Diane

Visa Developer Team