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

package/package.json

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

package/web-component/swirepay-checkout.js

@@ -181,41 +181,33 @@ 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.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");
             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),
-            loadScript(SDK_CONFIG.plaid)
+            loadScript(SDK_CONFIG.crypto)
         ]);
 
         this.render();
@@ -229,8 +221,6 @@ export class SwirepayCheckout extends HTMLElement {
             "api-key",
             "isaddressrequired",
             "inventory",
-            "plangid",
-            "productname",
             "frequency",
             "description",
             "totalpayments",
@@ -239,13 +229,64 @@ 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;
+
+                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 "frequency":
+                    this.frequency = newValue;
+                    break;
 
-        if (this.shadowRoot) {
-            this.render();
+                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);
         }
     }
 
@@ -571,8 +612,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>
@@ -589,63 +630,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;
-        }
+    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;
+    }
 
-        if (!get("card-name")) {
-            this.setError("card-name", "Card holder name required");
-            isValid = false;
-        }
+    if (!get("card-name")) {
+        this.setError("card-name", "Card holder name required");
+        isValid = false;
+    }
 
-        const cardNumber = get("card")?.replace(/\s/g, "");
-        if (!cardNumber || !/^\d{12,19}$/.test(cardNumber)) {
-            this.setError("card", "Invalid card number");
-            isValid = false;
-        }
+    const cardNumber = get("card")?.replace(/\s/g, "");
+    if (!cardNumber || !/^\d{12,19}$/.test(cardNumber)) {
+        this.setError("card", "Invalid card number");
+        isValid = false;
+    }
 
-        const expiry = get("expiry");
-        if (!expiry || !/^\d{2}\/\d{2}$/.test(expiry)) {
-            this.setError("expiry", "Invalid expiry");
+    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 {
-            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");
+        } 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 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;
@@ -657,41 +698,41 @@ 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 {
             const values = await this.getServerEncription();
@@ -799,7 +840,7 @@ export class SwirepayCheckout extends HTMLElement {
         }
     }
 
-    async recurringPayment() {
+    async recurringPayment () {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
@@ -846,8 +887,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();