gumroad Pop up code

Integrate Gumroad into Your Website: Easy Step-by-Step Guide

Learn how to integrate Gumroad into your website with our detailed guide. Improve your sales process by providing a familiar and efficient buying experience for your customers.

requirements

install Wpcode Plugin on your WordPress site.

You need to create 2 code Snippets, one for JS and the other for CSS.

To redirect to checkout :

https://store.gumroad.com/l/PRODUCT-ID?wanted=true

JS Code

Copy these codes and make sure to follow the instructions in our youtube video.

document.addEventListener("DOMContentLoaded", function() {
const popup = document.getElementById("popup");
const iframe = document.getElementById("gumroadIframe");
const close = document.querySelector(".close");
const buttons = document.querySelectorAll(".checkoutButton");

buttons.forEach(function(button) {
button.addEventListener("click", function() {
const gumroadCheckoutUrl = this.getAttribute("data-url");
iframe.src = gumroadCheckoutUrl;
popup.style.display = "block";
});
});

close.addEventListener("click", function() {
popup.style.display = "none";
iframe.src = ""; // stop checkout process
});

window.addEventListener("click", function(event) {
if (event.target === popup) {
popup.style.display = "none";
iframe.src = "";
}
});
});

CSS Code

Copy these codes and make sure to follow the instructions in our youtube video.

.popup {
display: none; /* Hidden by default */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(8, 7, 7, 0.83); /* Dark overlay */
}

.popup-content {
background-color: #F4F4F1;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
border: 2px solid #000; /* <-- semicolon added */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 600px;
position: relative;
}

.close {
color: #333;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}

.close:hover,
.close:focus {
color: #ff4d4d; /* Soft red on hover */
text-decoration: none;
}

iframe {
border: none;
border-radius: 4px;
}

@media screen and (max-width: 600px) {
.popup-content {
width: 95%;
}
}

HTML Code

Copy these codes and make sure to follow the instructions in our youtube video.

---- Code without image

<button class="checkoutButton" data-url="https://store.gumroad.com/l/YOUR-PRODUCT-ID?wanted=true">
Buy Product
</button>

<div id="popup" class="popup" style="display:none;">
<div class="popup-content">
<span class="close">×</span>
<iframe id="gumroadIframe" src="" frameborder="0" width="100%" height="500px"></iframe>
</div>
</div>

---- Code with image

<img
src="path/to/your-transparent-buy-now-image.png"
alt="Buy Now"
class="checkoutButton"
data-url="https://store.gumroad.com/l/YOUR-PRODUCT-ID?wanted=true"
style="cursor: pointer;"
/>