diff --git a/resources/js/clients/payments/authorize-credit-card-payment.js b/resources/js/clients/payments/authorize-credit-card-payment.js
index 768d6eac3bdd..1c2c8d88b6a4 100644
--- a/resources/js/clients/payments/authorize-credit-card-payment.js
+++ b/resources/js/clients/payments/authorize-credit-card-payment.js
@@ -5,13 +5,12 @@
  *
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
- * @license https://www.elastic.co/licensing/elastic-license 
+ * @license https://www.elastic.co/licensing/elastic-license
  */
 
 import { wait, instant } from '../wait';
 
 class AuthorizeAuthorizeCard {
-
     constructor(publicKey, loginId) {
         this.publicKey = publicKey;
         this.loginId = loginId;
@@ -32,32 +31,38 @@ class AuthorizeAuthorizeCard {
         this.cvvRequired = document.querySelector(
             'meta[name="authnet-require-cvv"]'
         ).content;
-    
+
     }
 
     handleAuthorization = () => {
+        if (
+            this.cvvRequired == '1' &&
+            document.getElementById('cvv').value.length < 3
+        ) {
+            const $errors = document.getElementById('errors');
 
-        if (cvvRequired == "1" && document.getElementById("cvv").value.length < 3) {
-            var $errors = $('#errors');
-            $errors.show().html("<p>CVV is required</p>");
+            if ($errors) {
+                $errors.innerText = 'CVV is required';
+                $errors.style.display = 'block';
+            }
 
             document.getElementById('pay-now').disabled = false;
             document.querySelector('#pay-now > svg').classList.add('hidden');
-            document.querySelector('#pay-now > span').classList.remove('hidden');
+            document
+                .querySelector('#pay-now > span')
+                .classList.remove('hidden');
             return;
         }
 
-        var myCard = $('#my-card');
-
         var authData = {};
         authData.clientKey = this.publicKey;
         authData.apiLoginID = this.loginId;
 
         var cardData = {};
-        cardData.cardNumber = myCard.CardJs('cardNumber').replace(/[^\d]/g, '');
-        cardData.month = myCard.CardJs('expiryMonth').replace(/[^\d]/g, '');
-        cardData.year = myCard.CardJs('expiryYear').replace(/[^\d]/g, '');
-        cardData.cardCode = document.getElementById("cvv").value.replace(/[^\d]/g, '');
+        cardData.cardNumber = this.sc.value('number')?.replace(/[^\d]/g, '');
+        cardData.month = this.sc.value('month')?.replace(/[^\d]/g, '');
+        cardData.year = `20${this.sc.value('year')?.replace(/[^\d]/g, '')}`;
+        cardData.cardCode = this.sc.value('cvv')?.replace(/[^\d]/g, '');
 
         var secureData = {};
         secureData.authData = authData;
@@ -77,102 +82,111 @@ class AuthorizeAuthorizeCard {
         Accept.dispatchData(secureData, this.responseHandler);
 
         return false;
-
-    }
+    };
 
     handlePayNowAction(token_hashed_id) {
         document.getElementById('pay-now').disabled = true;
         document.querySelector('#pay-now > svg').classList.remove('hidden');
         document.querySelector('#pay-now > span').classList.add('hidden');
 
-        document.getElementById("token").value = token_hashed_id;
-        document.getElementById("server_response").submit();
+        document.getElementById('token').value = token_hashed_id;
+        document.getElementById('server_response').submit();
     }
 
     responseHandler = (response) => {
-        if (response.messages.resultCode === "Error") {
+        if (response.messages.resultCode === 'Error') {
             var i = 0;
 
-            var $errors = $('#errors'); // get the reference of the div
-            $errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>");
+            const $errors = document.getElementById('errors'); // get the reference of the div
+
+            if ($errors) {
+                $errors.innerText = `${response.messages.message[i].code}: ${response.messages.message[i].text}`;
+                $errors.style.display = 'block';
+            }
 
             document.getElementById('pay-now').disabled = false;
             document.querySelector('#pay-now > svg').classList.add('hidden');
-            document.querySelector('#pay-now > span').classList.remove('hidden');
-        } else if (response.messages.resultCode === "Ok") {
+            document
+                .querySelector('#pay-now > span')
+                .classList.remove('hidden');
+        } else if (response.messages.resultCode === 'Ok') {
+            document.getElementById('dataDescriptor').value =
+                response.opaqueData.dataDescriptor;
+            document.getElementById('dataValue').value =
+                response.opaqueData.dataValue;
 
-            document.getElementById("dataDescriptor").value = response.opaqueData.dataDescriptor;
-            document.getElementById("dataValue").value = response.opaqueData.dataValue;
-
-            let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
+            let storeCard = document.querySelector(
+                'input[name=token-billing-checkbox]:checked'
+            );
 
             if (storeCard) {
-                document.getElementById("store_card").value = storeCard.value;
+                document.getElementById('store_card').value = storeCard.value;
             }
 
-            document.getElementById("server_response").submit();
+            document.getElementById('server_response').submit();
         }
 
         return false;
-    }
-
+    };
 
     handle = () => {
-        Array
-            .from(document.getElementsByClassName('toggle-payment-with-token'))
-            .forEach((element) => element.addEventListener('click', (e) => {
-                document
-                    .getElementById('save-card--container').style.display = 'none';
-                document
-                    .getElementById('authorize--credit-card-container').style.display = 'none';
+        Array.from(
+            document.getElementsByClassName('toggle-payment-with-token')
+        ).forEach((element) =>
+            element.addEventListener('click', (e) => {
+                document.getElementById('save-card--container').style.display =
+                    'none';
+                document.getElementById(
+                    'authorize--credit-card-container'
+                ).style.display = 'none';
 
-                document
-                    .getElementById('token').value = e.target.dataset.token;
-            }));
+                document.getElementById('token').value = e.target.dataset.token;
+            })
+        );
 
-        let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card');
+        let payWithCreditCardToggle = document.getElementById(
+            'toggle-payment-with-credit-card'
+        );
 
         if (payWithCreditCardToggle) {
-            payWithCreditCardToggle
-                .addEventListener('click', () => {
-                    document
-                        .getElementById('save-card--container').style.display = 'grid';
-                    document
-                        .getElementById('authorize--credit-card-container').style.display = 'flex';
+            payWithCreditCardToggle.addEventListener('click', () => {
+                document.getElementById('save-card--container').style.display =
+                    'grid';
+                document.getElementById(
+                    'authorize--credit-card-container'
+                ).style.display = 'flex';
 
-                    document
-                        .getElementById('token').value = null;
-                });
+                document.getElementById('token').value = null;
+            });
         }
 
         let payNowButton = document.getElementById('pay-now');
 
         if (payNowButton) {
-            payNowButton
-                .addEventListener('click', (e) => {
-                    let token = document.getElementById('token');
+            payNowButton.addEventListener('click', (e) => {
+                let token = document.getElementById('token');
 
-                    token.value
-                        ? this.handlePayNowAction(token.value)
-                        : this.handleAuthorization();
-                });
+                token.value
+                    ? this.handlePayNowAction(token.value)
+                    : this.handleAuthorization();
+            });
         }
 
         return this;
-    }
+    };
 }
 
-const publicKey = document.querySelector(
-    'meta[name="authorize-public-key"]'
-).content;
+function boot() {
+    const publicKey = document.querySelector(
+        'meta[name="authorize-public-key"]'
+    ).content;
 
-const loginId = document.querySelector(
-    'meta[name="authorize-login-id"]'
-).content;
+    const loginId = document.querySelector(
+        'meta[name="authorize-login-id"]'
+    ).content;
 
-const cvvRequired = document.querySelector(
-    'meta[name="authnet-require-cvv"]'
-).content;
+    /** @handle */
+    new AuthorizeAuthorizeCard(publicKey, loginId).handle();
+}
 
-/** @handle */
-new AuthorizeAuthorizeCard(publicKey, loginId).handle();
+instant() ? boot() : wait('#authorize-net-credit-card-payment').then(() => boot());
diff --git a/resources/js/clients/payments/braintree-credit-card.js b/resources/js/clients/payments/braintree-credit-card.js
index 1c7dacac0489..baa42ff71c88 100644
--- a/resources/js/clients/payments/braintree-credit-card.js
+++ b/resources/js/clients/payments/braintree-credit-card.js
@@ -8,6 +8,7 @@
  * @license https://www.elastic.co/licensing/elastic-license 
  */
 
+import { wait, instant } from '../wait';
 
 class BraintreeCreditCard {
     initBraintreeDataCollector() {
@@ -43,40 +44,39 @@ class BraintreeCreditCard {
         }
 
         let payNow = document.getElementById('pay-now');
-
-        params = JSON.parse(document.querySelector('input[name=threeds]').value);
+        let params = JSON.parse(document.querySelector('input[name=threeds]').value);
 
         payNow.addEventListener('click', () => {
             dropinInstance.requestPaymentMethod({
                 threeDSecure: {
-                  challengeRequested:true,
-                  amount: params.amount,
-                  email: params.email,
-                  billingAddress: {
-                    givenName: params.billingAddress.givenName, // ASCII-printable characters required, else will throw a validation error
-                    surname: params.billingAddress.surname, // ASCII-printable characters required, else will throw a validation error
-                    phoneNumber: params.billingAddress.phoneNumber,
-                    streetAddress: params.billingAddress.streetAddress,
-                    extendedAddress: params.billingAddress.extendedAddress,
-                    locality: params.billingAddress.locality,
-                    region: params.billingAddress.region,
-                    postalCode: params.billingAddress.postalCode,
-                    countryCodeAlpha2: params.billingAddress.countryCodeAlpha2 
-                  }
+                    challengeRequested: true,
+                    amount: params.amount,
+                    email: params.email,
+                    billingAddress: {
+                        givenName: params.billingAddress.givenName, // ASCII-printable characters required, else will throw a validation error
+                        surname: params.billingAddress.surname, // ASCII-printable characters required, else will throw a validation error
+                        phoneNumber: params.billingAddress.phoneNumber,
+                        streetAddress: params.billingAddress.streetAddress,
+                        extendedAddress: params.billingAddress.extendedAddress,
+                        locality: params.billingAddress.locality,
+                        region: params.billingAddress.region,
+                        postalCode: params.billingAddress.postalCode,
+                        countryCodeAlpha2: params.billingAddress.countryCodeAlpha2
+                    }
+                }
+            }, function (err, payload) {
+                if (err) {
+                    console.log(err);
+                    dropin.clearSelectedPaymentMethod();
+                    alert("There was a problem verifying this card, please contact your merchant");
+                    return;
+                }
+
+                if (document.querySelector('input[name=threeds_enable]').value === 'true' && !payload.liabilityShifted) {
+                    console.log('Liability did not shift', payload);
+                    alert("There was a problem verifying this card, please contact your merchant");
+                    return;
                 }
-                }, function(err, payload) {
-                    if (err) {
-                      console.log(err);
-                      dropin.clearSelectedPaymentMethod();
-                      alert("There was a problem verifying this card, please contact your merchant");
-                      return;
-                    }
-                      
-                    if (document.querySelector('input[name=threeds_enable]').value === 'true' && !payload.liabilityShifted) {
-                      console.log('Liability did not shift', payload);
-                      alert("There was a problem verifying this card, please contact your merchant");
-                      return;
-                    }
 
                 payNow.disabled = true;
 
@@ -138,4 +138,8 @@ class BraintreeCreditCard {
     }
 }
 
-new BraintreeCreditCard().handle();
+function boot() {
+    new BraintreeCreditCard().handle();
+}
+
+instant() ? boot() : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/forte-ach-payment.js b/resources/js/clients/payments/forte-ach-payment.js
index 90bf9f675377..2103a96a332b 100644
--- a/resources/js/clients/payments/forte-ach-payment.js
+++ b/resources/js/clients/payments/forte-ach-payment.js
@@ -8,6 +8,8 @@
  * @license https://opensource.org/licenses/AAL
  */
 
+import { wait, instant } from '../wait';
+
 class ForteAuthorizeACH {
     constructor(apiLoginId) {
         this.apiLoginId = apiLoginId;
@@ -73,9 +75,13 @@ class ForteAuthorizeACH {
     };
 }
 
-const apiLoginId = document.querySelector(
-    'meta[name="forte-api-login-id"]'
-).content;
+function boot() {
+    const apiLoginId = document.querySelector(
+        'meta[name="forte-api-login-id"]'
+    ).content;
 
-/** @handle */
-new ForteAuthorizeACH(apiLoginId).handle();
+    /** @handle */
+    new ForteAuthorizeACH(apiLoginId).handle();
+}
+
+instant() ? boot() : wait('#force-ach-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/forte-credit-card-payment.js b/resources/js/clients/payments/forte-credit-card-payment.js
index d6bd2d72a845..3cff32754fd5 100644
--- a/resources/js/clients/payments/forte-credit-card-payment.js
+++ b/resources/js/clients/payments/forte-credit-card-payment.js
@@ -29,14 +29,12 @@ class ForteAuthorizeCard {
     }
 
     handleAuthorization = () => {
-        var myCard = $('#my-card');
-
-        var data = {
+        const data = {
             api_login_id: this.apiLoginId,
-            card_number: myCard.CardJs('cardNumber').replace(/[^\d]/g, ''),
-            expire_year: myCard.CardJs('expiryYear').replace(/[^\d]/g, ''),
-            expire_month: myCard.CardJs('expiryMonth').replace(/[^\d]/g, ''),
-            cvv: document.getElementById('cvv').value.replace(/[^\d]/g, ''),
+            card_number: this.sc.value('number')?.replace(/[^\d]/g, ''),
+            expire_year: `20${this.sc.value('year')?.replace(/[^\d]/g, '')}`,
+            expire_month: this.sc.value('month')?.replace(/[^\d]/g, ''),
+            cvv: this.sc.value('cvv')?.replace(/[^\d]/g, ''),
         };
 
         let payNowButton = document.getElementById('pay-now');
@@ -55,18 +53,8 @@ class ForteAuthorizeCard {
     };
 
     successResponseHandler = (response) => {
-
         document.getElementById('payment_token').value = response.onetime_token;
-        document.getElementById('card_brand').value = response.card_brand;
-        document.getElementById('expire_year').value = response.expire_year;
-        document.getElementById('expire_month').value = response.expire_month;
-        document.getElementById('last_4').value = response.last_4;
-        
-        let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
-
-        if (storeCard) {
-            document.getElementById("store_card").value = storeCard.value;
-        }
+        document.getElementById('card_brand').value = response.card_type;
 
         document.getElementById('server_response').submit();
 
@@ -86,99 +74,26 @@ class ForteAuthorizeCard {
         return false;
     };
 
-
-    handlePayNowAction(token_hashed_id) {
-        document.getElementById('pay-now').disabled = true;
-        document.querySelector('#pay-now > svg').classList.remove('hidden');
-        document.querySelector('#pay-now > span').classList.add('hidden');
-
-        document.getElementById("token").value = token_hashed_id;
-        document.getElementById("server_response").submit();
-    }
-
-
     handle = () => {
-        Array
-            .from(document.getElementsByClassName('toggle-payment-with-token'))
-            .forEach((element) => element.addEventListener('click', (e) => {
-                document
-                    .getElementById('save-card--container').style.display = 'none';
-                document
-                    .getElementById('forte--credit-card-container').style.display = 'none';
-
-                document
-                    .getElementById('token').value = e.target.dataset.token;
-            }));
-
-        let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card');
-
-        if (payWithCreditCardToggle) {
-            payWithCreditCardToggle
-                .addEventListener('click', () => {
-                    document
-                        .getElementById('save-card--container').style.display = 'grid';
-                    document
-                        .getElementById('forte--credit-card-container').style.display = 'flex';
-
-                    document
-                        .getElementById('token').value = null;
-                });
-        }
-
         let payNowButton = document.getElementById('pay-now');
 
         if (payNowButton) {
-            payNowButton
-                .addEventListener('click', (e) => {
-                    let token = document.getElementById('token');
-
-                    token.value
-                        ? this.handlePayNowAction(token.value)
-                        : this.handleAuthorization();
-                });
+            payNowButton.addEventListener('click', (e) => {
+                this.handleAuthorization();
+            });
         }
 
         return this;
-    }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    };
 }
 
-const apiLoginId = document.querySelector(
-    'meta[name="forte-api-login-id"]'
-).content;
+function boot() {
+    const apiLoginId = document.querySelector(
+        'meta[name="forte-api-login-id"]'
+    ).content;
 
-/** @handle */
-new ForteAuthorizeCard(apiLoginId).handle();
+    /** @handle */
+    new ForteAuthorizeCard(apiLoginId).handle();
+}
+
+instant() ? boot() : wait('#forte-credit-card-payment').then(() => boot());
\ No newline at end of file
diff --git a/resources/js/clients/payments/mollie-credit-card.js b/resources/js/clients/payments/mollie-credit-card.js
index c973f1147c58..75cd05925909 100644
--- a/resources/js/clients/payments/mollie-credit-card.js
+++ b/resources/js/clients/payments/mollie-credit-card.js
@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { wait, instant } from '../wait';
+
 class _Mollie {
     constructor() {
         this.mollie = Mollie(
@@ -26,7 +28,7 @@ class _Mollie {
 
         let cardHolderError = document.getElementById('card-holder-error');
 
-        cardHolder.addEventListener('change', function(event) {
+        cardHolder.addEventListener('change', function (event) {
             if (event.error && event.touched) {
                 cardHolderError.textContent = event.error;
             } else {
@@ -43,7 +45,7 @@ class _Mollie {
 
         let cardNumberError = document.getElementById('card-number-error');
 
-        cardNumber.addEventListener('change', function(event) {
+        cardNumber.addEventListener('change', function (event) {
             if (event.error && event.touched) {
                 cardNumberError.textContent = event.error;
             } else {
@@ -60,7 +62,7 @@ class _Mollie {
 
         let expiryDateError = document.getElementById('expiry-date-error');
 
-        expiryDate.addEventListener('change', function(event) {
+        expiryDate.addEventListener('change', function (event) {
             if (event.error && event.touched) {
                 expiryDateError.textContent = event.error;
             } else {
@@ -77,7 +79,7 @@ class _Mollie {
 
         let verificationCodeError = document.getElementById('cvv-error');
 
-        verificationCode.addEventListener('change', function(event) {
+        verificationCode.addEventListener('change', function (event) {
             if (event.error && event.touched) {
                 verificationCodeError.textContent = event.error;
             } else {
@@ -97,7 +99,7 @@ class _Mollie {
             return document.getElementById('server-response').submit();
         }
 
-        this.mollie.createToken().then(function(result) {
+        this.mollie.createToken().then(function (result) {
             let token = result.token;
             let error = result.error;
 
@@ -166,4 +168,9 @@ class _Mollie {
     }
 }
 
-new _Mollie().handle();
+
+function boot() {
+    new _Mollie().handle();
+}
+
+instant() ? boot() : wait('#mollie-credit-card-payment').then(() => boot());
\ No newline at end of file