Adjust the height of your widget container

Adjust the height

The widget is rendered in an iframe that inherits the dimensions of the target parameter in HTML.

Avoid unwanted scrolls inside the iframe by adjusting the container height.

Use the onResize callback as follows:

The callback listens for height changes in the Widget content.
When detecting changes, the height is dynamically resized.
The HTML element height dynamically matches the Widget.

Example

Example to implement the onResize callback and adjust your container height:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script crossorigin src="https://cdn.deuna.io/web-sdk/v1.2/index.js"></script>
  </head>
  <body>
    <h1>Iframe with dynamic height</h1>
    <div id="container"></div>
    <script>
      async function initialize() {
        await DeunaSDK.initialize({
          publicApiKey: "YOUR_PUBLIC_API_KEY",
          env: "sandbox",
        });

        await DeunaSDK.initPaymentWidget({
          // ... other configurations
          target: "#container",
          // ... other configurations
          callbacks: {
            onResize: (dimensions) => {
              // Container height is resized
              const container = document.getElementById("container");
              container.style.height = `${dimensions.height}px`;
            },
          },
        });
      }
      initialize();
    </script>
  </body>
</html>

📘
In Click to Pay, the fixed container height is 650px.