A lightweight Lightning Network web payment tool for LND. It uses Alex Bosworth's ln-service to communicate with LND both localy and remotely.
Install lnd-pay on your server:
git clone https://github.com/mariodian/lnd-pay.git
cd lnd-pay
npm install
node server.js
The basic setup requires you to send one ajax request to api/v0/invoices to create an invoice and then open websocket to listen for status changes.
The minimum code would look like this:
$.ajax({
method: "POST",
url: 'http://localhost/api/v0/invoices',
dataType: "json",
data: {
tokens: 100, // send 100 sat
description: 'Test payment' // not required
},
success: function(res) {
const paymentRequest = res.request;
let con = new WebSocket('ws://127.0.0.1:1337/ws');
con.onopen = function () {
// Send invoice ID to server so it only checks for particular invoice status
if (invoiceID) {
con.send(invoiceID)
} else {
con.close();
}
};
con.onmessage = function (message) {
const json = JSON.parse(message.data);
if (json.is_confirmed) {
// Invoice paid
// Change status to paid in UI
} else {
// Invoice not paid
}
};
}
});
If you'd like to use LND Pay frontend in your React project please go to lnd-pay-react.
I've created a javascript plugin for easy communication with the backend right from your website.
It's built with jQuery, Bootstrap, Font Awesome and kjua (QR code library).
A minimum HTML template would look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/lndpay.css" rel="stylesheet">
<link href="css/bootstrap-4.3.1.min.css" rel="stylesheet">
<link href="css/fontawesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/lndpay.jquery.js"></script>
<script type="text/javascript" src="js/kjua-0.6.0.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#lnd-pay').lndPay({
apiURL: 'http://localhost:11338/api/v0',
wsURL: 'ws://127.0.0.1:11337/ws'
});
});
</script>
<body>
<div id="lnd-pay"></div>
</body>
</html>
By default an UI is created for you. The design is very similar to yalls.org.
If you do NOT want to display a payment QR code, remove kjua and lndpay.css from the HTML header.
{
apiURL: null, // API URL prefix to create invoice
wsURL: null, // WebSocket url
amount: null, // Invoice amount
description: '', // Invoice description
expire: 60, // Invoice expires in X minutes
namespace: 'lndpay', // HTML lass namespace
buildUI: true, // Build UI
onCreateInvoice: null, // Callback when invoice get created (overwrites default)
onPaid: null // Callback on successful payment (overwrites default)
}
You can also use your own UI by setting buildUI to false:
$('#lnd-pay').lndPay({
...
...
buildUI: false
});
Make sure to follow this basic HTML template:
<div id="lnd-pay">
<input id="lndpay-amount" type="text">
<input id="lndpay-description" type="text">
<input id="lndpay-pay_req" readonly type="text" >
<a href="#" id="lndpay-pay">Pay</a>
<div id="lndpay-qr" class="qr-wrapper"></div>
</div>
You can set up custom HTML ID namespaces:
$('#lnd-pay').lndPay({
...
...
namespace: 'custom'
});
You would then have to set HTML elements like this: id="custom-amount".
If you build your own UI, you don't have to load Bootstrap.
You can also add custom callbacks.
When used with a custom UI it overrides the default behaviour. It extends the behaviour of the default UI on the hand.
$('#lnd-pay').lndPay({
...,
...,
// Invoice created callback
onCreateInvoice: function(obj, res) {
// Display payment request in anyway you want.
// To be notified about payment status via websocket you'll have to call openWebsocket
obj.openWebSocket(res.id);
},
// Invoice paid callback
onPaid: function(res) {
// Display a message about successful payment.
// If you don't call this callback a default message will be displayed.
},
});
Please have a look at an example folder to see the full working code.
If you like what I do, feel free to support me.