feat(payment): add WebLN payment functionality

Implemented functionality to create an invoice and make payment using WebLN. Also added error handling and logging for payment process. Updated UI to display payment information and a button to initiate payment.

Author: fsociety

app/Http/Livewire/Test/WebLN.php

@@ -2,11 +2,34 @@
 
 namespace App\Http\Livewire\Test;
 
+use App\Traits\LNBitsTrait;
 use Illuminate\Support\Facades\Log;
 use Livewire\Component;
 
 class WebLN extends Component
 {
+    use LNBitsTrait;
+
+    public $invoice;
+
+    public function mount()
+    {
+        $this->invoice = $this->createInvoice(
+            sats: 1,
+            memo: 'Test Payment from WebLN',
+            lnbits: [
+                'read_key' => '97f6120563e3498b8be4c67023c912ae',
+                'url' => 'https://bits.codingarena.top',
+            ]
+        );
+    }
+
+    public function reloadMe()
+    {
+        // full reload current page
+        return redirect()->route('webln');
+    }
+
     public function logThis($text)
     {
         Log::info('WEBLN: ' . $text);

resources/js/webln/webln.js

@@ -2,11 +2,30 @@ import {requestProvider} from "webln";
 
 export default (livewireComponent) => ({
 
+    invoice: livewireComponent.entangle('invoice'),
+
+    async pay() {
+        console.log('payment_request: ' + this.invoice.payment_request);
+        await webln.sendPayment(this.invoice.payment_request)
+            .then(response => {
+                console.log('Payment response:', response);
+                this.$wire.call('logThis', 'Payment response: ' + JSON.stringify(response));
+                this.$wire.call('reloadMe');
+            })
+            .catch(error => {
+                console.error('Payment failed:', error);
+                this.$wire.call('logThis', 'Payment failed: ' + error);
+                this.$wire.call('reloadMe');
+            });
+    },
+
     async init() {
         console.log('WebLN initialized');
 
         let webln;
         try {
+            console.log(this.invoice);
+
             webln = await requestProvider();
             console.log('WebLN provider acquired');
             this.$wire.call('logThis', 'WebLN provider acquired');

resources/views/livewire/test/web-l-n.blade.php

@@ -1,3 +1,13 @@
-<div x-data="webln(@this)">
-    <webview id="webln-webview" src="https://webln-capable-site.com" style="width:100%; height:100%;"></webview>
+<div x-data="webln(@this)" class="p-2 sm:p-4" wire:ignore>
+    <div class="font-mono space-y-1 p-2 sm:p-4 text-white break-words">
+        <div class="text-xs sm:text-base break-words">Test Payment from WebLN to The Ben</div>
+        <div class="text-xs sm:text-base break-words">1 sat</div>
+        <div class="text-xs sm:text-base break-words">hash: {{ $invoice['payment_hash'] }}</div>
+        <div class="text-xs sm:text-base break-words">payment_request: {{ $invoice['payment_request'] }}</div>
+        <div class="mt-6">
+            <div class="flex justify-center">
+                <button x-on:click="pay" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Pay Invoice</button>
+            </div>
+        </div>
+    </div>
 </div>