diff --git a/resources/js/clients/payments/process.js b/resources/js/clients/payments/stripe-credit-card.js
similarity index 88%
rename from resources/js/clients/payments/process.js
rename to resources/js/clients/payments/stripe-credit-card.js
index 279469a6a099..f5b2c32629bd 100644
--- a/resources/js/clients/payments/process.js
+++ b/resources/js/clients/payments/stripe-credit-card.js
@@ -8,10 +8,11 @@
  * @license https://opensource.org/licenses/AAL
  */
 
-class ProcessStripePayment {
-    constructor(key, usingToken) {
+class StripeCreditCard {
+    constructor(key, token, secret) {
         this.key = key;
-        this.usingToken = usingToken;
+        this.token = token;
+        this.secret = secret;
     }
 
     setupStripe() {
@@ -67,7 +68,7 @@ class ProcessStripePayment {
         let cardHolderName = document.getElementById('cardholder-name');
 
         this.stripe
-            .handleCardPayment(payNowButton.dataset.secret, this.cardElement, {
+            .handleCardPayment(this.secret, this.cardElement, {
                 payment_method_data: {
                     billing_details: { name: cardHolderName.value },
                 },
@@ -131,10 +132,8 @@ class ProcessStripePayment {
     }
 }
 
-const publishableKey = document.querySelector(
-    'meta[name="stripe-publishable-key"]'
-).content;
+const publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content;
+const token = document.querySelector('meta[name="stripe-token"]').content;
+const secret = document.querySelector('meta[name="stripe-secret"]').content;
 
-const usingToken = document.querySelector('meta[name="using-token"]').content;
-
-new ProcessStripePayment(publishableKey, usingToken).handle();
+new StripeCreditCard(publishableKey, token, secret).handle();
diff --git a/resources/views/portal/ninja2020/gateways/includes/pay_now.blade.php b/resources/views/portal/ninja2020/gateways/includes/pay_now.blade.php
new file mode 100644
index 000000000000..d3bdcc8c83e7
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/includes/pay_now.blade.php
@@ -0,0 +1,9 @@
+<div class="bg-white px-4 py-5 flex justify-end">
+    <button type="button" id="{{ $id ?? 'pay-now' }}" class="button button-primary bg-primary">
+        <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span>{{ __('texts.pay_now') }}</span>
+    </button>
+</div>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
index 1fbef7f295b2..7beefe76861f 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
@@ -1,12 +1,12 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.pay_now'))
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Stripe (Credit card)', 'card_title' => 'Stripe (Credit card)'])
 
-@push('head')
+@section('gateway_head')
     <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
-    <meta name="using-token" content="{{ boolval($token) }}">
-@endpush
+    <meta name="stripe-token" content="{{ $token }}">
+    <meta name="stripe-secret" content="{{ $intent->client_secret }}">
+@endsection
 
-@section('body')
+@section('gateway_content')
     <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
         @csrf
         <input type="hidden" name="gateway_response">
@@ -17,49 +17,15 @@
         <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
     </form>
 
-    <div class="container mx-auto">
-        <div class="grid grid-cols-6 gap-4">
-            <div class="col-span-6 md:col-start-2 md:col-span-4">
-                <div class="alert alert-failure mb-4" hidden id="errors"></div>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
-                        <h3 class="text-lg leading-6 font-medium text-gray-900">
-                            {{ ctrans('texts.pay_now') }}
-                        </h3>
-                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
-                            {{ ctrans('texts.complete_your_payment') }}
-                        </p>
-                    </div>
-                    <div>
-                        <dl>
-                            @include('portal.ninja2020.gateways.includes.payment_details')
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.credit_card') }} (Stripe)
+    @endcomponent
 
-                            @if((int)$total['amount_with_fee'] == 0)
-                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
-                            @elseif($token)
-                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
-                            @else
-                                @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-
-                                <div class="bg-white px-4 py-5 flex justify-end">
-                                    <button type="button" id="pay-now" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
-                                        <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                        </svg>
-                                        <span>{{ __('texts.pay_now') }}</span>
-                                    </button>
-                                </div>
-                            @endif
-                        </dl>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
+    @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection
 
-@push('footer')
+@section('gateway_footer')
     <script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payments/process.js') }}"></script>
-@endpush
+    <script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old
new file mode 100644
index 000000000000..1fbef7f295b2
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old
@@ -0,0 +1,65 @@
+@extends('portal.ninja2020.layout.app')
+@section('meta_title', ctrans('texts.pay_now'))
+
+@push('head')
+    <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
+    <meta name="using-token" content="{{ boolval($token) }}">
+@endpush
+
+@section('body')
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card">
+        <input type="hidden" name="payment_hash" value="{{$payment_hash}}">
+
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+    </form>
+
+    <div class="container mx-auto">
+        <div class="grid grid-cols-6 gap-4">
+            <div class="col-span-6 md:col-start-2 md:col-span-4">
+                <div class="alert alert-failure mb-4" hidden id="errors"></div>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+                        <h3 class="text-lg leading-6 font-medium text-gray-900">
+                            {{ ctrans('texts.pay_now') }}
+                        </h3>
+                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+                            {{ ctrans('texts.complete_your_payment') }}
+                        </p>
+                    </div>
+                    <div>
+                        <dl>
+                            @include('portal.ninja2020.gateways.includes.payment_details')
+
+                            @if((int)$total['amount_with_fee'] == 0)
+                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
+                            @elseif($token)
+                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
+                            @else
+                                @include('portal.ninja2020.gateways.stripe.includes.card_widget')
+
+                                <div class="bg-white px-4 py-5 flex justify-end">
+                                    <button type="button" id="pay-now" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
+                                        <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        </svg>
+                                        <span>{{ __('texts.pay_now') }}</span>
+                                    </button>
+                                </div>
+                            @endif
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('footer')
+    <script src="https://js.stripe.com/v3/"></script>
+    <script src="{{ asset('js/clients/payments/process.js') }}"></script>
+@endpush
diff --git a/resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php b/resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php
index db649eb7fe0f..5d8e554f5840 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php
@@ -1,39 +1,13 @@
 @unless(isset($show_name) && $show_name == false)
-    <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-            {{ ctrans('texts.name') }}
-        </dt>
-        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-            <input class="input w-full" id="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
-        </dd>
-    </div>
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.name')])
+        <input class="input w-full" id="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
+    @endcomponent
 @endunless
 
 @unless(isset($show_card_element) && $show_card_element == false)
-    <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-        <dt class="text-sm leading-5 font-medium text-gray-500">
-            {{ ctrans('texts.credit_card') }}
-        </dt>
-        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-            <div id="card-element"></div>
-        </dd>
-    </div>
+    @component('portal.ninja2020.components.general.card-element-single')
+        <div id="card-element"></div>
+    @endcomponent
 @endunless
 
-@unless(isset($show_save) && $show_save == false)
-    <div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
-        <dt class="text-sm leading-5 font-medium text-gray-500">
-            {{ ctrans('texts.token_billing_checkbox') }}
-        </dt>
-        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-            <label class="mr-4">
-                <input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="true" {{ ($gateway->token_billing == 'always' || $gateway->token_billing == 'optout') ? 'checked' : '' }} />
-                <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
-            </label>
-            <label>
-                <input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="false" {{ ($gateway->token_billing == 'off' || $gateway->token_billing == 'optin') ? 'checked' : '' }} />
-                <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
-            </label>
-        </dd>
-    </div>
-@endunless
+@include('portal.ninja2020.gateways.includes.save_card')
\ No newline at end of file