document.addEventListener("DOMContentLoaded", function () {
// Check if the MoonPay SDK is available before proceeding
if (window.MoonPayWebSdk && typeof window.MoonPayWebSdk.init === 'function') {
initializeMoonPay();
} else {
// If not loaded yet, keep checking until it is loaded
const sdkCheckInterval = setInterval(() => {
if (window.MoonPayWebSdk && typeof window.MoonPayWebSdk.init === 'function') {
clearInterval(sdkCheckInterval);
initializeMoonPay();
}
}, 500); // Check every 500ms if MoonPay SDK is available
}
function initializeMoonPay() {
try {
// Initialize the MoonPay widget
const moonPaySdk = window.MoonPayWebSdk.init({
flow: "buy",
environment: "sandbox", // Change to "production" for live use
variant: "overlay",
params: {
apiKey: "pk_test_hQ33a46fhKjWfi09P2ODEEz64hfnn", // Replace with your actual public API key
theme: "dark",
baseCurrencyCode: "usd",
baseCurrencyAmount: "100",
defaultCurrencyCode: "eth"
},
handlers: {
async onTransactionCompleted(props) {
console.log("Transaction Completed", props);
}
}
});
// Add an event listener to show the widget on button click
const moonPayButton = document.getElementById("moonPayButton");
if (moonPayButton) {
moonPayButton.addEventListener("click", function () {
console.log("MoonPay button clicked.");
moonPaySdk.show();
});
} else {
console.error("MoonPay button not found in the DOM.");
}
} catch (error) {
console.error("Failed to initialize MoonPay SDK:", error);
}
}
});
document.addEventListener("DOMContentLoaded", function () {
// Initialize the MoonPay SDK
const moonPay = window.MoonPayWebSdk?.init;
// Check if MoonPay SDK is loaded
if (!moonPay) {
console.error("MoonPay SDK not loaded!");
return;
}
// Configure the MoonPay widget
const moonPaySdk = moonPay({
flow: "buy",
environment: "sandbox", // Change to "production" when you're ready to go live
variant: "overlay", // Options: overlay, embedded, newTab, newWindow
params: {
apiKey: "pk_test_hQ33a46fhKjWfi09P2ODEEz64hfnn", // Replace with your actual public API key
theme: "dark", // Optional: dark or light theme
baseCurrencyCode: "usd", // Currency for the user
baseCurrencyAmount: "100", // Default amount in the base currency
defaultCurrencyCode: "eth" // Default cryptocurrency to buy
},
handlers: {
async onTransactionCompleted(props) {
console.log("Transaction Completed", props);
}
}
});
// Add an event listener to show the widget on button click
document.getElementById("moonPayButton").addEventListener("click", () => {
moonPaySdk.show();
});
});
