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

package/package.json

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

package/web-component/swirepay-checkout.js

@@ -181,35 +181,41 @@ 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.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");
             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)
+            loadScript(SDK_CONFIG.crypto),
+            loadScript(SDK_CONFIG.plaid)
         ]);
 
         this.render();
@@ -233,72 +239,13 @@ 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;
+        await this.updateFromAttributes();
 
-                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();
-            }
-
-        } catch (e) {
-            console.error(`Invalid value for ${name}`, e);
+        if (this.shadowRoot) {
+            this.render();
         }
     }
 
@@ -624,8 +571,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>
@@ -642,63 +589,63 @@ 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();
+        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;
-    }
+        if (!get("name")) {
+            this.setError("name", "Name required");
+            isValid = false;
+        }
 
-    if (!get("card-name")) {
-        this.setError("card-name", "Card holder 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 cardNumber = get("card")?.replace(/\s/g, "");
-    if (!cardNumber || !/^\d{12,19}$/.test(cardNumber)) {
-        this.setError("card", "Invalid card number");
-        isValid = false;
-    }
+        if (!get("card-name")) {
+            this.setError("card-name", "Card holder name required");
+            isValid = false;
+        }
 
-    const expiry = get("expiry");
-    if (!expiry || !/^\d{2}\/\d{2}$/.test(expiry)) {
-        this.setError("expiry", "Invalid expiry");
-        isValid = false;
-    } else {
-        const [mm, yy] = expiry.split("/").map(Number);
-        const now = new Date();
-        const currentYear = now.getFullYear() % 100;
-        const currentMonth = now.getMonth() + 1;
-
-        if (mm < 1 || mm > 12) {
-            this.setError("expiry", "Invalid month");
+        const cardNumber = get("card")?.replace(/\s/g, "");
+        if (!cardNumber || !/^\d{12,19}$/.test(cardNumber)) {
+            this.setError("card", "Invalid card number");
             isValid = false;
-        } else if (yy < currentYear || (yy === currentYear && mm < currentMonth)) {
-            this.setError("expiry", "Card expired");
+        }
+
+        const expiry = get("expiry");
+        if (!expiry || !/^\d{2}\/\d{2}$/.test(expiry)) {
+            this.setError("expiry", "Invalid expiry");
             isValid = false;
+        } else {
+            const [mm, yy] = expiry.split("/").map(Number);
+            const now = new Date();
+            const currentYear = now.getFullYear() % 100;
+            const currentMonth = now.getMonth() + 1;
+
+            if (mm < 1 || mm > 12) {
+                this.setError("expiry", "Invalid month");
+                isValid = false;
+            } else if (yy < currentYear || (yy === currentYear && mm < currentMonth)) {
+                this.setError("expiry", "Card expired");
+                isValid = false;
+            }
         }
-    }
 
-    const cvv = get("cvv");
-    if (!cvv || !/^\d{3,4}$/.test(cvv)) {
-        this.setError("cvv", "Invalid CVV");
-        isValid = false;
-    }
+        const cvv = get("cvv");
+        if (!cvv || !/^\d{3,4}$/.test(cvv)) {
+            this.setError("cvv", "Invalid CVV");
+            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;
@@ -710,40 +657,40 @@ export class SwirepayCheckout extends HTMLElement {
             }
         }
 
-    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;
+    }
 
     async oneTimePayment() {
         try {
@@ -852,7 +799,7 @@ export class SwirepayCheckout extends HTMLElement {
         }
     }
 
-    async recurringPayment () {
+    async recurringPayment() {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -899,8 +846,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();