diff --git a/app/PaymentDrivers/Stripe/CreditCard.php b/app/PaymentDrivers/Stripe/CreditCard.php
index c575f7d03ebf..bf05b4ef12e2 100644
--- a/app/PaymentDrivers/Stripe/CreditCard.php
+++ b/app/PaymentDrivers/Stripe/CreditCard.php
@@ -66,13 +66,7 @@ class CreditCard
             'description' => collect($data['invoices'])->pluck('id'), // TODO: More meaningful description.
         ];
 
-        if ($data['token']) {
-            $payment_intent_data['payment_method'] = $data['token']->token;
-        } else {
-            $payment_intent_data['setup_future_usage'] = 'off_session';
-            // $payment_intent_data['save_payment_method'] = true;
-            // $payment_intent_data['confirm'] = true;
-        }
+        $payment_intent_data['setup_future_usage'] = 'off_session';
 
         $data['intent'] = $this->stripe->createPaymentIntent($payment_intent_data);
         $data['gateway'] = $this->stripe;
diff --git a/public/js/clients/payments/stripe-credit-card.js b/public/js/clients/payments/stripe-credit-card.js
index 61ff954d2283..c99cc4e7c8ba 100755
--- a/public/js/clients/payments/stripe-credit-card.js
+++ b/public/js/clients/payments/stripe-credit-card.js
@@ -1,2 +1,2 @@
 /*! For license information please see stripe-credit-card.js.LICENSE.txt */
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=11)}({11:function(e,t,n){e.exports=n("uALE")},uALE:function(e,t){var n,r,o,i;function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}new(function(){function e(t,n,r,o){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.key=t,this.token=n,this.secret=r,this.onlyAuthorization=o}var t,n,r;return t=e,(n=[{key:"setupStripe",value:function(){return this.stripe=Stripe(this.key),this.elements=this.stripe.elements(),this}},{key:"createElement",value:function(){return this.cardElement=this.elements.create("card"),this}},{key:"mountCardElement",value:function(){return this.cardElement.mount("#card-element"),this}},{key:"completePaymentUsingToken",value:function(){var e=this,t=document.getElementById("pay-now-with-token");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardPayment(this.secret,{payment_method:this.token}).then((function(t){return t.error?e.handleFailure(t.error.message):e.handleSuccess(t)}))}},{key:"completePaymentWithoutToken",value:function(){var e=this,t=document.getElementById("pay-now");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden");var n=document.getElementById("cardholder-name");this.stripe.handleCardPayment(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:n.value}}}).then((function(t){return t.error?e.handleFailure(t.error.message):e.handleSuccess(t)}))}},{key:"handleSuccess",value:function(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);var t=document.querySelector('input[name="token-billing-checkbox"]');t&&(document.querySelector('input[name="store_card"]').value=t.checked),document.getElementById("server-response").submit()}},{key:"handleFailure",value:function(e){var t=document.getElementById("errors");t.textContent="",t.textContent=e,t.hidden=!1,this.payNowButton.disabled=!1,this.payNowButton.querySelector("svg").classList.add("hidden"),this.payNowButton.querySelector("span").classList.remove("hidden")}},{key:"handleAuthorization",value:function(){var e=this,t=document.getElementById("cardholder-name"),n=document.getElementById("authorize-card");this.payNowButton=n,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardSetup(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:t.value}}}).then((function(t){return t.error?e.handleFailure(t):e.handleSuccessfulAuthorization(t)}))}},{key:"handleSuccessfulAuthorization",value:function(e){document.getElementById("gateway_response").value=JSON.stringify(e.setupIntent),document.getElementById("server_response").submit()}},{key:"handle",value:function(){var e=this;this.setupStripe(),this.onlyAuthorization?(this.createElement().mountCardElement(),document.getElementById("authorize-card").addEventListener("click",(function(){return e.handleAuthorization()}))):(this.token&&document.getElementById("pay-now-with-token").addEventListener("click",(function(){return e.completePaymentUsingToken()})),this.token||(this.createElement().mountCardElement(),document.getElementById("pay-now").addEventListener("click",(function(){return e.completePaymentWithoutToken()}))))}}])&&a(t.prototype,n),r&&a(t,r),e}())(null!==(n=document.querySelector('meta[name="stripe-publishable-key"]').content)&&void 0!==n?n:"",null!==(r=document.querySelector('meta[name="stripe-token"]').content)&&void 0!==r?r:"",null!==(o=document.querySelector('meta[name="stripe-secret"]').content)&&void 0!==o?o:"",null!==(i=document.querySelector('meta[name="only-authorization"]').content)&&void 0!==i?i:"").handle()}});
\ No newline at end of file
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=11)}({11:function(e,t,n){e.exports=n("uALE")},uALE:function(e,t){var n,r,o;function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}new(function(){function e(t,n,r){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.key=t,this.secret=n,this.onlyAuthorization=r}var t,n,r;return t=e,(n=[{key:"setupStripe",value:function(){return this.stripe=Stripe(this.key),this.elements=this.stripe.elements(),this}},{key:"createElement",value:function(){return this.cardElement=this.elements.create("card"),this}},{key:"mountCardElement",value:function(){return this.cardElement.mount("#card-element"),this}},{key:"completePaymentUsingToken",value:function(){var e=this,t=document.querySelector("input[name=token]").value,n=document.getElementById("pay-now");this.payNowButton=n,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardPayment(this.secret,{payment_method:t}).then((function(t){return t.error?e.handleFailure(t.error.message):e.handleSuccess(t)}))}},{key:"completePaymentWithoutToken",value:function(){var e=this,t=document.getElementById("pay-now");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden");var n=document.getElementById("cardholder-name");this.stripe.handleCardPayment(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:n.value}}}).then((function(t){return t.error?e.handleFailure(t.error.message):e.handleSuccess(t)}))}},{key:"handleSuccess",value:function(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);var t=document.querySelector('input[name="token-billing-checkbox"]');t&&(document.querySelector('input[name="store_card"]').value=t.checked),document.getElementById("server-response").submit()}},{key:"handleFailure",value:function(e){var t=document.getElementById("errors");t.textContent="",t.textContent=e,t.hidden=!1,this.payNowButton.disabled=!1,this.payNowButton.querySelector("svg").classList.add("hidden"),this.payNowButton.querySelector("span").classList.remove("hidden")}},{key:"handleAuthorization",value:function(){var e=this,t=document.getElementById("cardholder-name"),n=document.getElementById("authorize-card");this.payNowButton=n,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardSetup(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:t.value}}}).then((function(t){return t.error?e.handleFailure(t):e.handleSuccessfulAuthorization(t)}))}},{key:"handleSuccessfulAuthorization",value:function(e){document.getElementById("gateway_response").value=JSON.stringify(e.setupIntent),document.getElementById("server_response").submit()}},{key:"handle",value:function(){var e=this;this.setupStripe(),this.onlyAuthorization?(this.createElement().mountCardElement(),document.getElementById("authorize-card").addEventListener("click",(function(){return e.handleAuthorization()}))):(Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach((function(e){return e.addEventListener("click",(function(e){document.getElementById("stripe--payment-container").classList.add("hidden"),document.querySelector("input[name=token]").value=e.target.dataset.token}))})),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",(function(e){document.getElementById("stripe--payment-container").classList.remove("hidden"),document.querySelector("input[name=token]").value=""})),this.createElement().mountCardElement(),document.getElementById("pay-now").addEventListener("click",(function(){return document.querySelector("input[name=token]").value?e.completePaymentUsingToken():e.completePaymentWithoutToken()})))}}])&&a(t.prototype,n),r&&a(t,r),e}())(null!==(n=document.querySelector('meta[name="stripe-publishable-key"]').content)&&void 0!==n?n:"",null!==(r=document.querySelector('meta[name="stripe-secret"]').content)&&void 0!==r?r:"",null!==(o=document.querySelector('meta[name="only-authorization"]').content)&&void 0!==o?o:"").handle()}});
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 47035267073a..99eb67f96cd1 100755
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -9,7 +9,7 @@
     "/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=935645b176c73b7831f4",
     "/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=c4012ad90f17d60432ad",
     "/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=6dbe9316b98deea55421",
-    "/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=f4659d26a26d2f408397",
+    "/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=e2ccaed999d2ae077c1f",
     "/js/clients/payments/stripe-sofort.js": "/js/clients/payments/stripe-sofort.js?id=9b9fd56d655ad238f149",
     "/js/clients/quotes/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=1b8f9325aa6e8595e7fa",
     "/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",
diff --git a/resources/js/clients/payments/stripe-credit-card.js b/resources/js/clients/payments/stripe-credit-card.js
index d1ac338b9df1..c620ced37c06 100644
--- a/resources/js/clients/payments/stripe-credit-card.js
+++ b/resources/js/clients/payments/stripe-credit-card.js
@@ -9,9 +9,8 @@
  */
 
 class StripeCreditCard {
-    constructor(key, token, secret, onlyAuthorization) {
+    constructor(key, secret, onlyAuthorization) {
         this.key = key;
-        this.token = token;
         this.secret = secret;
         this.onlyAuthorization = onlyAuthorization;
     }
@@ -36,9 +35,11 @@ class StripeCreditCard {
     }
 
     completePaymentUsingToken() {
-        let payNowButton = document.getElementById('pay-now-with-token');
+        let token = document.querySelector('input[name=token]').value;
 
+        let payNowButton = document.getElementById('pay-now');
         this.payNowButton = payNowButton;
+
         this.payNowButton.disabled = true;
 
         this.payNowButton.querySelector('svg').classList.remove('hidden');
@@ -46,7 +47,7 @@ class StripeCreditCard {
 
         this.stripe
             .handleCardPayment(this.secret, {
-                payment_method: this.token,
+                payment_method: token,
             })
             .then((result) => {
                 if (result.error) {
@@ -71,7 +72,7 @@ class StripeCreditCard {
         this.stripe
             .handleCardPayment(this.secret, this.cardElement, {
                 payment_method_data: {
-                    billing_details: { name: cardHolderName.value },
+                    billing_details: {name: cardHolderName.value},
                 },
             })
             .then((result) => {
@@ -126,7 +127,7 @@ class StripeCreditCard {
         this.stripe
             .handleCardSetup(this.secret, this.cardElement, {
                 payment_method_data: {
-                    billing_details: { name: cardHolderName.value },
+                    billing_details: {name: cardHolderName.value},
                 },
             })
             .then((result) => {
@@ -158,23 +159,33 @@ class StripeCreditCard {
                     return this.handleAuthorization();
                 });
         } else {
-            if (this.token) {
-                document
-                    .getElementById('pay-now-with-token')
-                    .addEventListener('click', () => {
+            Array
+                .from(document.getElementsByClassName('toggle-payment-with-token'))
+                .forEach((element) => element.addEventListener('click', (element) => {
+                    document.getElementById('stripe--payment-container').classList.add('hidden');
+                    document.querySelector('input[name=token]').value = element.target.dataset.token;
+                }));
+
+            document
+                .getElementById('toggle-payment-with-credit-card')
+                .addEventListener('click', (element) => {
+                    document.getElementById('stripe--payment-container').classList.remove('hidden');
+                    document.querySelector('input[name=token]').value = "";
+                });
+
+            this.createElement().mountCardElement();
+
+            document
+                .getElementById('pay-now')
+                .addEventListener('click', () => {
+                    let tokenInput = document.querySelector('input[name=token]');
+
+                    if (tokenInput.value) {
                         return this.completePaymentUsingToken();
-                    });
-            }
+                    }
 
-            if (!this.token) {
-                this.createElement().mountCardElement();
-
-                document
-                    .getElementById('pay-now')
-                    .addEventListener('click', () => {
-                        return this.completePaymentWithoutToken();
-                    });
-            }
+                    return this.completePaymentWithoutToken();
+                });
         }
     }
 }
@@ -182,12 +193,10 @@ class StripeCreditCard {
 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 onlyAuthorization =
     document.querySelector('meta[name="only-authorization"]').content ?? '';
 
-new StripeCreditCard(publishableKey, token, secret, onlyAuthorization).handle();
+new StripeCreditCard(publishableKey, secret, onlyAuthorization).handle();
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
index 1aa55ed5d661..bf0a4181b4a7 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php
@@ -3,7 +3,6 @@
 @section('gateway_head')
     <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
     <meta name="stripe-secret" content="{{ $intent->client_secret }}">
-    <meta name="stripe-token" content="{{ optional($token)->token }}">
     <meta name="only-authorization" content="">
 @endsection
 
@@ -16,6 +15,8 @@
 
         <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
         <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+
+        <input type="hidden" name="token">
     </form>
 
     <div class="alert alert-failure mb-4" hidden id="errors"></div>
@@ -26,16 +27,36 @@
 
     @include('portal.ninja2020.gateways.includes.payment_details')
 
-    @if($token)
-        @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
-        @include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token'])
-    @else
-        @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-        @include('portal.ninja2020.gateways.includes.pay_now')
-    @endif
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+        @if(count($tokens) > 0)
+            @foreach($tokens as $token)
+                <label class="mr-4">
+                    <input
+                        type="radio"
+                        data-token="{{ $token->token }}"
+                        name="payment-type"
+                        class="form-radio cursor-pointer toggle-payment-with-token"/>
+                    <span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
+                </label>
+            @endforeach
+        @endisset
+
+        <label>
+            <input
+                type="radio"
+                id="toggle-payment-with-credit-card"
+                class="form-radio cursor-pointer"
+                name="payment-type"
+                checked/>
+            <span class="ml-1 cursor-pointer">{{ __('texts.credit_card') }}</span>
+        </label>
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
+    @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection
 
 @section('gateway_footer')
     <script src="https://js.stripe.com/v3/"></script>
     <script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
-@endsection
\ No newline at end of file
+@endsection
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 5d8e554f5840..e5a9df327f3b 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,13 +1,15 @@
-@unless(isset($show_name) && $show_name == false)
-    @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
+<div id="stripe--payment-container">
+    @unless(isset($show_name) && $show_name == false)
+        @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)
-    @component('portal.ninja2020.components.general.card-element-single')
-        <div id="card-element"></div>
-    @endcomponent
-@endunless
+    @unless(isset($show_card_element) && $show_card_element == false)
+        @component('portal.ninja2020.components.general.card-element-single')
+            <div id="card-element"></div>
+        @endcomponent
+    @endunless
+</div>
 
-@include('portal.ninja2020.gateways.includes.save_card')
\ No newline at end of file
+@include('portal.ninja2020.gateways.includes.save_card')