feat: add successful payment response handling

app/Http/Livewire/Test/WebLN.php

@@ -12,6 +12,8 @@ class WebLN extends Component
 
     public $invoice;
 
+    public bool $paymentDone = false;
+
     public function mount()
     {
         $this->invoice = $this->createInvoice(
@@ -24,6 +26,11 @@ class WebLN extends Component
         );
     }
 
+    public function success($preimage)
+    {
+        $this->paymentDone = true;
+    }
+
     public function reloadMe()
     {
         // full reload current page

resources/js/webln/webln.js

@@ -10,7 +10,7 @@ export default (livewireComponent) => ({
             .then(response => {
                 console.log('Payment response:', response);
                 this.$wire.call('logThis', 'Payment response: ' + JSON.stringify(response));
-                this.$wire.call('reloadMe');
+                this.$wire.call('success', response.preimage);
             })
             .catch(error => {
                 console.error('Payment failed:', error);

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

@@ -5,11 +5,24 @@
         <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">
+            @if(!$paymentDone)
                 <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">
+                    <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>
+            @else
+                <div class="flex justify-center">
+                    <div class="text-green-500">
+                        Success! Payment done.
+                    </div>
+                    <button wire:click="reloadMe"
+                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+                        Reload
+                    </button>
+                </div>
+            @endif
         </div>
     </div>
 </div>