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

package/package.json

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

package/web-component/swirepay-checkout.js

@@ -182,38 +182,31 @@ export class SwirepayCheckout extends HTMLElement {
         return await response.json();
     }
 
-    async updateFromAttributes() {
+    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.frequency = this.getAttribute("frequency");
+        this.description = this.getAttribute("description");
+        this.accountGid = this.getAttribute('accountGid');
+        this.totalPayments = this.getAttribute('totalPayments');
         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 && this.inventoryOrder) {
+            if (this.inventory) {
                 const splitUpInfo = await this.getSplitUpDetails(this.inventoryOrder);
                 this.splitUp = splitUpInfo?.entity;
             }
-
         } catch (e) {
-            console.error("Attribute parsing error:", e);
+            console.error("Invalid JSON", e);
+            this.customer = {};
+            this.inventoryOrder = {};
         }
-    }
-
-    async connectedCallback() {
-        await this.updateFromAttributes();
-
         await Promise.all([
             loadScript(SDK_CONFIG.elliptic),
             loadScript(SDK_CONFIG.crypto),
@@ -231,8 +224,6 @@ export class SwirepayCheckout extends HTMLElement {
             "api-key",
             "isaddressrequired",
             "inventory",
-            "plangid",
-            "productname",
             "frequency",
             "description",
             "totalpayments",
@@ -241,34 +232,93 @@ export class SwirepayCheckout extends HTMLElement {
         ];
     }
 
-    async attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
 
-        await this.updateFromAttributes();
+        try {
+            switch (name) {
+                case "amount":
+                    this.amount = parseInt(newValue) || 0;
+                    break;
+
+                case "mode":
+                    this.test = newValue === "test";
+                    break;
 
-        if (this.shadowRoot) {
-            this.render();
+                case "currencycode":
+                    this.currencyCode = newValue;
+                    break;
+
+                case "api-key":
+                    this.apiKey = newValue;
+                    break;
+
+                case "isaddressrequired":
+                    this.isAddressRequired = newValue === "true";
+                    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;
+                    
+                case "inventory":
+                    this.inventory = newValue === "true";
+
+                    if (this.inventory && this.inventoryOrder) {
+                        this.getSplitUpDetails(this.inventoryOrder).then(res => {
+                            this.splitUp = res?.entity;
+                            this.render();
+                        });
+                        return;
+                    }
+                    break;
+
+                default:
+                    break;
+            }
+            if (this.shadowRoot) {
+                this.render();
+            }
+
+        } catch (e) {
+            console.error(`Invalid value for ${name}`, e);
         }
     }
 
     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 {
@@ -592,8 +642,8 @@ export class SwirepayCheckout extends HTMLElement {
   <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>
@@ -610,26 +660,26 @@ export class SwirepayCheckout extends HTMLElement {
     }
 
     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;
@@ -640,49 +690,49 @@ export class SwirepayCheckout extends HTMLElement {
                 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");
+    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 (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);
     }
@@ -691,7 +741,7 @@ export class SwirepayCheckout extends HTMLElement {
         return v.replace(/\D/g, "").slice(0, 9);
     }
 
-    async oneTimePayment() {
+     async oneTimePayment() {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -793,7 +843,7 @@ export class SwirepayCheckout extends HTMLElement {
         }
     }
 
-    async recurringPayment() {
+    async recurringPayment () {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -840,8 +890,8 @@ export class SwirepayCheckout extends HTMLElement {
                     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();