@swirepay-developer/swirepay-ach-sdk 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swirepay-developer/swirepay-ach-sdk",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Swirepay Ach Payment SDK (Web Component with Modal UI)",
   "main": "index.js",
   "type": "module",

package/web-component/swirepay-checkout.js

@@ -182,33 +182,38 @@ export class SwirepayCheckout extends HTMLElement {
         return await response.json();
     }
 
-    async connectedCallback() {
-        this.amount = parseInt(this.getAttribute("amount")) || 0;
-        this.test = this.getAttribute("mode") === "test";
-        this.currencyCode = this.getAttribute("currencyCode");
-        this.apiKey = this.getAttribute("api-key");
-        this.isAddressRequired = this.getAttribute("isAddressRequired") === "true";
-        this.inventory = this.getAttribute("inventory") === "true";
-        this.planGid = this.getAttribute("planGid");
-        this.productName = this.getAttribute("productName");
-        this.frequency = this.getAttribute("frequency");
-        this.description = this.getAttribute("description");
-        this.accountGid = this.getAttribute('accountGid');
-        this.totalPayments = this.getAttribute('totalPayments');
+    async updateFromAttributes() {
         try {
+            this.amount = parseInt(this.getAttribute("amount")) || 0;
+            this.test = this.getAttribute("mode") === "test";
+            this.currencyCode = this.getAttribute("currencycode");
+            this.apiKey = this.getAttribute("api-key");
+            this.isAddressRequired = this.getAttribute("isaddressrequired") === "true";
+            this.inventory = this.getAttribute("inventory") === "true";
+            this.planGid = this.getAttribute("plangid");
+            this.productName = this.getAttribute("productname");
+            this.frequency = this.getAttribute("frequency");
+            this.description = this.getAttribute("description");
+            this.totalPayments = this.getAttribute("totalpayments");
+            this.accountGid = this.getAttribute("accountgid");
             const customerAttr = this.getAttribute("customer");
             this.customer = customerAttr ? JSON.parse(customerAttr) : {};
-            const inventoryOrders = this.getAttribute("inventoryOrders");
+
+            const inventoryOrders = this.getAttribute("inventoryorders");
             this.inventoryOrder = inventoryOrders ? JSON.parse(inventoryOrders) : {};
-            if (this.inventory) {
+            if (this.inventory && this.inventoryOrder) {
                 const splitUpInfo = await this.getSplitUpDetails(this.inventoryOrder);
                 this.splitUp = splitUpInfo?.entity;
             }
+
         } catch (e) {
-            console.error("Invalid JSON", e);
-            this.customer = {};
-            this.inventoryOrder = {};
+            console.error("Attribute parsing error:", e);
         }
+    }
+
+    async connectedCallback() {
+        await this.updateFromAttributes();
+
         await Promise.all([
             loadScript(SDK_CONFIG.elliptic),
             loadScript(SDK_CONFIG.crypto),
@@ -236,93 +241,34 @@ export class SwirepayCheckout extends HTMLElement {
         ];
     }
 
-    attributeChangedCallback(name, oldValue, newValue) {
+    async attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
 
-        try {
-            switch (name) {
-                case "amount":
-                    this.amount = parseInt(newValue) || 0;
-                    break;
-
-                case "mode":
-                    this.test = newValue === "test";
-                    break;
-
-                case "currencycode":
-                    this.currencyCode = newValue;
-                    break;
-
-                case "api-key":
-                    this.apiKey = newValue;
-                    break;
-
-                case "isaddressrequired":
-                    this.isAddressRequired = newValue === "true";
-                    break;
-
-                case "inventory":
-                    this.inventory = newValue === "true";
-                    break;
-
-                case "plangid":
-                    this.planGid = newValue;
-                    break;
-
-                case "productname":
-                    this.productName = newValue;
-                    break;
-
-                case "frequency":
-                    this.frequency = newValue;
-                    break;
-
-                case "description":
-                    this.description = newValue;
-                    break;
-
-                case "totalpayments":
-                    this.totalPayments = newValue;
-                    break;
-
-                case "customer":
-                    this.customer = newValue ? JSON.parse(newValue) : {};
-                    break;
-
-                case "inventoryorders":
-                    this.inventoryOrder = newValue ? JSON.parse(newValue) : {};
-                    break;
-
-                default:
-                    break;
-            }
-            if (this.shadowRoot) {
-                this.render();
-            }
+        await this.updateFromAttributes();
 
-        } catch (e) {
-            console.error(`Invalid value for ${name}`, e);
+        if (this.shadowRoot) {
+            this.render();
         }
     }
 
     setError(id, message) {
-    const input = this.shadow.getElementById(id);
-    const errorEl = this.shadow.getElementById(`error-${id}`);
+        const input = this.shadow.getElementById(id);
+        const errorEl = this.shadow.getElementById(`error-${id}`);
 
-    if (errorEl) errorEl.textContent = message || "";
+        if (errorEl) errorEl.textContent = message || "";
 
-    if (input) {
-        if (message) input.classList.add("input-error");
-        else input.classList.remove("input-error");
+        if (input) {
+            if (message) input.classList.add("input-error");
+            else input.classList.remove("input-error");
+        }
     }
-}
 
-clearErrors() {
-    this.shadow.querySelectorAll(".error").forEach(e => e.textContent = "");
-    this.shadow.querySelectorAll("input, select").forEach(el => {
-        el.classList.remove("input-error");
-    });
-}
+    clearErrors() {
+        this.shadow.querySelectorAll(".error").forEach(e => e.textContent = "");
+        this.shadow.querySelectorAll("input, select").forEach(el => {
+            el.classList.remove("input-error");
+        });
+    }
 
     async encryptData(data, serverPublicKey, clientPrivateKey, keyId) {
         try {
@@ -646,8 +592,8 @@ clearErrors() {
   <div class="field">
     <select id="country" required>
       ${COUNTRIES_LIST.map(c =>
-        `<option value="${c.code}" ${c.code === "US" ? "selected" : ""}>${c.name}</option>`
-      ).join("")}
+            `<option value="${c.code}" ${c.code === "US" ? "selected" : ""}>${c.name}</option>`
+        ).join("")}
     </select>
     <label class="floating">Country *</label>
   </div>
@@ -664,26 +610,26 @@ clearErrors() {
     }
 
     validate() {
-    this.clearErrors();
-    let isValid = true;
+        this.clearErrors();
+        let isValid = true;
 
-    const get = id => this.shadow.getElementById(id)?.value?.trim();
-    if (!get("name")) {
-        this.setError("name", "Name required");
-        isValid = false;
-    }
+        const get = id => this.shadow.getElementById(id)?.value?.trim();
+        if (!get("name")) {
+            this.setError("name", "Name required");
+            isValid = false;
+        }
 
-    const email = get("email");
-    if (!email) {
-        this.setError("email", "Email required");
-        isValid = false;
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-        this.setError("email", "Invalid email");
-        isValid = false;
-    }
+        const email = get("email");
+        if (!email) {
+            this.setError("email", "Email required");
+            isValid = false;
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+            this.setError("email", "Invalid email");
+            isValid = false;
+        }
 
-    const phone = get("phone")?.replace(/\D/g, "");
-    const code = get("phone-code");
+        const phone = get("phone")?.replace(/\D/g, "");
+        const code = get("phone-code");
         if (!phone || !code) {
             this.setError("phone", "Phone number required");
             isValid = false;
@@ -694,48 +640,48 @@ clearErrors() {
                 isValid = false;
             }
         }
-    if (!this.processorToken) {
-        this.setError("bank", "Please link bank account");
+        if (!this.processorToken) {
+            this.setError("bank", "Please link bank account");
             isValid = false;
         }
-    if (!get("business-type")) {
-        this.setError("business-type", "Select business type");
-        isValid = false;
-    }
-    if (this.isAddressRequired) {
-        if (!get("street")) {
-            this.setError("street", "Street required");
+        if (!get("business-type")) {
+            this.setError("business-type", "Select business type");
             isValid = false;
         }
+        if (this.isAddressRequired) {
+            if (!get("street")) {
+                this.setError("street", "Street required");
+                isValid = false;
+            }
 
-        if (!get("city")) {
-            this.setError("city", "City required");
-            isValid = false;
-        }
+            if (!get("city")) {
+                this.setError("city", "City required");
+                isValid = false;
+            }
 
-        if (!get("state")) {
-            this.setError("state", "State required");
-            isValid = false;
-        }
+            if (!get("state")) {
+                this.setError("state", "State required");
+                isValid = false;
+            }
 
-        if (!get("country")) {
-            this.setError("country", "Country required");
-            isValid = false;
-        }
+            if (!get("country")) {
+                this.setError("country", "Country required");
+                isValid = false;
+            }
 
-        const zip = get("zip");
+            const zip = get("zip");
 
-        if (!zip) {
-            this.setError("zip", "ZIP required");
-            isValid = false;
-        } else if (postalCodes.validate(get("country"), zip) !== true) {
-            this.setError("zip", "Invalid ZIP code");
-            isValid = false;
+            if (!zip) {
+                this.setError("zip", "ZIP required");
+                isValid = false;
+            } else if (postalCodes.validate(get("country"), zip) !== true) {
+                this.setError("zip", "Invalid ZIP code");
+                isValid = false;
+            }
         }
-    }
 
-    return isValid;
-}
+        return isValid;
+    }
 
     formatAccountNumber(v) {
         return v.replace(/\D/g, "").slice(0, 18);
@@ -745,7 +691,7 @@ clearErrors() {
         return v.replace(/\D/g, "").slice(0, 9);
     }
 
-     async oneTimePayment() {
+    async oneTimePayment() {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -847,7 +793,7 @@ clearErrors() {
         }
     }
 
-    async recurringPayment () {
+    async recurringPayment() {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -894,8 +840,8 @@ clearErrors() {
                     if (itemInfo?.entity?.content[0]?.gid) {
                         product = itemInfo?.entity?.content[0];
                     } else {
-                       const newItemInfo = await this.addedItemInfo();
-                       product = newItemInfo?.entity;
+                        const newItemInfo = await this.addedItemInfo();
+                        product = newItemInfo?.entity;
                     }
                     let plan;
                     const planInfo = await this.getPlan();