@swapper-finance/sdk
Version:
JavaScript SDK form Swapper
68 lines (58 loc) • 2.05 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swapper Finance Integration</title>
</head>
<body>
<h1>Integrate Swapper Finance</h1>
<div class="widget-container">
<iframe
id="swapperFinanceWidget"
src=""
width="100%"
height="560px"
title="Swapper Finance Widget"
></iframe>
</div>
<script>
// 1. Your unique Integrator ID
const yourIntegratorId = "d6e438dfa14e80701b9b"; // <-- REPLACE THIS WITH YOUR ACTUAL INTEGRATOR ID
// 2. Define the iframe base URI
const IFRAME_BASE_URI = "https://dev.swapper.finance";
// 3. Construct the query parameters
const queryParams = new URLSearchParams({
integratorId: yourIntegratorId,
}).toString();
// 4. Form the full iframe source URL
const iframeSrc = `${IFRAME_BASE_URI}?${queryParams}`;
// 5. Get a reference to your iframe element
const iframeElement = document.getElementById("swapperFinanceWidget");
// 6. Set the src attribute of the iframe
if (iframeElement) {
iframeElement.src = iframeSrc;
// 7. Prepare the configuration object
const swapperConfig = {
integratorId: yourIntegratorId,
// Add other configuration parameters here as needed
};
// 8. Listen for the iframe to load, then send the configuration
iframeElement.addEventListener("load", () => {
if (iframeElement.contentWindow) {
iframeElement.contentWindow.postMessage(
{
type: "SWAPPER_CONFIG",
config: swapperConfig,
},
IFRAME_BASE_URI, // Target origin
);
console.log("Swapper Finance Widget: Configuration sent.");
}
});
} else {
console.error("Swapper Finance Widget: Iframe element not found.");
}
</script>
</body>
</html>