diff --git a/resources/js/clients/payments/braintree-paypal.js b/resources/js/clients/payments/braintree-paypal.js
index 2b43a95f69fa..5d1f1a3ed629 100644
--- a/resources/js/clients/payments/braintree-paypal.js
+++ b/resources/js/clients/payments/braintree-paypal.js
@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license 
  */
 
+import { wait, instant } from '../wait';
+
 class BraintreePayPal {
     initBraintreeDataCollector() {
         window.braintree.client.create({
@@ -86,9 +88,6 @@ class BraintreePayPal {
 
                     onApprove: function (data, actions) {
                         return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
-                            document.querySelector('#paypal-button')?.classList.add('hidden');
-                            document.querySelector('#paypal-spinner')?.classList.remove('hidden');
-
                             let tokenBillingCheckbox = document.querySelector(
                                 'input[name="token-billing-checkbox"]:checked'
                             );
@@ -122,4 +121,8 @@ class BraintreePayPal {
     }
 }
 
-new BraintreePayPal().handle();
+function boot() {
+    new BraintreePayPal().handle();
+}
+
+instant() ? boot() : wait('#braintree-paypal-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/eway-credit-card.js b/resources/js/clients/payments/eway-credit-card.js
index 500432f3aaca..e7efe4e98b9e 100644
--- a/resources/js/clients/payments/eway-credit-card.js
+++ b/resources/js/clients/payments/eway-credit-card.js
@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { wait, instant } from '../wait';
+
 class EwayRapid {
     constructor() {
         this.cardStyles =
@@ -431,11 +433,6 @@ class EwayRapid {
     completeAuthorization(event) {
         event.target.parentElement.disabled = true;
 
-        const button = document.getElementById('authorize-card');
-
-        button.querySelector('svg').classList.remove('hidden');
-        button.querySelector('span').classList.add('hidden');
-
         document.getElementById('server-response').submit();
     }
 
@@ -488,8 +485,7 @@ class EwayRapid {
             })
         );
 
-        if (document.getElementById('toggle-payment-with-credit-card'))
-        {
+        if (document.getElementById('toggle-payment-with-credit-card')) {
             document
                 .getElementById('toggle-payment-with-credit-card')
                 .addEventListener('click', (element) => {
@@ -503,14 +499,9 @@ class EwayRapid {
                 });
         }
 
-        const payNowButton = document.getElementById('pay-now');
-
         document.getElementById('pay-now')?.addEventListener('click', (e) => {
             let tokenInput = document.querySelector('input[name=token]');
 
-            payNowButton.querySelector('svg').classList.remove('hidden');
-            payNowButton.querySelector('span').classList.add('hidden');
-
             if (tokenInput.value) {
                 return this.completePaymentUsingToken(e);
             }
@@ -520,4 +511,8 @@ class EwayRapid {
     }
 }
 
-new EwayRapid().handle();
+function boot() {
+    new EwayRapid().handle();
+}
+
+instant() ? boot() : wait('#eway-credit-card-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/paytrace-credit-card.js b/resources/js/clients/payments/paytrace-credit-card.js
index 5f659a7f7c9e..d951c7ec0e50 100644
--- a/resources/js/clients/payments/paytrace-credit-card.js
+++ b/resources/js/clients/payments/paytrace-credit-card.js
@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { instant, wait } from '../wait';
+
 class PayTraceCreditCard {
     constructor() {
         this.clientKey = document.querySelector(
@@ -122,11 +124,6 @@ class PayTraceCreditCard {
     }
 
     handlePaymentWithCreditCard(event) {
-        const button = document.getElementById('pay-now');
-
-        button.querySelector('svg').classList.remove('hidden');
-        button.querySelector('span').classList.add('hidden');
-
         event.target.parentElement.disabled = true;
         document.getElementById('errors').hidden = true;
 
@@ -137,10 +134,6 @@ class PayTraceCreditCard {
                 errorsContainer.textContent = errors[0].description;
                 errorsContainer.hidden = false;
 
-
-                button.querySelector('svg').classList.add('hidden');
-                button.querySelector('span').classList.remove('hidden');
-
                 return (event.target.parentElement.disabled = false);
             }
 
@@ -170,9 +163,6 @@ class PayTraceCreditCard {
                     ).textContent = JSON.stringify(error);
                     document.getElementById('errors').hidden = false;
 
-                    button.querySelector('svg').classList.add('hidden');
-                    button.querySelector('span').classList.remove('hidden');
-
                     console.log(error);
                 });
         });
@@ -181,16 +171,11 @@ class PayTraceCreditCard {
     handlePaymentWithToken(event) {
         event.target.parentElement.disabled = true;
 
-        const button = document.getElementById('pay-now');
-
-        button.querySelector('svg').classList.remove('hidden');
-        button.querySelector('span').classList.add('hidden');
-
         document.getElementById('server_response').submit();
     }
 
     handle() {
-        
+
         Array.from(
             document.getElementsByClassName('toggle-payment-with-token')
         ).forEach((element) =>
@@ -234,7 +219,15 @@ class PayTraceCreditCard {
 
                 return this.handlePaymentWithToken(e);
             });
+
+        if (Array.from(document.getElementsByClassName('toggle-payment-with-token')).length === 0 && !instant()) {
+            document.getElementById('toggle-payment-with-credit-card').click();
+        }
     }
 }
 
-new PayTraceCreditCard().handle();
+function boot() {
+    new PayTraceCreditCard().handle();
+}
+
+instant() ? boot() : wait('#paytrace-credit-card-payment').then(() => boot())
\ No newline at end of file
diff --git a/resources/js/clients/payments/square-credit-card.js b/resources/js/clients/payments/square-credit-card.js
index 4242eae5d651..73ea9ea503a3 100644
--- a/resources/js/clients/payments/square-credit-card.js
+++ b/resources/js/clients/payments/square-credit-card.js
@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { wait, instant } from '../wait';
+
 class SquareCreditCard {
     constructor() {
         this.appId = document.querySelector('meta[name=square-appId]').content;
@@ -130,54 +132,58 @@ class SquareCreditCard {
 
         await this.init().then(() => {
 
-        document
-            .getElementById('authorize-card')
-            ?.addEventListener('click', (e) =>
-                this.completePaymentWithoutToken(e)
+            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', async (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('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', async (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 = '';
-            });
+            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 = '';
+                });
 
             document.getElementById('loader').classList.add('hidden');
             document.getElementById('payment-list').classList.remove('hidden');
             document.getElementById('toggle-payment-with-credit-card')?.click();
 
-    });
+        });
 
     }
 }
 
-new SquareCreditCard().handle();
+function boot() {
+    new SquareCreditCard().handle();
+}
+
+instant() ? boot() : wait('#square-credit-card-payment').then(() => boot());