Lightning Payment Links on the web

The easiest way to integrate ⚡ Lightning payments into the web is by setting the target of your link to the receiver of the payment. By prefixing the receiver with lightning: you signal that this link is supposed to be handled by a Lightning app.

<a class="button" href="lightning:[RECEIVER]">
  ⚡ Pay
</a>

Replace the [RECEIVER] with the respective payment target, which can be one of the following:

• Lightning Address (e.g. [email protected])

• LNURL (e.g. lnurl1dp68gurn8gh...)

• Lightning Invoice (e.g. lnbc1u1p3wjp0vpp5c...)

Clicking on this link will open the payment flow of your favorite Lightning app:

Compatibility

You can find an updated list of supported apps in the lnurl-rfc repository on Github:

https://github.com/fiatjaf/lnurl-rfc/

Demo

In this little CodePen you will find 2 buttons with links to the different methods to test if your favorite Lightning app supports payments to Lightning Addresses or LNURL already:

➡️ https://codepen.io/reneaaron/pen/zYWRzZe

Pros & Cons

✅ Supported by ~most wallets
✅ Different formats supported (Lightning Address, lnurl-pay, invoice)
✅ Allows opening a payment flow in a Lightning app (e.g. Alby, Breez, Muun,...)
❌ You can only initiate the payment, there is no way of knowing if the user completed a payment
❌ There are no fallbacks: If there is no Lightning app available nothing will happen when user clicks one of those links
❌ There is no reliable way for a website to know whether a local Lightning app is available (thus leading to situations where UI elements have no function)

🧡 Bonus: NFC

This is not limited to links on the web. You can also write Lightning links on an NFC tag that triggers the same payment flow when you touch the NFC tag with your phone. Just make sure to only write the content of the href property to the NFC tag, like this:

lightning:[email protected]

<iframe class="remirror-iframe remirror-iframe-youtube" src="https://www.youtube-nocookie.com/embed/CQz1ILcK0PY?" data-embed-type="youtube" allowfullscreen="true" frameborder="0"></iframe>

The same can be done with withdraw links as well (🤯 awesome use cases ahead) but that will go into a separate story.

💬 Feedback & Comments

Did you come across some obstacles while implementing those links? Do you think something is missing in this article? Let me know in the comments! 👇