---
layout: layouts/main.html
title: "SimpleX Chat - Donate"
description: "Get the app via F-Droid"
templateEngineOverride: njk
---

<style>
    .btcpay-form {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btcpay-form--inline {
        flex-direction: row;
    }

    .btcpay-form--block {
        flex-direction: column;
    }

    .btcpay-form--inline .submit {
        margin-left: 15px;
    }

    .btcpay-form--block select {
        margin-bottom: 10px;
    }

    .btcpay-form .btcpay-custom-container {
        text-align: center;
    }

    .btcpay-custom {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btcpay-form .plus-minus {
        cursor: pointer;
        font-size: 25px;
        line-height: 25px;
        background: #DFE0E1;
        height: 30px;
        width: 45px;
        border: none;
        border-radius: 60px;
        margin: auto 5px;
        display: inline-flex;
        justify-content: center;
    }

    .btcpay-form select {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        color: currentColor;
        background: transparent;
        border: 1px solid transparent;
        display: block;
        padding: 1px;
        margin-left: auto;
        margin-right: auto;
        font-size: 11px;
        cursor: pointer;
    }

    .btcpay-form select:hover {
        border-color: #ccc;
    }

    .btcpay-form option {
        color: #000;
        background: rgba(0, 0, 0, .1);
    }

    .btcpay-input-price {
        -moz-appearance: textfield;
        border: none;
        box-shadow: none;
        text-align: center;
        font-size: 25px;
        margin: auto;
        border-radius: 5px;
        line-height: 35px;
        background: #fff;
    }

    .btcpay-input-price::-webkit-outer-spin-button,
    .btcpay-input-price::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
<style>
    input[type=range].btcpay-input-range {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
    }

    input[type=range].btcpay-input-range:focus {
        outline: 0;
    }

    input[type=range].btcpay-input-range::-webkit-slider-runnable-track {
        width: 100%;
        height: 3.1px;
        cursor: pointer;
        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
        background: #f3f3f3;
        border-radius: 1px;
        border: 0;
    }

    input[type=range].btcpay-input-range::-webkit-slider-thumb {
        box-shadow: none;
        border: 2.5px solid #cedc21;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #0f3723;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -9.45px
    }

    input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track {
        background: #fff;
    }

    input[type=range].btcpay-input-range::-moz-range-track {
        width: 100%;
        height: 3.1px;
        cursor: pointer;
        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
        background: #f3f3f3;
        border-radius: 1px;
        border: 0;
    }

    input[type=range].btcpay-input-range::-moz-range-thumb {
        box-shadow: none;
        border: 2.5px solid #cedc21;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #0f3723;
        cursor: pointer;
    }

    input[type=range].btcpay-input-range::-ms-track {
        width: 100%;
        height: 3.1px;
        cursor: pointer;
        background: 0 0;
        border-color: transparent;
        color: transparent;
    }

    input[type=range].btcpay-input-range::-ms-fill-lower {
        background: #e6e6e6;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
    }

    input[type=range].btcpay-input-range::-ms-fill-upper {
        background: #f3f3f3;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
    }

    input[type=range].btcpay-input-range::-ms-thumb {
        box-shadow: none;
        border: 2.5px solid #cedc21;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #0f3723;
        cursor: pointer;
        height: 3.1px;
    }

    input[type=range].btcpay-input-range:focus::-ms-fill-lower {
        background: #f3f3f3;
    }

    input[type=range].btcpay-input-range:focus::-ms-fill-upper {
        background: #fff;
    }

    .donate-content h2{
        color: #0197ff;
        font-weight: 700;
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 28px;
        text-align: left;
    }

    :is([dir="rtl"] .donate-content h2) {
        text-align: right;
    }

    .donate-content p{
        color: #0d0e12;
        line-height: 24px;
        font-size: 16px;
        margin-bottom: 12px;
    }

    :is(.dark .donate-content p) {
        color: #ffffff;
    }

    @media (min-width: 768px) {
        .donate-content h2{
            font-size: 35px;
            line-height: 43px;
        }
    }

    .donate-content a {
        color: #0053D0;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .dark .donate-content a,
    .dark .donate-content h2 {
        color: #70F0F9;
    }

    .donate-content ul,
    .donate-content ol {
        list-style-position: inside;
        overflow: auto;
        margin: 10px 0;
    }

    .donate-content > ul{
        margin-bottom: 1.5rem;
    }

    .donate-content ul li,
    .donate-content ol li {
        margin-right: 0;
        margin-left: 0;
        -webkit-margin-start: 1.1rem;
        color: #0d0e12;
        word-wrap: break-word;
        white-space: normal; 
    }

    @media (min-width: 1024px) {
        .donate-content ul li,
        .donate-content ol li {
            word-break: break-all;
        }
    }

    .dark .donate-content ul li,
    .dark .donate-content ol li {
        color: #fff;
    }

    .donate-content ul li::marker,
    .donate-content ol li::marker {
        color: #0d0e12;
    }

    .dark .donate-content ul li::marker,
    .dark .donate-content ol li::marker {
        color: white;
    }

    .donate-content ul li {
        list-style: disc;
        letter-spacing: 0.4px;
    }

    .donate-content ol li {
        list-style: decimal;
    }

    .donate-content > p:nth-last-child(3),
    .donate-content > p:nth-last-child(2){
        margin-bottom: 4px;
    }

    .donate-content > p:nth-last-child(3) {
        font-weight: bold;
    }

    .donate-form{
        padding: 5rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .donate-form form{
        scale: 1.2;
    }
</style>
<section
    class="container bg-primary-bg-light dark:bg-primary-bg-dark mt-[66px] px-5 flex flex-col-reverse lg:flex-row lg:gap-5">
    <div class="donate-content flex-[5] py-[75px]">
        {% includeReadmeSectionHtml 'Help us with donations' %}
    </div>

    <div class="donate-form flex-[4] max-h-[calc(100vh-66px)]">
    <form method="POST" action="https://btcpay.simplex.chat/api/v1/invoices" class="btcpay-form btcpay-form--block">
        <input type="hidden" name="storeId" value="932Twc9xWnAzFx1iA5VRMoRVEvn7tydmpwqqTVf6ziiV" />
        <input type="hidden" name="jsonResponse" value="true" />
        <div class="btcpay-custom-container">
            <input class="btcpay-input-price" type="number" name="price" min="0.0001" max="10" step="0.005"
                value="0.001" data-price="0" style="width:209px;" />
            <input type="hidden" name="currency" value="BTC" />
            <select disabled>
                <option value="BTC" selected>BTC</option>
            </select>
            <input type="range" class="btcpay-input-range" min="0" max="1" step="0.005" value="0.001"
                style="width:209px;margin-bottom:15px;" />
        </div>
        <button type="submit" class="submit" name="submit"
            style="min-width:209px;min-height:57px;border-radius:4px;border-style:none;background-color:#0f3b21;cursor:pointer;"
            title="Donate via BTCPay Server, a Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">Donate
                via</span>
            <img src="https://btcpay.simplex.chat/img/paybutton/logo.svg"
                style="height:57px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">
        </button>
    </form>
    </div>
</section>
<script>
    (function () {
        if (!window.btcpay) {
            var script = document.createElement("script");
            script.src = "https://btcpay.simplex.chat/modal/btcpay.js";
            document.getElementsByTagName("head")[0].append(script);
        }
        const form = document.querySelector(".btcpay-form");
        const field = form.querySelector(".btcpay-input-price");
        const slider = form.querySelector(".btcpay-input-range");
        const min = 0.0001;
        const maxSlider = 1;
        const maxInput = 10;

        attach(form, "submit", (event) => {
            event.preventDefault();
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200 && this.responseText) {
                    window.btcpay.appendInvoiceFrame(JSON.parse(this.responseText).invoiceId);
                }
            };
            xhttp.open("POST", event.target.getAttribute("action"), true);
            xhttp.send(new FormData(event.target));
        });

        attach(slider, "input", (event) => {
            event.preventDefault();
            const price = parseFloat(slider.value);
            if (price === undefined || isNaN(price) || price < min) {
                slider.value = min;
                field.value = min;
            } else {
                field.value = price;
            }
        });

        attach(field, "input", (event) => {
            event.preventDefault();
            let price = parseFloat(field.value);
            if (price === undefined || isNaN(price) || price < min) {
                field.value = min;
                slider.value = min;
            } else if (price > maxInput) {
                field.value = maxInput;
                slider.value = maxSlider;
            } else {
                slider.value = price
            }
        });

        function attach(el, event, listener) {
            if (!el.dataset.initialized) {
                el.addEventListener(event, listener);
                el.dataset.initialized = true;
            }
        }
    })()
</script>