diff --git a/app/PaymentDrivers/Square/CreditCard.php b/app/PaymentDrivers/Square/CreditCard.php
index b2f2a72391..75848bec07 100644
--- a/app/PaymentDrivers/Square/CreditCard.php
+++ b/app/PaymentDrivers/Square/CreditCard.php
@@ -130,9 +130,9 @@ class CreditCard
     {
 
         $data['gateway'] = $this->square_driver;
-        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
 
-        return render('gateways.braintree.credit_card.pay', $data);
+
+        return render('gateways.square.credit_card.pay', $data);
 
     }
 
diff --git a/app/PaymentDrivers/SquarePaymentDriver.php b/app/PaymentDrivers/SquarePaymentDriver.php
index d3c5ab2471..818c1e501a 100644
--- a/app/PaymentDrivers/SquarePaymentDriver.php
+++ b/app/PaymentDrivers/SquarePaymentDriver.php
@@ -102,4 +102,49 @@ class SquarePaymentDriver extends BaseDriver
     public function processWebhookRequest(PaymentWebhookRequest $request, Payment $payment = null)
     {
     }
+
+
+    public function getClientRequiredFields(): array
+    {
+        $fields = [];
+
+        $fields[] = ['name' => 'client_postal_code', 'label' => ctrans('texts.postal_code'), 'type' => 'text', 'validation' => 'required'];
+
+        if ($this->company_gateway->require_client_name) {
+            $fields[] = ['name' => 'client_name', 'label' => ctrans('texts.client_name'), 'type' => 'text', 'validation' => 'required'];
+        }
+
+        if ($this->company_gateway->require_contact_name) {
+            $fields[] = ['name' => 'contact_first_name', 'label' => ctrans('texts.first_name'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'contact_last_name', 'label' => ctrans('texts.last_name'), 'type' => 'text', 'validation' => 'required'];
+        }
+
+        if ($this->company_gateway->require_contact_email) {
+            $fields[] = ['name' => 'contact_email', 'label' => ctrans('texts.email'), 'type' => 'text', 'validation' => 'required,email:rfc'];
+        }
+
+        if ($this->company_gateway->require_client_phone) {
+            $fields[] = ['name' => 'client_phone', 'label' => ctrans('texts.client_phone'), 'type' => 'tel', 'validation' => 'required'];
+        }
+
+        if ($this->company_gateway->require_billing_address) {
+            $fields[] = ['name' => 'client_address_line_1', 'label' => ctrans('texts.address1'), 'type' => 'text', 'validation' => 'required'];
+//            $fields[] = ['name' => 'client_address_line_2', 'label' => ctrans('texts.address2'), 'type' => 'text', 'validation' => 'nullable'];
+            $fields[] = ['name' => 'client_city', 'label' => ctrans('texts.city'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'client_state', 'label' => ctrans('texts.state'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'client_country_id', 'label' => ctrans('texts.country'), 'type' => 'text', 'validation' => 'required'];
+        }
+
+        if ($this->company_gateway->require_shipping_address) {
+            $fields[] = ['name' => 'client_shipping_address_line_1', 'label' => ctrans('texts.shipping_address1'), 'type' => 'text', 'validation' => 'required'];
+//            $fields[] = ['name' => 'client_shipping_address_line_2', 'label' => ctrans('texts.shipping_address2'), 'type' => 'text', 'validation' => 'sometimes'];
+            $fields[] = ['name' => 'client_shipping_city', 'label' => ctrans('texts.shipping_city'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'client_shipping_state', 'label' => ctrans('texts.shipping_state'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'client_shipping_postal_code', 'label' => ctrans('texts.shipping_postal_code'), 'type' => 'text', 'validation' => 'required'];
+            $fields[] = ['name' => 'client_shipping_country_id', 'label' => ctrans('texts.shipping_country'), 'type' => 'text', 'validation' => 'required'];
+        }
+
+
+        return $fields;
+    }
 }
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/square/credit_card/authorize.blade.php b/resources/views/portal/ninja2020/gateways/square/credit_card/authorize.blade.php
index 7bd9f85d4f..0c5eaf2a28 100644
--- a/resources/views/portal/ninja2020/gateways/square/credit_card/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/square/credit_card/authorize.blade.php
@@ -10,14 +10,14 @@
         @csrf
         <input type="text" name="sourceId" id="sourceId" hidden>
    
-    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+      <div class="alert alert-failure mb-4" hidden id="errors"></div>
 
     @component('portal.ninja2020.components.general.card-element-single')
-            <div id="card-container"></div>
+      <div id="card-container"></div>
 
-            <div id="payment-status-container"></div>
+      <div id="payment-status-container"></div>
 
-         </form>
+    </form>
     @endcomponent
 
     @component('portal.ninja2020.gateways.includes.pay_now')
@@ -27,141 +27,143 @@
 
 @section('gateway_footer')
 
- <script
-      type="text/javascript"
-      src="https://sandbox.web.squarecdn.com/v1/square.js"
-    ></script>
-    <script>
-      const appId = "{{ $gateway->company_gateway->getConfigField('applicationId') }}";
-      const locationId = "{{ $gateway->company_gateway->getConfigField('locationId') }}";
+  @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
 
-      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',
-        },
-      };
+  <script>
+    const appId = "{{ $gateway->company_gateway->getConfigField('applicationId') }}";
+    const locationId = "{{ $gateway->company_gateway->getConfigField('locationId') }}";
 
-      async function initializeCard(payments) {
-        const card = await payments.card({
-          style: darkModeCardStyle,
-        });
-        await card.attach('#card-container');
+    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',
+      },
+    };
 
-        return card;
-      }
+    async function initializeCard(payments) {
+      const card = await payments.card({
+        style: darkModeCardStyle,
+      });
+      await card.attach('#card-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
-            )}`;
-          }
+      return card;
+    }
 
-          throw new Error(errorMessage);
+    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
+          )}`;
         }
+
+        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');
       }
 
-      // status is either SUCCESS or FAILURE;
-      function displayPaymentResults(status) {
+      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'
         );
-        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.className = 'missing-credentials';
         statusContainer.style.visibility = 'visible';
+        return;
       }
 
-      document.addEventListener('DOMContentLoaded', async function () {
-        if (!window.Square) {
-          throw new Error('Square.js failed to load properly');
-        }
+      let card;
+      try {
+        card = await initializeCard(payments);
+      } catch (e) {
+        console.error('Initializing Card failed', e);
+        return;
+      }
 
-        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;
-        }
+      async function handlePaymentMethodSubmission(event, paymentMethod) {
+        event.preventDefault();
 
-        let card;
         try {
-          card = await initializeCard(payments);
+          // 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) {
-          console.error('Initializing Card failed', e);
-          return;
+          cardButton.disabled = false;
+          displayPaymentResults('FAILURE');
+          console.error(e.message);
         }
+      }
 
-        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);
-        });
+      const cardButton = document.getElementById('pay-now');
+      cardButton.addEventListener('click', async function (event) {
+        await handlePaymentMethodSubmission(event, card);
       });
-    </script>
+    });
+  </script>
 
   @endsection
\ No newline at end of file
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
new file mode 100644
index 0000000000..e29ed33863
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/square/credit_card/pay.blade.php
@@ -0,0 +1,171 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.payment_type_credit_card'), 'card_title'
+=> ctrans('texts.payment_type_credit_card')])
+
+@section('gateway_head')
+@endsection
+
+@section('gateway_content')
+
+    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response">
+        @csrf
+        <input type="hidden" name="store_card">
+        <input type="text" name="sourceId" id="sourceId" hidden>
+    </form>
+   
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element-single')
+            <div id="card-container"></div>
+
+            <div id="payment-status-container"></div>
+
+         </form>
+    @endcomponent
+
+    @component('portal.ninja2020.gateways.includes.pay_now')
+        {{ ctrans('texts.pay_now') }}
+    @endcomponent
+@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
+
+  <script>
+    const appId = "{{ $gateway->company_gateway->getConfigField('applicationId') }}";
+    const locationId = "{{ $gateway->company_gateway->getConfigField('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',
+      },
+    };
+
+    async function initializeCard(payments) {
+      const card = await payments.card({
+        style: darkModeCardStyle,
+      });
+      await card.attach('#card-container');
+
+      return card;
+    }
+
+    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
+          )}`;
+        }
+
+        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