De banner voor Vetodonaties.

veto-donatiebanner.html

<script>
    function sluitDonatiebanner() {
        document.getElementById('donatiebanner').parentElement.style.display = 'none';
    }

    document.getElementById("sluitDonatiebannerKnop").addEventListener("click", sluitDonatiebanner);
</script>

<div id="donatiebanner">
    <h3>Meer van deze kwalitatieve journalistiek lezen?</h3>
    <p>
        Wij schrijven al vijftig jaar belangeloos over de onderwerpen die u aanbelangen. Steun ons door middel van een vrije bijdrage zodat wij ons werk nog vijftig jaar kunnen voortzetten.
    </p>

    <script async
        src="https://js.stripe.com/v3/buy-button.js">
    </script>

    <stripe-buy-button
        buy-button-id="buy_btn_1Q03EfP1YIU1a37LYPTAcmAT"
        publishable-key="pk_live_51Q02YTP1YIU1a37L1HpIvBiNlSJxvBCPI9BtIZE9yi0QU7KnkIHuqL72QYpQBX9GYWWG3C8ZDC2AlzxAtSe1dcjv00xwZ1RrCt"
    >
    </stripe-buy-button>

    <button id="sluitDonatiebannerKnop">Sluiten</button>
</div>

<style>
    #donatiebanner {
        display: flex;
        width: 100%;
        padding: 1rem;

        flex-direction: column;
        gap: 4px;
    }

    #sluitDonatiebannerKnop {
        border: 0px;
        padding: 0.5rem;

        background-color: white;
        cursor: pointer;
    }

    @media only screen and (min-width: 480px) {
        #sluitDonatiebannerKnop {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }
    }
</style>