diff --git a/resources/js/clients/payments/square-credit-card.js b/resources/js/clients/payments/square-credit-card.js
new file mode 100644
index 000000000000..a8eabd2161e5
--- /dev/null
+++ b/resources/js/clients/payments/square-credit-card.js
@@ -0,0 +1,136 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+class SquareCreditCard {
+    constructor() {
+        this.appId = document.querySelector('meta[name=square-appId]').content;
+        this.locationId = document.querySelector(
+            'meta[name=square-locationId]'
+        ).content;
+        this.isLoaded = false;
+    }
+
+    async init() {
+        this.payments = Square.payments(this.appId, this.locationId);
+
+        this.card = await this.payments.card();
+
+        await this.card.attach('#card-container');
+
+        this.isLoaded = true;
+
+        let iframeContainer = document.querySelector(
+            '.sq-card-iframe-container'
+        );
+
+        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) => {
+                document
+                    .getElementById('card-container')
+                    .classList.remove('hidden');
+                document.getElementById('save-card--container').style.display =
+                    'grid';
+                document.querySelector('input[name=token]').value = '';
+
+                if (!this.isLoaded) {
+                    await this.init();
+                }
+            });
+
+        let toggleWithToken = document.querySelector(
+            '.toggle-payment-with-token'
+        );
+
+        if (!toggleWithToken) {
+            document.getElementById('toggle-payment-with-credit-card').click();
+        }
+    }
+}
+
+new SquareCreditCard().handle();
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 71276af89889..3af1b4b17066 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
@@ -32,48 +32,5 @@
         <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;
-            }
-
-            async init() {
-                this.payments = Square.payments(this.appId, this.locationId);
-
-                this.card = await this.payments.card();
-
-                await this.card.attach('#card-container');
-            }
-
-            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;
-
-                    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 handle() {
-                await this.init();
-
-                document
-                    .getElementById('authorize-card')
-                    ?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
-            }
-        }
-
-        new SquareCreditCard().handle();
-    </script>
+    <script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
 @endsection
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 e6f8d956e425..92c121e912c1 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
@@ -63,114 +63,5 @@
         <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;
-                this.isLoaded = false;
-            }
-
-            async init() {
-                this.payments = Square.payments(this.appId, this.locationId);
-
-                this.card = await this.payments.card();
-
-                await this.card.attach('#card-container');
-
-                this.isLoaded = true;
-
-                let iframeContainer = document.querySelector('.sq-card-iframe-container');
-
-                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) => {
-                        document.getElementById('card-container').classList.remove('hidden');
-                        document.getElementById('save-card--container').style.display = 'grid';
-                        document.querySelector('input[name=token]').value = "";
-
-                        if (!this.isLoaded) {
-                            await this.init();
-                        }
-                    });
-
-                let toggleWithToken = document.querySelector('.toggle-payment-with-token');
-
-                if (!toggleWithToken) {
-                    document.getElementById('toggle-payment-with-credit-card').click();
-                }
-            }
-        }
-
-        new SquareCreditCard().handle();
-    </script>
+    <script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
 @endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index d482c62934cb..c3f00d136572 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -89,6 +89,10 @@ mix.js("resources/js/app.js", "public/js")
     .js(
         "resources/js/clients/payments/mollie-credit-card.js",
         "public/js/clients/payments/mollie-credit-card.js"
+    )
+    .js(
+        "resources/js/clients/payments/square-credit-card.js",
+        "public/js/clients/payments/square-credit-card.js"
     );
 
 mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');