(Opcional) Ajusta la altura del contenedor de tu widget embebido

Si estás utilizando el parámetro target para mostrar el widget de DEUNA dentro de un elemento HTML específico, ten en cuenta que el widget se renderizará en un iframe que heredará las dimensiones de ese elemento.

Debido a que el contenido del widget de DEUNA cambia dinámicamente durante el flujo de pago (por ejemplo, al cambiar de vista o expandir mensajes de error), esto puede generar un scroll interno no deseado dentro del iframe.

Para evitar este scroll y asegurar una experiencia de usuario fluida, te recomendamos utilizar el callback onResize. Este callback te permite "escuchar" los cambios en la altura del contenido del widget de DEUNA. Al detectar un cambio, puedes redimensionar dinámicamente la altura de tu elemento HTML contenedor para que coincida con la del widget, eliminando así el scroll interno.

Ejemplo de uso
A continuación, te mostramos un ejemplo de cómo puedes implementar el callback onResize para 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.initElements({
          // ... 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>