simple-boost – The Lightning Payment Button

A web component button to trigger a WebLN payment request. The easiest and fastest way for your website visitors to send you sats.

Lightning invoices can either be automatically generated through a LNURL-pay Lightning Address or the payment can be sent as a keysend payment.

🚀 Usage

HTML / Web Component

Include the script and drop the <simple-boost> tag anywhere on your page:

<script type="module" src="https://esm.sh/simple-boost@latest"></script>

<simple-boost 
  address="[email protected]" 
  amount="2100" 
  currency="sats">
  Support our work
</simple-boost>

React

⚠️ Important: Required Packages

The React wrapper depends on the following packages to work:
react, react-dom, and @lit/react
Installing these ensures the component works correctly in your React project.

npm install react react-dom @lit/react

The React wrapper will not work in a non-React project.

import { SimpleBoostButton } from "simple-boost/react";

function Boost() {
  return (
    <SimpleBoostButton
      address="[email protected]"
      amount={2100}
      currency="sats"
    >
      Support our work
    </SimpleBoostButton>
  );
}

export default Boost;

Demo and Documentation

• Documentation
• Examples

Development Setup

Install dependencies:

npm i

Build

Compile the TypeScript sources:

npm run build

Watch for changes:

npm run build:watch

Dev Server

Run local dev server with Vite:

npm run serve

Open: http://localhost:8000/dev/index.html

For production mode:

npm run serve:prod

Documentation Site

Generate docs:

npm run docs

Serve docs locally:

npm run docs:serve

Docs will usually be served at: http://localhost:8000

Credits

Built with ⚡ by the Alby team and contributors.