Paystack Popup blocked by SAMEORIGIN policy

[ayomide865]

Hello Paystack.

We use your Paystack Popup InlineJS library to accept payments on our web application. Up until recently it's been working fine. But our customers sometimes report issues during the billing flow. We successfully reproduced the issue.

We didn't see any official Github repo for the library, so we're reporting it here.

Main Cause

During the initialization of the popup, the request to checkout.paystack.com has one of its response headers, X-FRAME-OPTIONS, sometimes set as SAMEORIGIN and this is why the browser refuses to render it as the sameorigin policy would require the popup to only display on *.paystack.com websites. Please note that we followed the InlineJS guide linked above and it has always worked. Just that recently, and randomly, we sometimes get the issue. So, we were wondering if it was something you were aware of and how we can proceed.

Console Error

WebPage

Thanks.

[ayomide865]

Want to add that I've also read the troubleshooting tips here, and the issue still persists.

After playing around again, I believe this issue is happening due to your recent change to use CloudFlare for Traffic Protection. Sometimes, the popup doesn't load at all. The vendor-js, index-js, and index-css files are being blocked by CloudFlare, it seems.

If, however, I directly go to the url, I'm met with a CloudFlare challenge, and after solving it, it opens the correct web asset after solving. The Popups cannot organically solve the CloudFlare challenge, so I believe this is an issue. Or maybe there's an extra step now that the CloudFare update is in place?