Hi Vadim,
No scripts are allowed to be executed on the checkout page due to security policies. Can you clarify your use case and why it would require a script on the checkout page, so that we can see if there are any alternatives?
What I am actually trying to achieve with the JS, is to get the height of the iframe so I can resize that parent page properly.
This is what the iframe-resizer is doing (https://github.com/davidjbradshaw/iframe-resizer) sending the iframe page coordinates to the parent.
Do you already have a solution how to properly embed the whole checkout page properly, as this is working for you somehow in the theme preview.
Usually the iframe checkout page container gets the height information from parent page and is set using that. Any reason why you would need to do the reverse here?
In case you had not referred earlier, here's a sample tutorial on implementing embedded checkout page using iframes. Are you trying this?
I was looking into using the same script for the same purpose. In response to the last comment on here from Lakshmi, I've found that the iframe height sent to the onLoad callback is often far taller than I'd like. Can you tell us more about how that height is calculated? Is there anything that we can do in our code to get a height that more accurately represents the content of the iframe?
Hi Kai
The onLoad callback sometimes does not give correct height as it depends on DOM rendering. The onResize callback on the other hand, works well for adjusting height. Could you try using the onResize callback as per this example and let me know if that helps?
VadimBauer
Hello,
I am not able to add java script to the Theme. What I actually did was adding <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js"></script> in the head of the page.
but on the final page the script is removed or not displayed.
For reference I added a meta tag just above the java script with this content
<meta name="template_html" content="checkout.html"> and this meta tag is correctly in the final checkout page. Could you tell me what am I doing wrong?
<!DOCTYPE html> <html> <head> <!--Page title--> <title>{{{checkout.page_title}}}</title> <!--Favourite icon--> <link rel="shortcut icon" href='{{page.favicon}}'> <meta charset="utf-8"> <!--Viewport for Responsive layout--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--Bootstrap & ChargeBee compiled CSS --> <link href="http://themes.chargebee.com/static/app-static-assets/cdn-tpl_theme-1.0.5/stylesheets/core_v2.css" rel="stylesheet" media="screen" type="text/css"> <!-- CSS based on the configured preset --> <link href="{{theme_preset_css}}" rel="stylesheet" type="text/css" /> <meta name="template_html" content="checkout.html"> <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js"></script> </head>