How to handle click event to 3rd part iframe using jquery?

Question

I am using WordPress and WooCommerce. When a product is added to cart, an iframe from 3rd party plugin hosted on a different url is loaded or inserted to the DOM dynamically.

<li class="klarna-checkout-wrap">

  <iframe id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="k-loading" scrolling="no" frameborder="0" style="height: 860px; width: 1px; min-width: 100%;" src="https://checkout-eu.playground.klarna.com/12345/checkout.html#%7B%22ORDER_URL%22%></iframe>

</li>

There is an element inside the iframe with an <div id="buy-button-next"></div>

Do you know how can I access the element inside the iframe that has an id of "buy-button-next" ?

I tried the code below but it's not working..

  $('.klarna-checkout-wrap #klarna-checkout-iframe #buy-button-next').on('click', function(e) {
    alert('test123');
  });

Any idea is appreicated. Thanks.

Answer 1

You need to add your script on the page which is inside the Iframe. As it seems below is the source URL

https://checkout-eu.playground.klarna.com/12345/checkout.html#%7B%22ORDER_URL%22%

goto that page and simply below code will work.

$('#buy-button-next').on('click', function(e) {
    alert('test123');
  });

If you do not have access to the source URL then you can't do it.