Improvements for square payments

public/build/assets/square-credit-card-2fc5c3fa.js

@@ -1,9 +0,0 @@
-import{i,w as d}from"./wait-8f4ae121.js";/**
- * 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 s{constructor(){this.appId=document.querySelector("meta[name=square-appId]").content,this.locationId=document.querySelector("meta[name=square-locationId]").content,this.isLoaded=!1}async init(){this.payments=Square.payments(this.appId,this.locationId),this.card=await this.payments.card(),await this.card.attach("#card-container"),this.isLoaded=!0;let e=document.querySelector(".sq-card-iframe-container");e&&e.setAttribute("style","150px !important"),document.querySelector(".toggle-payment-with-token")&&document.getElementById("card-container").classList.add("hidden")}async completePaymentWithoutToken(e){document.getElementById("errors").hidden=!0,e.target.parentElement.disabled=!0;let t=await this.card.tokenize(),o;try{const n={amount:document.querySelector("meta[name=amount]").content,billingContact:JSON.parse(document.querySelector("meta[name=square_contact]").content),currencyCode:document.querySelector("meta[name=currencyCode]").content,intent:"CHARGE"};o=(await this.payments.verifyBuyer(t.token,n)).token}catch{e.target.parentElement.disabled=!0}if(document.querySelector('input[name="verificationToken"]').value=o,t.status==="OK"){document.getElementById("sourceId").value=t.token;let n=document.querySelector('input[name="token-billing-checkbox"]:checked');return n&&(document.querySelector('input[name="store_card"]').value=n.value),document.getElementById("server_response").submit()}document.getElementById("errors").textContent=t.errors[0].message,document.getElementById("errors").hidden=!1,e.target.parentElement.disabled=!1}async completePaymentUsingToken(e){return e.target.parentElement.disabled=!0,document.getElementById("server_response").submit()}async verifyBuyer(e){const t={amount:document.querySelector("meta[name=amount]").content,billingContact:document.querySelector("meta[name=square_contact]").content,currencyCode:document.querySelector("meta[name=currencyCode]").content,intent:"CHARGE"};return(await this.payments.verifyBuyer(e,t)).token}async handle(){document.getElementById("payment-list").classList.add("hidden"),await this.init().then(()=>{var e,t,o,n;(e=document.getElementById("authorize-card"))==null||e.addEventListener("click",a=>this.completePaymentWithoutToken(a)),(t=document.getElementById("pay-now"))==null||t.addEventListener("click",a=>document.querySelector("input[name=token]").value?this.completePaymentUsingToken(a):this.completePaymentWithoutToken(a)),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(a=>a.addEventListener("click",async r=>{document.getElementById("card-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=r.target.dataset.token})),(o=document.getElementById("toggle-payment-with-credit-card"))==null||o.addEventListener("click",async a=>{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"),(n=document.getElementById("toggle-payment-with-credit-card"))==null||n.click()})}}function c(){new s().handle()}i()?c():d("#square-credit-card-payment").then(()=>c());

public/build/assets/square-credit-card-9e88c754.js

@@ -0,0 +1,9 @@
+import{i as c,w as d}from"./wait-8f4ae121.js";/**
+ * 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 s{constructor(){this.appId=document.querySelector("meta[name=square-appId]").content,this.locationId=document.querySelector("meta[name=square-locationId]").content,this.isLoaded=!1}async init(){this.payments=Square.payments(this.appId,this.locationId),this.card=await this.payments.card(),await this.card.attach("#card-container"),this.isLoaded=!0;let t=document.querySelector(".sq-card-iframe-container");t&&t.setAttribute("style","150px !important"),document.querySelector(".toggle-payment-with-token")&&document.getElementById("card-container").classList.add("hidden")}async completePaymentWithoutToken(t){document.getElementById("errors").hidden=!0,t.target.parentElement.disabled=!0;let n=document.getElementById("pay-now");this.payNowButton=n,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden");let a=await this.card.tokenize(),o;try{const e={amount:document.querySelector("meta[name=amount]").content,billingContact:JSON.parse(document.querySelector("meta[name=square_contact]").content),currencyCode:document.querySelector("meta[name=currencyCode]").content,intent:"CHARGE"};o=(await this.payments.verifyBuyer(a.token,e)).token}catch{t.target.parentElement.disabled=!0}if(document.querySelector('input[name="verificationToken"]').value=o,a.status==="OK"){document.getElementById("sourceId").value=a.token;let e=document.querySelector('input[name="token-billing-checkbox"]:checked');return e&&(document.querySelector('input[name="store_card"]').value=e.value),document.getElementById("server_response").submit()}document.getElementById("errors").textContent=a.errors[0].message,document.getElementById("errors").hidden=!1,t.target.parentElement.disabled=!1,this.payNowButton.disabled=!1,this.payNowButton.querySelector("svg").classList.add("hidden"),this.payNowButton.querySelector("span").classList.remove("hidden")}async completePaymentUsingToken(t){t.target.parentElement.disabled=!0;let n=document.getElementById("pay-now");return this.payNowButton=n,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),document.getElementById("server_response").submit()}async verifyBuyer(t){const n={amount:document.querySelector("meta[name=amount]").content,billingContact:document.querySelector("meta[name=square_contact]").content,currencyCode:document.querySelector("meta[name=currencyCode]").content,intent:"CHARGE"};return(await this.payments.verifyBuyer(t,n)).token}async handle(){document.getElementById("payment-list").classList.add("hidden"),await this.init().then(()=>{var t,n,a,o;(t=document.getElementById("authorize-card"))==null||t.addEventListener("click",e=>this.completePaymentWithoutToken(e)),(n=document.getElementById("pay-now"))==null||n.addEventListener("click",e=>document.querySelector("input[name=token]").value?this.completePaymentUsingToken(e):this.completePaymentWithoutToken(e)),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(e=>e.addEventListener("click",async r=>{document.getElementById("card-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=r.target.dataset.token})),(a=document.getElementById("toggle-payment-with-credit-card"))==null||a.addEventListener("click",async e=>{document.getElementById("card-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value=""}),Array.from(document.getElementsByClassName("loader")).forEach(e=>{e.classList.add("hidden")}),document.getElementById("payment-list").classList.remove("hidden"),(o=document.getElementById("toggle-payment-with-credit-card"))==null||o.click()})}}function i(){new s().handle()}c()?i():d("#square-credit-card-payment").then(()=>i());

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"
     ],

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();
 

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="flex flex-col" >
-            <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="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">