pay-with-ln

Web component for trigger payment request through WebLN protocol

Usage no npm install needed!

<script type="module">
  import payWithLn from 'https://cdn.skypack.dev/pay-with-ln';
</script>

README

Built With Stencil

pay-with-ln

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/pay-with-ln@0.0.1/dist/pay-with-ln.js'
  integrity="sha384-0gE98IqUZdWHtdgtLOnon/9r/4abSzW18MBIYvk58FWgOGLgtZT3XEnB1GcpA3Fy"
  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;
}