Overview

A simple Web Component button that giving you abillity to trigger LND payment request through webln provider.

Using this component

Script tag

• Put a script tag in the head of your index.html

<script 
  src="https://unpkg.com/[email protected]/dist/pay-with-ln.js" 
  integrity="sha384-Uid8n0M8dpAoE1SOQOXOcMfDy9hvqtSp+A3xMFilQn+Z6fxsnmCayPVP8na5vdAv"
  crossorigin="anonymous">
</script>

• Then you can use the element anywhere in your template, JSX, html etc

Framework integration

You can find instructions here

Then add this to your html/jsx file (replace payment-request data with your invoice)

<pay-with-ln payment-request="lnbc1pw2uhctpp5p7e6ru568ry6w9ecxn0288gdt65ehdxqmaqchn0xnye09vxvu5qsdqjgdhkven9v5s8g6tsyycqzpgxq97zvuqfh2drun3d9p57nxzj6rmhupnqly84kkte0vxjgqmsz99y2g4aat58xpnc9967kkycnfylx4vrc94ns87cym2y3uu7evc3ecaq26qjhgpeyv6wr"></pay-with-ln>

Styling

You can change button colors by defining css variables

:root {
  --pay-with-ln-color: #40a9ff;
  --pay-with-ln-active-color: #ffdd57;
  --pay-with-ln-text-color: white;
  --pay-with-ln-ative-text-color: red;
}