add support button

[cstenglein]

add a button to support the raspiblitz project

[jpyepez]

add a button to support the raspiblitz project

Hey hey! Got any extra details for this one?

• where should the button be?
• where should it direct the user?

I can probably take care of it soon with these details. 🙂

[cstenglein]

Thank you for the help @jpyepez !

I asked the team - we could repurpose the btcpay widget which is on https://raspiblitz.org/

Below is the copy-paste from the website code. Maybe I can get the source.

<div style="padding-top: 15px">
        <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>
<form method="POST" action="https://btcpay.fulmo.org/api/v1/invoices" class="btcpay-form btcpay-form--block">
  <input type="hidden" name="storeId" value="CzD1ddWDKR7PqNUuw2Sbt41oELNvY59Cg62LCMT8gNnA">
  <input type="hidden" name="notifyEmail" value="info@fulmo.org">
  <div class="btcpay-custom-container">
    <div class="btcpay-custom">
      <button class="plus-minus" type="button" onclick="handlePlusMinus(event);return false" data-type="-" data-step="5" data-min="1" data-max="1000">-</button>
      <input class="btcpay-input-price" type="number" name="price" min="1" max="1000" step="5" value="21" data-price="1" style="width:3em;" oninput="handlePriceInput(event);return false">
      <button class="plus-minus" type="button" onclick="handlePlusMinus(event);return false" data-type="+" data-step="5" data-min="1" data-max="1000">+</button>
    </div>
    <select name="currency">
      <option value="USD">USD</option>
      <option value="GBP">GBP</option>
      <option value="EUR" selected="">EUR</option>
      <option value="BTC">BTC</option>
    </select>
  </div>
  <input type="image" class="submit" name="submit" src="https://btcpay.fulmo.org/img/paybutton/pay.svg" style="width:209px" alt="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor">
</form>
<script>
    function handlePlusMinus(event) {
        event.preventDefault();
        const root = event.target.closest('.btcpay-form');
        const el = root.querySelector('.btcpay-input-price');
        const step = parseInt(event.target.dataset.step);
        const min = parseInt(event.target.dataset.min);
        const max = parseInt(event.target.dataset.max);
        const type = event.target.dataset.type;
        const price = parseInt(el.value);
        if (type === '-') {
            el.value = price - step < min ? min : price - step;
        } else if (type === '+') {
            el.value = price + step > max ? max : price + step;
        }
    }
    
    function handlePriceInput(event) {
        event.preventDefault();
        const root = event.target.closest('.btcpay-form');
        const price = parseInt(event.target.dataset.price);
        if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
        const min = parseInt(event.target.getAttribute('min'));
        const max = parseInt(event.target.getAttribute('max'));
        if (event.target.value < min) {
            event.target.value = min;
        } else if (event.target.value > max) { 
            event.target.value = max;
        }
    }
</script> 
</div>

[cstenglein]

We just had a team talk: We will get a lightning address, then we can just show the QR Code.
@rootzoll will take care of the lightning address.

When we have it, we can show the QR Code in either the Settings menu or an extra page (maybe a support page?).

In addition to the QR Code, we can have the option to add a button to support the project directly (just calls the backend => @fusion44 will add a endpoint).

[jpyepez]

@cstenglein

Awesome, that sounds good! I'll start messing around with it to check if settings or a different page works better.

QR code + API endpoint should be good, and probably enough to handle a good amount of scenarios for raspiblitz web users. Feel free to keep me updated on these and we'll throw this stuff in. :)