Hey, thanks for sharing the link here. I am one of the developers... please keep in mind this is a Hackday showcase project. We want to showcase what can be done now and how easy it actually is to implement.
It's cazy sometimes how well lightning on the web already works and how much it really has become "click-done"
So in this demo we use three lightning standards:
  1. LNURL - Lightning Address: insatgram does not hold funds, sats are sent directly from the viewer to the creator and all the creator has to do is to provide a lightning address. insatgram uses the lnurl-pay spec on the server to request an invoice from the creator's wallet. this invoice will then be passed to the viewer
  2. LSAT - this is a highly under-used spec. LSAT describes a way how servers send invoices to the client (using the famous 402 HTTP response code) and how clients provide payment proofs. And in this case we use the lsat middleware for Go developed as a Summer of Bitcoin project. When the client says it wants to pay the server responds with a HTTP 402 an an invoice, the client pays that invoice and sends the same request again with a payment proof, server validates and responds with the real image
  3. WebLN - this spec describes how the website can use JavaScript to programmatically call the wallet. The invoice is programmatically passed to the wallet, Alby asks the user for confirmation and passes the paid preimage back to the website. This allows this super seamless integration, and basically any interaction on a website can now include a stream of sats... and all this on an open protocol. This JavaScript based two-way communication (website passes the invoice to the Alby wallet, and the wallet passes the payment response/the preimage to the website) also makes the verification of the payment possible WITHOUT the need that the server has access to the node (remember the server only knows the lightning address of the creator)
so the flow basically is:
user clicks on an image -> HTTP request to the server with the Accept-Authenticate: LSAT header -> Server generates an bolt11 invoice through LNURL-pay (using the creator's lightning address -> WebLN calls Alby and prompts the user to confirm the payment -> with the preimage from the paid WebLN call another HTTP request is made with the Authorization: LSAT header
I've also made a video explaining this and showing the LSAT requests: https://share.cleanshot.com/Ec8R5H
I hope this explains a bit more what's behind... and now imagine what all we can build with this flow and a bunch of simple HTTP and JavaScript calls.
I might make a video coding session one of the next days to develop another app like this - ideas on what I should live-code?