Improvements for square payments

turbo124 · Oct 10, 2024 · 9b80f74 · 9b80f74
1 parent 124904c
commit 9b80f74
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
diff --git a/public/build/assets/app-ee6f3b1c.css b/public/build/assets/app-ee6f3b1c.css
diff --git a/public/build/assets/square-credit-card-2fc5c3fa.js b/public/build/assets/square-credit-card-2fc5c3fa.js
diff --git a/public/build/assets/square-credit-card-9e88c754.js b/public/build/assets/square-credit-card-9e88c754.js
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -174,7 +174,7 @@
     "src": "resources/js/clients/payments/razorpay-aio.js"
   },
   "resources/js/clients/payments/square-credit-card.js": {
-    "file": "assets/square-credit-card-2fc5c3fa.js",
+    "file": "assets/square-credit-card-9e88c754.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],

diff --git a/resources/js/clients/payments/square-credit-card.js b/resources/js/clients/payments/square-credit-card.js
@@ -49,6 +49,14 @@ class SquareCreditCard {
         document.getElementById('errors').hidden = true;
         e.target.parentElement.disabled = true;
 
+        let payNowButton = document.getElementById('pay-now');
+        this.payNowButton = payNowButton;
+
+        this.payNowButton.disabled = true;
+
+        this.payNowButton.querySelector('svg').classList.remove('hidden');
+        this.payNowButton.querySelector('span').classList.add('hidden');
+
         let result = await this.card.tokenize();
 
         /* SCA */
@@ -99,11 +107,23 @@ class SquareCreditCard {
         document.getElementById('errors').hidden = false;
 
         e.target.parentElement.disabled = false;
+        this.payNowButton.disabled = false;
+
+        this.payNowButton.querySelector('svg').classList.add('hidden');
+        this.payNowButton.querySelector('span').classList.remove('hidden');
     }
 
     async completePaymentUsingToken(e) {
         e.target.parentElement.disabled = true;
 
+        let payNowButton = document.getElementById('pay-now');
+        this.payNowButton = payNowButton;
+
+        this.payNowButton.disabled = true;
+
+        this.payNowButton.querySelector('svg').classList.remove('hidden');
+        this.payNowButton.querySelector('span').classList.add('hidden');
+
         return document.getElementById('server_response').submit();
     }
 
@@ -173,7 +193,14 @@ class SquareCreditCard {
                     document.querySelector('input[name=token]').value = '';
                 });
 
-            document.getElementById('loader').classList.add('hidden');
+                Array.from(
+                        document.getElementsByClassName('loader')
+                    ).forEach((element) => {
+
+                    element.classList.add('hidden');
+
+                });
+
             document.getElementById('payment-list').classList.remove('hidden');
             document.getElementById('toggle-payment-with-credit-card')?.click();
 

diff --git a/resources/views/portal/ninja2020/gateways/square/credit_card/pay_livewire.blade.php b/resources/views/portal/ninja2020/gateways/square/credit_card/pay_livewire.blade.php
@@ -56,8 +56,8 @@
     @include('portal.ninja2020.gateways.includes.payment_details')
 
     @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
-        <div class="flex flex-col" id="loader">
-            <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4" id="loader"></div>
+        <div class="flex flex-col" >
+            <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
         </div>
 
         <ul class="list-none space-y-2" id="payment-list">