setting cross origin variable in iframe

Question

i am embedding a form on a checkout page with an iframe and i am trying to take the price of the cart and have it automatically inputted into the amount field. the value of the cart variable seems to be $("span[data-test='cart-price-value']").innerText; when i check it in the console, but i am confused on whether i should set the variable in the script that embeds the iframe or in my iframe html itself or whether or not i have to do both and add a jquery listener to the iframe html

and also i need to trim off the '$' from the variable, cause $("span[data-test='cart-price-value']").innerText; returns a value with a dollar sign in front of it for example "$435.66" and i need it to be just "435.66" any help would be appreciated

Answer 1

There are a few things here -

Browsers have some pretty stringent restrictions about cross-origin iframes. You won't be able to communicate between the BigCommerce Checkout on one URL to an iframe hosted on a different URL - if their origins are different.

If you try to use JavaScript from the BC checkout page to set the value of a form input embedded in the iframe, you'll get a security warning in the console and the browser will dissallow it.

However, there is an API which allows for this communication - you can read more here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

You're going to be sending and listening for custom "message" events and running code accordingly.

I'm not 100% on this, but from what it sounds like, you'll want to use Window.postMessage() to the iframe/origin hosting the external form, and send along the price you need to input.

On the page which serves the iframe/form code, you'll need an event listener to wait for this message to come in, and that's when you can have an event handler which will take the value passed along in the cross-origin message and modify the form input value.

Now, in terms of actually implementing this - it will also become more complicated depending on what type of Checkout Page you're hosting. Are you on Optimized One Page Checkout (The new one?) If so, you'll probably need Mutation Listeners, as the OPC is an external React Application, and you can't really hook into the internal state, you need to use mutation listeners to wait until each section (Customer Details, Shipping Details, Billing Details, payment Step) loads - as these are refreshed using internal React State which you can't access from the BC/stencil/cornerstone/blueprint scripts.

More details on that here: https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9

If you're using an older version of checkout where you can manually modify the JS and HTML structure of the checkout that BC serves, you might not need this.