Ajusta la altura del contenedor de tu Widget

Ajusta la altura

El widget se renderiza en un iframe que hereda las dimensiones del parametro target en HTML.

Evita scrolls indeseados dentro del iframe ajustando la altura del contenedor.

Usa el callback onResize de la siguiente forma:

El callback escucha los cambios de altura de contenido del Widget.
Al detectar caambios, la altura se redimensiona dinámicamente.
La altura del elemento HTML coincide dinámicamente con el Widget.

Ejemplo

Ejemplo para implementar el callback onResize y ajustar la altura de tu contenedor:

<!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 con altura dinámica</h1>
    <div id="container"></div>
    <script>
      async function initialize() {
        await DeunaSDK.initialize({
          publicApiKey: "YOUR_PUBLIC_API_KEY",
          env: "sandbox",
        });

        await DeunaSDK.initPaymentWidget({
          // ... otras configuraciones
          target: "#container",
          // ... otras configuraciones
          callbacks: {
            onResize: (dimentions) => {
              // Se redimensiona la altura del contenedor
              const container = document.getElementById("container");
              container.style.height = `${dimentions.height}px`;
            },
          },
        });
      }
      initialize();
    </script>
  </body>
</html>

📘
En Click to Pay, la altura fija del contenedor es 650px.