What is LApps?
The applications which are taking payment through Lightning Network(LN) for the services provided are called LApps. Today Lightning Network(LN) is available for Bitcoin and Litecoin. To understand more about the LN, See here.
To build our own LApps, we need to have own Lightning Node or account with Lightning Payment provider ( like OpenNode, BTC Pay). In this tutorial, we are going to help and show you how to build your own LN powered application using Lightning Payment provider OpenNode by referencing an LApp Satoshis.Pictures.
1. Create an account with OpenNode:
1.1. Create an account with OpenNode.
1.2. Once it is ready, go to Settings > Integrations > Under API Keys, click on +Add key button. A popup window appears for the input of Label and Permission. Based on application need, choose the correct permission and click on the Generate button.
1.3. Now API key is generated with given permission and appears on the screen to copy and save. It will be shown only once on the screen. So have it saved. Now we are ready with our LN account and API key to integrate with the application to take Lightning Payments.
2. Create a basic web application of your choice:
To start with, we are going to show you how the LN integration from Open Node is done for Satoshis.Pictures which is a LApp. The stack used is Angular 6 for UI, Spring Framework for Middle Tier(MT) and Firebase Real-Time Database for DB. Play around with the ‘Crypto Wall of Fame’ to get an understanding of how it works end to end. Like Satoshis.Pictures you can build an app of your choice to keep it ready for LN integration. Check out all the existing LN apps out there to get some ideas to build your own.
3. Integrate with Lightning Payment Provider OpenNode:
Now that you have a basic web application and LN account with OpenNode, let us start integrating.
3.1 Generate Payment Request / Charge Sheet from OpenNode
Payment Request is generated from our own Lightning Node/call OpenNode API’s to generate it. You can read from OpenNode API’s for detail.
In Satoshis.Pictures, once the user uploads an image and enters minutes to stay on the wall, it will calculate and display the payable satoshis. On click of ‘Proceed’, UI (Angular 6) sends the payable satoshis to MT(Spring) and calls Opennode with ‘payable satoshis, API key of your account, and call back URL of your web application’. OpenNode will give us the response of Payment Request/Charge Sheet information. We store this response in the Firebase Database and return it back to UI (Angular 6).
3.2 Display the Payment Request as a QR code
UI(Angular 6) will display the Payment Request in QR code format so that user can scan using any Lightning Wallet( eg. Breez or Blue Wallet) to pay. UI(Angular 6) will subscribe directly with Firebase Database for an update on the payment request. By this, it avoids polling from the client to server and it is seamless.
3.3 Confirm the user on Success of Payment
Once the user makes a Payment Successfully, OpenNode will hook/call the callback URL of our web application which was passed as a parameter to OpenNode for creating Payment Request/Charge Sheet. Now, we need to update the stored Payment Request on Firebase Database. Since Firebase is a real-time database, it will send an update to all subscriber of the Payment Request. By this, UI(Angular 6) will get an update from Firebase saying, payment is made successfully. On receiving this, UI needs to show the confirmation message to the user like below.
Please refer to the architecture diagram while building and getting a complete picture. Now, the end to end integration Lightning Network Payment is ready for use.
Wishing you good luck for building your LApp. Feel free to reach out to me if you any questions or need help.
Follow us and Reach out us on https://twitter.com/slam_trade