You can use this option if you are using a website builder like Wix which can only take direct html.
Note: You will need to style the button with your own CSS! !
Note: You will need to update the checkout URL "https://sandbox-winter-checkout.onrender.com/?projectId=102" with your own that we give you!
<script>
window.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`);
if (event.data === "closeWinterCheckoutModal") {
// properly close the winter modal so it can be opened again
document.getElementById("winter-checkout").style.visibility = "hidden";
document.getElementById("winter-checkout").style.display = "none";
} else if (event.data.name === 'successfulWinterCheckout') {
// Successfully checked out. This event contains information
// you can use to continue the flow:
console.log(event.data.transactionhash) // do what you need with the txhash here!
console.log(event.data.email) // email that the user bought an NFT with
}
});
function openWinterCheckout () {
var iframe = document.getElementById("winter-checkout");
document.body.appendChild(iframe);
iframe.style.visibility = "visible";
document.getElementById("winter-checkout").style.display = "inline";
}
document.getElementById("winter-checkout").addEventListener('close', event => {
var iframe = document.getElementById("winter-checkout");
iframe.style.visibility = "hidden";
});
</script>
<button id="winterCheckout" onclick="openWinterCheckout()">Mint with Card</button>
<iframe id="winter-checkout" src="https://sandbox-winter-checkout.onrender.com/?projectId=102" style="position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
visibility:hidden;
display: none;" allowtransparency="true" ></iframe>
If you have extra mint params (mint params besides 'address', 'amount', and 'proof') you will need to add the params to the url like so:
// Make sure the key exactly matches the param name provided to us
url += `&extraMintParams=${encodeURIComponent(JSON.stringify({a: 1, b: 2}))}`
If you have price function params (mint params besides 'address', 'amount', and 'proof') you will need to add the params to the url like so:
// Make sure the key exactly matches the param name provided to us
url += `&priceFunctionParams=${encodeURIComponent(JSON.stringify({tier: 'gold
, type: 'rare'}))}`
If you want to customize the css of the checkout widget you will need to add the "appearance" to the url like so:
