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: (dimentions) => {
// Container height is resized
const container = document.getElementById("container");
container.style.height = `${dimentions.height}px`;
},
},
});
}
initialize();
</script>
</body>
</html>
In Click to Pay, the fixed container height is 650px.
