diff --git a/app/Http/Requests/ClientPortal/Payments/PaymentResponseRequest.php b/app/Http/Requests/ClientPortal/Payments/PaymentResponseRequest.php
index 8fa841f04870..d3980f4b89af 100644
--- a/app/Http/Requests/ClientPortal/Payments/PaymentResponseRequest.php
+++ b/app/Http/Requests/ClientPortal/Payments/PaymentResponseRequest.php
@@ -39,14 +39,16 @@ class PaymentResponseRequest extends FormRequest
 
     public function prepareForValidation()
     {
-        $store_card = false;
-
-        if ($this->has('store_card') && ($this->store_card === "true" || $this->store_card === true)) {
-            $store_card = true;
+        if ($this->has('store_card')) {
+            $this->merge([
+                'store_card' => ($this->store_card === "true" || $this->store_card === true) ? true : false,
+            ]);
         }
 
-        $this->merge([
-            'store_card' => $store_card,
-        ]);
+        if ($this->has('pay_with_token')) {
+            $this->merge([
+                'pay_with_token' => ($this->pay_with_token === "true" || $this->pay_with_token === true) ? true : false,
+            ]);
+        }
     }
 }
diff --git a/app/PaymentDrivers/BaseDriver.php b/app/PaymentDrivers/BaseDriver.php
index 82c82d836071..ce2b9ff5bac6 100644
--- a/app/PaymentDrivers/BaseDriver.php
+++ b/app/PaymentDrivers/BaseDriver.php
@@ -169,7 +169,7 @@ class BaseDriver extends AbstractPaymentDriver
 
         $payment->amount = $data['amount'];
         $payment->type_id = $data['payment_type'];
-        $payment->transaction_reference = $data['payment_method'];
+        $payment->transaction_reference = $data['transaction_reference'];
         $payment->client_contact_id = $client_contact_id;
         $payment->save();
 
diff --git a/app/PaymentDrivers/CheckoutCom/CreditCard.php b/app/PaymentDrivers/CheckoutCom/CreditCard.php
index 55f7f2af9e73..ec0cb84735c2 100644
--- a/app/PaymentDrivers/CheckoutCom/CreditCard.php
+++ b/app/PaymentDrivers/CheckoutCom/CreditCard.php
@@ -88,7 +88,7 @@ class CreditCard
         $this->checkout->payment_hash->data = array_merge((array) $this->checkout->payment_hash->data, $state);
         $this->checkout->payment_hash->save();
 
-        if ($request->has('token') && !is_null($request->token)) {
+        if ($request->has('token') && !is_null($request->token) && $request->pay_with_token) {
             return $this->attemptPaymentUsingToken($request);
         }
 
diff --git a/app/PaymentDrivers/CheckoutCom/Utilities.php b/app/PaymentDrivers/CheckoutCom/Utilities.php
index 291eeb4b80f4..05740d3e8e10 100644
--- a/app/PaymentDrivers/CheckoutCom/Utilities.php
+++ b/app/PaymentDrivers/CheckoutCom/Utilities.php
@@ -57,6 +57,7 @@ trait Utilities
             'payment_method' => $_payment->source['id'],
             'payment_type' => PaymentType::parseCardType(strtolower($_payment->source['scheme'])),
             'amount' => $this->checkout->payment_hash->data->raw_value,
+            'transaction_reference' => $_payment->reference,
         ];
 
         $payment = $this->checkout->createPayment($data, \App\Models\Payment::STATUS_COMPLETED);
diff --git a/resources/js/clients/payments/checkout.com.js b/resources/js/clients/payments/checkout.com.js
index f00797a9628b..44837919c8f7 100644
--- a/resources/js/clients/payments/checkout.com.js
+++ b/resources/js/clients/payments/checkout.com.js
@@ -8,6 +8,48 @@
  * @license https://opensource.org/licenses/AAL
  */
 
+document
+    .getElementById('toggle-payment-with-token')
+    .addEventListener('click', () => {
+        document.getElementById('save-card--container').style.display = 'none';
+        document.getElementById('checkout--container').style.display = 'none';
+        document.getElementById('pay-now-with-token--container').style.display =
+            'block';
+
+        document.querySelector('input[name=pay_with_token]').value = true;
+    });
+
+document
+    .getElementById('toggle-payment-with-credit-card')
+    .addEventListener('click', () => {
+        document.getElementById('save-card--container').style.display = 'grid';
+        document.getElementById('checkout--container').style.display = 'block';
+        document.getElementById('pay-now-with-token--container').style.display =
+            'none';
+
+        document.querySelector('input[name=pay_with_token]').value = false;
+    });
+
+const completePayment = (data = null) => {
+    if (data) {
+        document.querySelector(
+            'input[name="gateway_response"]'
+        ).value = JSON.stringify(data.data);
+    }
+
+    document.querySelector(
+        'input[name="store_card"]'
+    ).value = document.querySelector(
+        'input[name=token-billing-checkbox]:checked'
+    ).value;
+
+    document.getElementById('server-response').submit();
+};
+
+document
+    .getElementById('pay-now-with-token')
+    .addEventListener('click', completePayment);
+
 window.CKOConfig = {
     publicKey: document.querySelector('meta[name="public-key"]').content,
     customerEmail: document.querySelector('meta[name="customer-email"]')
@@ -17,14 +59,6 @@ window.CKOConfig = {
     paymentMode: 'cards',
     cardFormMode: 'cardTokenisation',
     cardTokenised: function(event) {
-        document.querySelector(
-            'input[name="gateway_response"]'
-        ).value = JSON.stringify(event.data);
-
-        document.querySelector(
-            'input[name="store_card"]'
-        ).value = document.querySelector('input[name=token-billing-checkbox]:checked').value;
-        
-        document.getElementById('server-response').submit();
+        completePayment(event);
     },
 };
diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index cb9a39ba64f2..a1b819bad51c 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3292,4 +3292,6 @@ return [
 
     'pay_with_credit' => 'Pay with credit',
     'payment_method_saving_failed' => 'Payment method can\'t be saved for future use.',
+    
+    'pay_with' => 'Pay with',
 ];
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
index 3856a589f9ec..6d266ceda522 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
@@ -20,6 +20,7 @@
         <input type="hidden" name="value" value="{{ $value }}">
         <input type="hidden" name="raw_value" value="{{ $raw_value }}">
         <input type="hidden" name="currency" value="{{ $currency }}">
+        <input type="hidden" name="pay_with_token" value="false">
         
         @isset($token)
             <input type="hidden" name="token" value="{{ $token->token }}">
@@ -31,10 +32,30 @@
     @endcomponent
 
     @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+        <label class="mr-4">
+            <input 
+                type="radio" 
+                id="toggle-payment-with-token" 
+                class="form-radio cursor-pointer" name="payment-type" />
+            <span class="ml-1 cursor-pointer">**** {{ $token->meta->last4 }}</span>
+        </label>
+        <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.includes.save_card')
 
     @component('portal.ninja2020.components.general.card-element-single')
-        <form class="payment-form" method="POST" action="#">
+        <form class="payment-form" method="POST" action="#" id="checkout--container">
             @if(app()->environment() == 'production')
                 <script async src="https://cdn.checkout.com/js/checkout.js"></script>
             @else
@@ -42,6 +63,12 @@
             @endif
         </form>
     @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element-single')
+       <div class="hidden" id="pay-now-with-token--container">
+            @include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token'])
+       </div>
+    @endcomponent
 @endsection
 
 @section('gateway_footer')
diff --git a/resources/views/portal/ninja2020/gateways/includes/save_card.blade.php b/resources/views/portal/ninja2020/gateways/includes/save_card.blade.php
index 06bcf3d55489..9855728992f0 100644
--- a/resources/views/portal/ninja2020/gateways/includes/save_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/includes/save_card.blade.php
@@ -1,5 +1,5 @@
 @unless(isset($show_save) && $show_save == false)
-    <div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
+    <div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6" id="save-card--container">
         <dt class="text-sm leading-5 font-medium text-gray-500">
             {{ ctrans('texts.token_billing_checkbox') }}
         </dt>
diff --git a/resources/views/portal/ninja2020/payments/show.blade.php b/resources/views/portal/ninja2020/payments/show.blade.php
index c50dc4792107..093084da0e13 100644
--- a/resources/views/portal/ninja2020/payments/show.blade.php
+++ b/resources/views/portal/ninja2020/payments/show.blade.php
@@ -31,7 +31,9 @@
                         {{ ctrans('texts.transaction_reference') }}
                     </dt>
                     <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                        {{ $payment->transaction_reference }}
+                        <span class="break-all">
+                            {{ $payment->transaction_reference }}
+                        </span>
                     </dd>
                 </div>
                 @endif