Ajusta la altura del contenedor de tu Widget
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
Mira el 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.
