Stripe Elements fail to load in CMS preview

When loading the credit card details page in the CMS preview (the developer website inside iframe: 2 views: draft & published, plus links to liquid templates used in view) the stripe.js library throws the following error:

Uncaught Error: Live Stripe.js integrations must use HTTPS. For more information: https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements
    at new t ((index):1)
    at e.value ((index):1)
    at new e ((index):1)
    at qs ((index):1)
    at about:srcdoc:254

This appears to be due to the way we setup the preview iframe via srcdoc and not via an https source.

The stripe element never loads because of this.

This is because it is the preview page of the dev portal
Old issue in the w3c https://github.com/w3c/webappsec-secure-contexts/issues/5

Dev notes

• We should display some warning messages for the payment gateways that could not work in our preview iframe.
• Try it with a real `src` using a new route like <iframe src="/preview/templates/2"> instead of srcdoc.

Possible solutions

Instead of using an Iframe we could inject the CMS Toolbar Preview after rendering the page in a rack middleware or after_action
This will mean redoing the entire preview system: Replacing the iframe + toolbar by a simple page and a div rendering the toolbar.

Another possible but questionable solution:

• extract the billing logic into a self contained object (meaning no logic in the controller), basically like the spam check
• add a setting in admin portal for where this object is available (path and method)
• Allow the customer customize this path