diff --git a/app/Livewire/BillingPortal/Payments/Methods.php b/app/Livewire/BillingPortal/Payments/Methods.php
new file mode 100644
index 000000000000..e6ea3d719073
--- /dev/null
+++ b/app/Livewire/BillingPortal/Payments/Methods.php
@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace App\Livewire\BillingPortal\Payments;
+
+use App\Models\Subscription;
+use Livewire\Component;
+
+class Methods extends Component
+{
+    public Subscription $subscription;
+
+    public array $context;
+
+    public array $methods;
+
+    public function mount(): void
+    {
+        $total = collect($this->context['products'])->sum('total_raw');
+
+        $methods = auth()->guard('contact')->user()->client->service()->getPaymentMethods(
+            $total,
+        );
+
+        $this->methods = $methods;
+    }
+
+    public function handleSelect(string $company_gateway_id, string $gateway_type_id)
+    {
+        //
+    }
+
+    public function render()
+    {
+        return view('billing-portal.v3.payments.methods');
+    }
+}
diff --git a/resources/views/billing-portal/v3/payments/methods.blade.php b/resources/views/billing-portal/v3/payments/methods.blade.php
new file mode 100644
index 000000000000..427cd1de03d8
--- /dev/null
+++ b/resources/views/billing-portal/v3/payments/methods.blade.php
@@ -0,0 +1,9 @@
+<div>
+    <h1 class="text-2xl">{{ ctrans('texts.payment_methods') }}</h1>
+
+    @foreach($methods as $method)
+        <button wire:click="handleSelect('{{ $method['company_gateway_id'] }}', '{{ $method['gateway_type_id'] }}')">
+            {{ $method['label'] }}
+        </button>
+    @endforeach
+</div>