diff --git a/app/Http/Livewire/Test/WebLN.php b/app/Http/Livewire/Test/WebLN.php
index 572cd5fe..b070dd95 100644
--- a/app/Http/Livewire/Test/WebLN.php
+++ b/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);
diff --git a/resources/js/webln/webln.js b/resources/js/webln/webln.js
index 5dcbdc21..4bacb519 100644
--- a/resources/js/webln/webln.js
+++ b/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');
diff --git a/resources/views/livewire/test/web-l-n.blade.php b/resources/views/livewire/test/web-l-n.blade.php
index 6b953f08..f5591b61 100644
--- a/resources/views/livewire/test/web-l-n.blade.php
+++ b/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>