diff --git a/app/Http/Livewire/RequiredClientInfo.php b/app/Http/Livewire/RequiredClientInfo.php
new file mode 100644
index 000000000000..d01a3e54fae4
--- /dev/null
+++ b/app/Http/Livewire/RequiredClientInfo.php
@@ -0,0 +1,68 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Validator;
+use Livewire\Component;
+
+class RequiredClientInfo extends Component
+{
+    public $fields = [];
+
+    private $gateway;
+
+    public function handleSubmit(array $data): bool
+    {
+        $rules = [];
+
+        collect($this->fields)->map(function ($field) use (&$rules) {
+            $rules[$field['name']] = $field['validation_rules'];
+        });
+
+
+        $validator = Validator::make($data, $rules);
+
+        if ($validator->fails()) {
+            session()->flash('validation_errors', $validator->getMessageBag()->getMessages());
+
+            return false;
+        }
+
+        $this->emit('passed-required-fields-check');
+
+        return true;
+    }
+
+    public function render()
+    {
+        // This will be coming from the gateway itself. Something like $gateway->getRequiredRules();
+
+        $this->fields = [
+            [
+                'name' => 'client_first_name',
+                'label' => ctrans('texts.first_name'),
+                'type' => 'text',
+                'validation_rules' => 'required|min:3'
+            ],
+            [
+                'name' => 'client_billing_address_zip',
+                'label' => ctrans('texts.postal_code'),
+                'type' => 'number',
+                'validation_rules' => 'required|min:2',
+            ],
+        ];
+
+        return render('components.livewire.required-client-info');
+    }
+}
diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index 871f57b567b2..c042c79b484d 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3366,4 +3366,7 @@ return [
 
     'no_action_provided' => 'No action provided. If you believe this is wrong, please contact the support.',
     'no_payable_invoices_selected' => 'No payable invoices selected. Make sure you are not trying to pay draft invoice or invoice with zero balance due.',
+
+    'required_payment_information' => 'Required payment details',
+    'required_payment_information_more' => 'To complete a payment we need more details about you.',
 ];
diff --git a/resources/views/portal/ninja2020/components/livewire/required-client-info.blade.php b/resources/views/portal/ninja2020/components/livewire/required-client-info.blade.php
new file mode 100644
index 000000000000..6fc5543b5e26
--- /dev/null
+++ b/resources/views/portal/ninja2020/components/livewire/required-client-info.blade.php
@@ -0,0 +1,33 @@
+<div class="container mx-auto grid grid-cols-12" data-ref="required-fields-container">
+    <div class="col-span-12 lg:col-span-6 lg:col-start-4 overflow-hidden bg-white shadow rounded-lg">
+        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+                {{ ctrans('texts.required_payment_information') }}
+            </h3>
+
+            <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
+                {{ ctrans('texts.required_payment_information_more') }}
+            </p>
+        </div>
+
+        <form wire:submit.prevent="handleSubmit(Object.fromEntries(new FormData($event.target)))">
+            @foreach($fields as $field)
+                @component('portal.ninja2020.components.general.card-element', ['title' => $field['label']])
+                    <input class="input w-full" type="{{ $field['type'] }}" name="{{ $field['name'] }}">
+
+                    @if(session()->has('validation_errors') && array_key_exists($field['name'], session('validation_errors')))
+                        <p class="mt-2 text-gray-900 border-red-300 px-2 py-1 bg-gray-100">{{ session('validation_errors')[$field['name']][0] }}</p>
+                    @endif
+                @endcomponent
+            @endforeach
+
+            @component('portal.ninja2020.components.general.card-element-single')
+                <div class="flex justify-end">
+                    <button class="button button-primary bg-primary">
+                        {{ trans('texts.next_step') }}
+                    </button>
+                </div>
+            @endcomponent
+        </form>
+    </div>
+</div>
diff --git a/resources/views/portal/ninja2020/layout/payments.blade.php b/resources/views/portal/ninja2020/layout/payments.blade.php
index 000c968f9b52..8460f80612bd 100644
--- a/resources/views/portal/ninja2020/layout/payments.blade.php
+++ b/resources/views/portal/ninja2020/layout/payments.blade.php
@@ -11,7 +11,9 @@
 @endpush
 
 @section('body')
-    <div class="container mx-auto grid grid-cols-12">
+    @livewire('required-client-info', ['gateway' => $gateway])
+
+    <div class="container mx-auto grid grid-cols-12 hidden" data-ref="gateway-container">
         <div class="col-span-12 lg:col-span-6 lg:col-start-4 overflow-hidden bg-white shadow rounded-lg">
             <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                 @isset($card_title)
@@ -19,6 +21,7 @@
                         {{ $card_title }}
                     </h3>
                 @endisset
+
                 @isset($card_description)
                     <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
                         {{ $card_description }}
@@ -34,4 +37,11 @@
 
 @push('footer')
     @yield('gateway_footer')
+
+    <script>
+        Livewire.on('passed-required-fields-check', () => {
+            document.querySelector('div[data-ref="required-fields-container"]').classList.add('hidden');
+            document.querySelector('div[data-ref="gateway-container"]').classList.remove('hidden');
+        });
+    </script>
 @endpush