I added a tip option to this site

03 September 2024
code

I expect to never receive a dime… but if you don’t have it there then you definitely won’t receive a dime. So my odds of making money off my site have increased from 0 to 0.0000001%.

Why a tip option? Well, don’t we all dream of becoming rich from random passive income?

Hey maybe one day this site will have enough content and visitors that people do want to say “thanks for the great content” and leave a couple bucks. Unlikely? Sure. But I can dream.

How did I do it? Stripe makes it so easy!! (No this is not a sponsored post… I am just a big fan of Stripe.) I made a payment link, pasted their code snippet on my site, and then wrote a bit of code to have it toggle in and out of the screen.

Note - the code is kind of bespoke. If you have a million modals maybe you want something a little more re-usable. But this site is all about YOLO shipit so I just throw stuff together and tidy up when I realize I need to 😉

HTML #

<a class="nav-item buy-coffee" id="tip-link" href="https://buy.stripe.com/3cs6rF9Yj2iBe4w8ww">Buy me a coffee</a>

CSS #

@keyframes buy-button-animation {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    80% {
        transform: translateY(0%);
    }
   
    100% {
        opacity: 1;
    }
}

stripe-buy-button {
    position: absolute;
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    margin: auto;
    width: 288px;
    height: 243px;
    z-index: 10;
    display: none;
}

body.show-tip {
    overflow: hidden;
}

body.show-tip stripe-buy-button {
    display: block;
    animation: buy-button-animation 300ms ease-out forwards;
}

@keyframes animate-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .7;
    }
}

body.show-tip .modal-underlay {
    display: block;
    position: absolute;
    z-index: 8;
    background: rgba(0,0,0,1);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    animation: animate-in 200ms ease-in forwards;
}

JavaScript #

var tipLink = document.getElementById("tip-link");
if (tipLink) {
    tipLink.addEventListener("click", function(event) {
        event.preventDefault();
        document.body.classList.add("show-tip");
    });
}

var modalUnderlay = document.getElementById("modal-underlay");
if (modalUnderlay) {
    modalUnderlay.addEventListener("click", function(event) {
        event.preventDefault();
        document.body.classList.remove("show-tip");
    });
}