Writing a WebLN enabled tipping web component

WebLN is the set of specifications for Lightning apps and client providers to facilitate communication between web apps and users' Lightning nodes. It provides a programmatic interface for letting applications ask users to send payments. Probably you all know this because all the like buttons here on bolt.fun are basically WebLN enabled buttons. That ask you to send sats to vote for articles and comments.

In this post I show you a similar web component that provides a WebLN enabled tipping button and can be embedded into any website. It allows visitors to drop sats literally with one-click.

Have a look here: https://getalby.github.io/simple-boost/ (source) the simple-boost web component by Alby

Hello simple-boost component

The idea is to give the user a button that generates a Lightning Invoice and requests the user to pay the invoice through WebLN.

The component is built using Lit - a nice tool to build web components with a small foot print.

So the first step to request a payment from the user is to generate an invoice. In our case we use the LNURL-pay interface and a Lightning Address to get the invoice. This way we do not need to be connected to any lightning node or need to provide any sensitive credentials. A lightning address is enough.

This works by requesting the .well-known/lnurlp entry and generating an invoice through the returned callback URL. (see the LNURL-pay for details.)

Simplified code (see full code here)

const [user, host] = lnaddress.split('@');
url = `https://${host}/.well-known/lnurlp/${user}`;
const response = await fetch(url);
const lnurlDetails = await response.json();

const callback = new URL(lnurlDetails.callback);
const amount = sats * 1000; // lnurl-pay requires milli-sats
callback.searchParams.set('amount', amount.toString());

const callbackResponse = await fetch(url.toString());
const prDetails = await callbackResponse.json();

return prDetails.pr;

Now that we have the payment request we can do the WebLN call.

Simplified code (see full code here):

let paymentResponse = await window.webln.sendPayment(pr);
if (paymentResponse.preimage) { // TODO: here you would actually also check if the preimage matches to the payment hash of the invoice
  this.jsConfetti.addConfetti();
}

And that's basically it. Now we put a bit more configuration options in there and we got a simple WebLN enabled boost button for your website that allows visitors to drop you sats with one click and all you need is a lightning address and a few lines of JavaScript code.

Have a look at the full code over at GitHub.

How do I use the simple-boost button?

Have a look at all the examples on the documentation website. And configure it the way you like.

Here is an example for a button that sends 20 EUR cents in sats to my lightning address

<script type="module" src="https://unpkg.com/simple-boost?module"></script>
<simple-boost
  amount="0.2"
  currency="eur"
  class="spotify"
  address="[email protected]"
></simple-boost>

So all you have to do is load the simple-boost JS from the CDN (or load it locally) and use the tag similar to any other HTML tag.

Hope this helps, let me know if you have questions.