diff --git a/app/PaymentDrivers/Square/CreditCard.php b/app/PaymentDrivers/Square/CreditCard.php
index 75848bec07d5..ba2ab43b2cac 100644
--- a/app/PaymentDrivers/Square/CreditCard.php
+++ b/app/PaymentDrivers/Square/CreditCard.php
@@ -136,9 +136,9 @@ class CreditCard
 
     }
 
-    public function processPaymentResponse($request)
+    public function paymentResponse($request)
     {
-        
+        // ..
     }
 
     /* This method is stubbed ready to go - you just need to harvest the equivalent 'transaction_reference' */
diff --git a/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
index e29ed3386375..ec4ade5214bd 100644
--- a/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
@@ -2,170 +2,170 @@
 => ctrans('texts.payment_type_credit_card')])
 
 @section('gateway_head')
+    <meta name="square-appId" content="{{ $gateway->company_gateway->getConfigField('applicationId') }}">
+    <meta name="square-locationId" content="{{ $gateway->company_gateway->getConfigField('locationId') }}">
 @endsection
 
 @section('gateway_content')
-
-    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response">
+    <form action="{{ route('client.payments.response') }}" method="post" id="server_response">
         @csrf
         <input type="hidden" name="store_card">
-        <input type="text" name="sourceId" id="sourceId" hidden>
+        <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 }}">
+
+        <input type="hidden" name="token">
+        <input type="hidden" name="sourceId" id="sourceId">
     </form>
-   
+
     <div class="alert alert-failure mb-4" hidden id="errors"></div>
 
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.credit_card') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+
+    @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.new_card') }}</span>
+        </label>
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.save_card')
+
     @component('portal.ninja2020.components.general.card-element-single')
-            <div id="card-container"></div>
-
-            <div id="payment-status-container"></div>
-
-         </form>
+        <div id="card-container"></div>
+        <div id="payment-status-container"></div>
     @endcomponent
 
-    @component('portal.ninja2020.gateways.includes.pay_now')
-        {{ ctrans('texts.pay_now') }}
-    @endcomponent
+    @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection
 
 @section('gateway_footer')
+    @if ($gateway->company_gateway->getConfigField('testMode'))
+        <script type="text/javascript" src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
+    @else
+        <script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
+    @endif
 
-  @if($gateway->company_gateway->getConfigField('testMode'))
-    <script type="text/javascript" src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
-  @else
-    <script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
-  @endif
+    <script>
+        class SquareCreditCard {
+            constructor() {
+                this.appId = document.querySelector('meta[name=square-appId]').content;
+                this.locationId = document.querySelector('meta[name=square-locationId]').content;
+            }
 
-  <script>
-    const appId = "{{ $gateway->company_gateway->getConfigField('applicationId') }}";
-    const locationId = "{{ $gateway->company_gateway->getConfigField('locationId') }}";
+            async init() {
+                this.payments = Square.payments(this.appId, this.locationId);
 
-    const darkModeCardStyle = {
-      '.input-container': {
-        borderColor: '#2D2D2D',
-        borderRadius: '6px',
-      },
-      '.input-container.is-focus': {
-        borderColor: '#006AFF',
-      },
-      '.input-container.is-error': {
-        borderColor: '#ff1600',
-      },
-      '.message-text': {
-        color: '#999999',
-      },
-      '.message-icon': {
-        color: '#999999',
-      },
-      '.message-text.is-error': {
-        color: '#ff1600',
-      },
-      '.message-icon.is-error': {
-        color: '#ff1600',
-      },
-      input: {
-        backgroundColor: '#2D2D2D',
-        color: '#FFFFFF',
-        fontFamily: 'helvetica neue, sans-serif',
-      },
-      'input::placeholder': {
-        color: '#999999',
-      },
-      'input.is-error': {
-        color: '#ff1600',
-      },
-    };
+                this.card = await this.payments.card();
 
-    async function initializeCard(payments) {
-      const card = await payments.card({
-        style: darkModeCardStyle,
-      });
-      await card.attach('#card-container');
+                await this.card.attach('#card-container');
 
-      return card;
-    }
+                let iframeContainer = document.querySelector('.sq-card-iframe-container');
 
-    async function tokenize(paymentMethod) {
-      const tokenResult = await paymentMethod.tokenize();
-      if (tokenResult.status === 'OK') {
-        return tokenResult.token;
-      } else {
-        let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
-        if (tokenResult.errors) {
-          errorMessage += ` and errors: ${JSON.stringify(
-            tokenResult.errors
-          )}`;
+                if (iframeContainer) {
+                    iframeContainer.setAttribute('style', '150px !important');
+                }
+
+                let toggleWithToken = document.querySelector('.toggle-payment-with-token');
+
+                if (toggleWithToken) {
+                    document.getElementById('card-container').classList.add('hidden');
+                }
+            }
+
+            async completePaymentWithoutToken(e) {
+                document.getElementById('errors').hidden = true;
+                e.target.parentElement.disabled = true;
+
+                let result = await this.card.tokenize();
+
+                if (result.status === 'OK') {
+                    document.getElementById('sourceId').value = result.token;
+
+                    let tokenBillingCheckbox = document.querySelector(
+                        'input[name="token-billing-checkbox"]:checked'
+                    );
+
+                    if (tokenBillingCheckbox) {
+                        document.querySelector('input[name="store_card"]').value =
+                            tokenBillingCheckbox.value;
+                    }
+
+                    return document.getElementById('server_response').submit();
+                }
+
+                document.getElementById('errors').textContent = result.errors[0].message;
+                document.getElementById('errors').hidden = false;
+
+                e.target.parentElement.disabled = false;
+            }
+
+            async completePaymentUsingToken(e) {
+                e.target.parentElement.disabled = true;
+
+                return document.getElementById('server_response').submit();
+            }
+
+            async handle() {
+                document
+                    .getElementById('authorize-card')
+                    ?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
+
+                document
+                    .getElementById('pay-now')
+                    .addEventListener('click', (e) => {
+                        let tokenInput = document.querySelector('input[name=token]');
+
+                        if (tokenInput.value) {
+                            return this.completePaymentUsingToken(e);
+                        }
+
+                        return this.completePaymentWithoutToken(e);
+                    });
+
+                Array
+                    .from(document.getElementsByClassName('toggle-payment-with-token'))
+                    .forEach((element) => element.addEventListener('click', (element) => {
+                        document.getElementById('card-container').classList.add('hidden');
+                        document.getElementById('save-card--container').style.display = 'none';
+                        document.querySelector('input[name=token]').value = element.target.dataset.token;
+                    }));
+
+                document
+                    .getElementById('toggle-payment-with-credit-card')
+                    .addEventListener('click', async (element) => {
+                        await this.init();
+
+                        document.getElementById('card-container').classList.remove('hidden');
+                        document.getElementById('save-card--container').style.display = 'grid';
+                        document.querySelector('input[name=token]').value = "";
+                    });
+
+                let toggleWithToken = document.querySelector('.toggle-payment-with-token');
+
+                if (!toggleWithToken) {
+                    document.getElementById('toggle-payment-with-credit-card').click();
+                }
+            }
         }
 
-        throw new Error(errorMessage);
-      }
-    }
-
-    // status is either SUCCESS or FAILURE;
-    function displayPaymentResults(status) {
-      const statusContainer = document.getElementById(
-        'payment-status-container'
-      );
-      if (status === 'SUCCESS') {
-        statusContainer.classList.remove('is-failure');
-        statusContainer.classList.add('is-success');
-      } else {
-        statusContainer.classList.remove('is-success');
-        statusContainer.classList.add('is-failure');
-      }
-
-      statusContainer.style.visibility = 'visible';
-    }
-
-    document.addEventListener('DOMContentLoaded', async function () {
-      if (!window.Square) {
-        throw new Error('Square.js failed to load properly');
-      }
-
-      let payments;
-      try {
-        payments = window.Square.payments(appId, locationId);
-      } catch {
-        const statusContainer = document.getElementById(
-          'payment-status-container'
-        );
-        statusContainer.className = 'missing-credentials';
-        statusContainer.style.visibility = 'visible';
-        return;
-      }
-
-      let card;
-      try {
-        card = await initializeCard(payments);
-      } catch (e) {
-        console.error('Initializing Card failed', e);
-        return;
-      }
-
-      async function handlePaymentMethodSubmission(event, paymentMethod) {
-        event.preventDefault();
-
-        try {
-          // disable the submit button as we await tokenization and make a payment request.
-          cardButton.disabled = true;
-          const token = await tokenize(paymentMethod);
-
-          document.getElementById('sourceId').value = token;
-          document.getElementById('server_response').submit();
-  
-          displayPaymentResults('SUCCESS');
-
-        } catch (e) {
-          cardButton.disabled = false;
-          displayPaymentResults('FAILURE');
-          console.error(e.message);
-        }
-      }
-
-      const cardButton = document.getElementById('pay-now');
-      cardButton.addEventListener('click', async function (event) {
-        await handlePaymentMethodSubmission(event, card);
-      });
-    });
-  </script>
-
-@endsection
\ No newline at end of file
+        new SquareCreditCard().handle();
+    </script>
+@endsection