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

package/package.json

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

package/web-component/swirepay-checkout.js

@@ -108,133 +108,8 @@ const USA_STATES = [
 ];
 
 const COUNTRIES_LIST = [
-    { "name": "Afghanistan", "code": "AF" },
-    { "name": "Albania", "code": "AL" },
-    { "name": "Algeria", "code": "DZ" },
-    { "name": "Andorra", "code": "AD" },
-    { "name": "Angola", "code": "AO" },
-    { "name": "Antigua and Barbuda", "code": "AG" },
-    { "name": "Argentina", "code": "AR" },
-    { "name": "Armenia", "code": "AM" },
-    { "name": "Australia", "code": "AU" },
-    { "name": "Austria", "code": "AT" },
-    { "name": "Azerbaijan", "code": "AZ" },
-    { "name": "Bahamas", "code": "BS" },
-    { "name": "Bahrain", "code": "BH" },
-    { "name": "Bangladesh", "code": "BD" },
-    { "name": "Barbados", "code": "BB" },
-    { "name": "Belarus", "code": "BY" },
-    { "name": "Belgium", "code": "BE" },
-    { "name": "Belize", "code": "BZ" },
-    { "name": "Benin", "code": "BJ" },
-    { "name": "Bhutan", "code": "BT" },
-    { "name": "Bolivia", "code": "BO" },
-    { "name": "Bosnia and Herzegovina", "code": "BA" },
-    { "name": "Botswana", "code": "BW" },
-    { "name": "Brazil", "code": "BR" },
-    { "name": "Brunei", "code": "BN" },
-    { "name": "Bulgaria", "code": "BG" },
-    { "name": "Burkina Faso", "code": "BF" },
-    { "name": "Burundi", "code": "BI" },
-    { "name": "Cambodia", "code": "KH" },
-    { "name": "Cameroon", "code": "CM" },
-    { "name": "Canada", "code": "CA" },
-    { "name": "Cape Verde", "code": "CV" },
-    { "name": "Central African Republic", "code": "CF" },
-    { "name": "Chad", "code": "TD" },
-    { "name": "Chile", "code": "CL" },
-    { "name": "China", "code": "CN" },
-    { "name": "Colombia", "code": "CO" },
-    { "name": "Comoros", "code": "KM" },
-    { "name": "Congo", "code": "CG" },
-    { "name": "Costa Rica", "code": "CR" },
-    { "name": "Croatia", "code": "HR" },
-    { "name": "Cuba", "code": "CU" },
-    { "name": "Cyprus", "code": "CY" },
-    { "name": "Czech Republic", "code": "CZ" },
-    { "name": "Denmark", "code": "DK" },
-    { "name": "Djibouti", "code": "DJ" },
-    { "name": "Dominica", "code": "DM" },
-    { "name": "Dominican Republic", "code": "DO" },
-    { "name": "Ecuador", "code": "EC" },
-    { "name": "Egypt", "code": "EG" },
-    { "name": "El Salvador", "code": "SV" },
-    { "name": "Equatorial Guinea", "code": "GQ" },
-    { "name": "Eritrea", "code": "ER" },
-    { "name": "Estonia", "code": "EE" },
-    { "name": "Ethiopia", "code": "ET" },
-    { "name": "Fiji", "code": "FJ" },
-    { "name": "Finland", "code": "FI" },
-    { "name": "France", "code": "FR" },
-    { "name": "Gabon", "code": "GA" },
-    { "name": "Gambia", "code": "GM" },
-    { "name": "Georgia", "code": "GE" },
-    { "name": "Germany", "code": "DE" },
-    { "name": "Ghana", "code": "GH" },
-    { "name": "Greece", "code": "GR" },
-    { "name": "Grenada", "code": "GD" },
-    { "name": "Guatemala", "code": "GT" },
-    { "name": "Guinea", "code": "GN" },
-    { "name": "Guyana", "code": "GY" },
-    { "name": "Haiti", "code": "HT" },
-    { "name": "Honduras", "code": "HN" },
-    { "name": "Hungary", "code": "HU" },
-    { "name": "Iceland", "code": "IS" },
     { "name": "India", "code": "IN" },
-    { "name": "Indonesia", "code": "ID" },
-    { "name": "Iran", "code": "IR" },
-    { "name": "Iraq", "code": "IQ" },
-    { "name": "Ireland", "code": "IE" },
-    { "name": "Israel", "code": "IL" },
-    { "name": "Italy", "code": "IT" },
-    { "name": "Jamaica", "code": "JM" },
-    { "name": "Japan", "code": "JP" },
-    { "name": "Jordan", "code": "JO" },
-    { "name": "Kazakhstan", "code": "KZ" },
-    { "name": "Kenya", "code": "KE" },
-    { "name": "Korea, South", "code": "KR" },
-    { "name": "Kuwait", "code": "KW" },
-    { "name": "Laos", "code": "LA" },
-    { "name": "Latvia", "code": "LV" },
-    { "name": "Lebanon", "code": "LB" },
-    { "name": "Libya", "code": "LY" },
-    { "name": "Lithuania", "code": "LT" },
-    { "name": "Luxembourg", "code": "LU" },
-    { "name": "Malaysia", "code": "MY" },
-    { "name": "Maldives", "code": "MV" },
-    { "name": "Mexico", "code": "MX" },
-    { "name": "Monaco", "code": "MC" },
-    { "name": "Morocco", "code": "MA" },
-    { "name": "Nepal", "code": "NP" },
-    { "name": "Netherlands", "code": "NL" },
-    { "name": "New Zealand", "code": "NZ" },
-    { "name": "Nigeria", "code": "NG" },
-    { "name": "Norway", "code": "NO" },
-    { "name": "Oman", "code": "OM" },
-    { "name": "Pakistan", "code": "PK" },
-    { "name": "Panama", "code": "PA" },
-    { "name": "Peru", "code": "PE" },
-    { "name": "Philippines", "code": "PH" },
-    { "name": "Poland", "code": "PL" },
-    { "name": "Portugal", "code": "PT" },
-    { "name": "Qatar", "code": "QA" },
-    { "name": "Romania", "code": "RO" },
-    { "name": "Russia", "code": "RU" },
-    { "name": "Saudi Arabia", "code": "SA" },
-    { "name": "Singapore", "code": "SG" },
-    { "name": "South Africa", "code": "ZA" },
-    { "name": "Spain", "code": "ES" },
-    { "name": "Sri Lanka", "code": "LK" },
-    { "name": "Sweden", "code": "SE" },
-    { "name": "Switzerland", "code": "CH" },
-    { "name": "Thailand", "code": "TH" },
-    { "name": "Turkey", "code": "TR" },
-    { "name": "Ukraine", "code": "UA" },
-    { "name": "United Arab Emirates", "code": "AE" },
-    { "name": "United Kingdom", "code": "GB" },
     { "name": "United States", "code": "US" },
-    { "name": "Vietnam", "code": "VN" },
-    { "name": "Zimbabwe", "code": "ZW" }
 ];
 
 const DEFAULT_THEME = {
@@ -279,12 +154,59 @@ export class SwirepayCheckout extends HTMLElement {
         this.theme = DEFAULT_THEME;
     }
 
+    getEndpoints() {
+        if (this.test) {
+            return { gateway: 'https://staging-backend.swirepay.com' };
+        }
+        return { gateway: 'https://api.swirepay.com' };
+    }
+
+    async getSplitUpDetails(inventoryOrder) {
+        const payload = {
+            shopGid: inventoryOrder?.shopGid,
+            items: inventoryOrder?.inventoryOrderLineItems,
+            tipType: "AMOUNT",
+            tip: inventoryOrder?.totalTip
+        }
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/inventory/order/inventory-order-split-up`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify(payload)
+        })
+        return await response.json();
+    }
+
     async connectedCallback() {
         this.amount = parseInt(this.getAttribute("amount")) || 0;
         this.test = this.getAttribute("mode") === "test";
-        this.amount = parseInt(this.getAttribute("amount")) || 0;
         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');
+        try {
+            const customerAttr = this.getAttribute("customer");
+            this.customer = customerAttr ? JSON.parse(customerAttr) : {};
+            const inventoryOrders = this.getAttribute("inventoryOrders");
+            this.inventoryOrder = inventoryOrders ? JSON.parse(inventoryOrders) : {};
+            if (this.inventory) {
+                const splitUpInfo = await this.getSplitUpDetails(this.inventoryOrder);
+                this.splitUp = splitUpInfo?.entity;
+            }
+        } catch (e) {
+            console.error("Invalid JSON", e);
+            this.customer = {};
+            this.inventoryOrder = {};
+        }
         await Promise.all([
             loadScript(SDK_CONFIG.elliptic),
             loadScript(SDK_CONFIG.crypto)
@@ -293,6 +215,112 @@ export class SwirepayCheckout extends HTMLElement {
         this.render();
     }
 
+    static get observedAttributes() {
+        return [
+            "amount",
+            "mode",
+            "currencycode",
+            "api-key",
+            "isaddressrequired",
+            "inventory",
+            "plangid",
+            "productname",
+            "frequency",
+            "description",
+            "totalpayments",
+            "customer",
+            "inventoryorders"
+        ];
+    }
+
+    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();
+            }
+
+        } 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}`);
+
+        if (errorEl) errorEl.textContent = message || "";
+
+        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");
+        });
+    }
+
     async encryptData(data, serverPublicKey, clientPrivateKey, keyId) {
         try {
             const EC = window.elliptic.ec;
@@ -388,6 +416,108 @@ export class SwirepayCheckout extends HTMLElement {
         return await response.json();
     }
 
+    async createOrder() {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/inventory/order`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify(this.inventoryOrder)
+        })
+        return await response.json();
+    }
+
+    async getSubScription(payload) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v2/subscription`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify(payload)
+        })
+        return await response.json();
+    }
+
+    async getPlan() {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v2/plan?isInternal.EQ=false&name.EQ=Recurring%20Plan`;
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            }
+        })
+        return await response.json();
+    }
+
+    async addedPlanInfo() {
+        const payload = {
+            "currencyCode": this.currencyCode,
+            "name": "Recurring Plan",
+            "description": "Recurring Plan",
+            "note": "Recurring Plan",
+            "billingFrequency": this.frequency,
+            "billingPeriod": 1
+        }
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v2/plan`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify(payload)
+        })
+        return await response.json();
+    }
+
+    async getItemInfo() {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/inventory/item?name.EQ=Recurring%20item&priceType.EQ=VARIABLE&isRecurring.EQ=true`;
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+        })
+        return await response.json();
+    }
+
+    async addedItemInfo() {
+        const payload = {
+            "name": "Recurring item",
+            "alternateName": "Recurring item",
+            "onlineName": "Recurring item",
+            "onlineEnabled": true,
+            "price": 100,
+            "priceType": "VARIABLE",
+            "includeTax": true,
+            "available": true,
+            "recurring": true,
+            "onKiosk": true
+        }
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/inventory/item`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify(payload)
+        })
+        return await response.json();
+    }
+
     async getServerEncription() {
         try {
             const gateway = this.getEndpoints().gateway;
@@ -443,9 +573,11 @@ export class SwirepayCheckout extends HTMLElement {
         return v.replace(/\D/g, "").slice(0, 10);
     }
     handleCountryChange() {
-        const country = this.shadow.getElementById("country").value;
+        const countryEl = this.shadow.getElementById("country");
         const phoneCodeEl = this.shadow.getElementById("phone-code");
         const stateEl = this.shadow.getElementById("state");
+        if (!countryEl || !phoneCodeEl || !stateEl) return;
+        const country = countryEl.value;
         phoneCodeEl.value = COUNTRY_PHONE_MAP[country] || "";
         const states = getStates(country);
         stateEl.innerHTML = states.map(
@@ -453,77 +585,173 @@ export class SwirepayCheckout extends HTMLElement {
         ).join("");
     }
 
+    detectCardType(number) {
+        const n = number.replace(/\s/g, "");
+
+        if (/^4/.test(n)) return "VISA";
+        if (/^5[1-5]/.test(n)) return "MASTERCARD";
+        if (/^3[47]/.test(n)) return "AMEX";
+        if (/^6(?:011|5)/.test(n)) return "DISCOVER";
+
+        return "";
+    }
+
+    getAddressFields() {
+        if (!this.isAddressRequired) return "";
+
+        return `
+        <div class="section">
+  <div class="section-title">Address</div>
+
+  <div class="field">
+    <input id="street" required placeholder=" " />
+    <label>Street *</label>
+  </div>
+  <div class="error" id="error-street"></div>
+
+  <div class="field">
+    <input id="city" required placeholder=" " />
+    <label>City *</label>
+  </div>
+  <div class="error" id="error-city"></div>
+
+  <div class="field">
+  <select id="state"></select>
+  <label class="floating">State *</label>
+</div>
+  <div class="error" id="error-state"></div>
+
+  <div class="field">
+    <select id="country" required>
+      ${COUNTRIES_LIST.map(c =>
+        `<option value="${c.code}" ${c.code === "US" ? "selected" : ""}>${c.name}</option>`
+      ).join("")}
+    </select>
+    <label class="floating">Country *</label>
+  </div>
+  <div class="error" id="error-country"></div>
+
+  <div class="field">
+    <input id="zip" required placeholder=" " />
+    <label>ZIP Code *</label>
+  </div>
+  <div class="error" id="error-zip"></div>
+
+</div>
+    `;
+    }
+
     validate() {
-        const get = id => this.shadow.getElementById(id)?.value?.trim();
+    this.clearErrors();
+    let isValid = true;
 
-        const name = get("name");
-        const email = get("email");
-        const phone = get("phone");
-        const code = get("phone-code");
-        const zip = get("zip");
-        const country = get("country");
-
-        const cardName = get("card-name");
-        const cardNumber = get("card")?.replace(/\s/g, "");
-        const expiry = get("expiry");
-        const cvv = get("cvv");
-        const street = get("street");
-        if (!name) return "Name required";
-        if (!email) return "Email required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return "Invalid email address";
-        if (!cardName) return "Card holder name required";
-        if (!cardNumber || !/^\d{12,19}$/.test(cardNumber)) {
-            return "Invalid card number";
+    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("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 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;
         }
-        if (!expiry || !/^\d{2}\/\d{2}$/.test(expiry)) {
-            return "Invalid expiry format (MM/YY)";
+    }
+
+    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");
+        if (!phone || !code) {
+            this.setError("phone", "Phone number required");
+            isValid = false;
         } else {
-            const [mm, yy] = expiry.split("/").map(Number);
-            if (mm < 1 || mm > 12) return "Invalid expiry month";
-            const now = new Date();
-            const currentYear = now.getFullYear() % 100;
-            const currentMonth = now.getMonth() + 1;
-
-            if (yy < currentYear || (yy === currentYear && mm < currentMonth)) {
-                return "Card expired";
+            const fullNumber = `${code}${phone}`;
+            if (!isValidPhoneNumber(fullNumber)) {
+                this.setError("phone", "Invalid phone number");
+                isValid = false;
             }
         }
-        if (!cvv || !/^\d{3,4}$/.test(cvv)) {
-            return "Invalid CVV";
-        }
-        if (!street) return "Street address required";
-        if (phone && !isValidPhoneNumber(code + phone)) {
-            return "Invalid phone";
+
+    if (this.isAddressRequired) {
+        if (!get("street")) {
+            this.setError("street", "Street required");
+            isValid = false;
         }
-        if (zip && postalCodes.validate(country, zip) !== true) {
-            return "Invalid ZIP";
+
+        if (!get("city")) {
+            this.setError("city", "City required");
+            isValid = false;
         }
 
-        return null;
-    }
+        if (!get("state")) {
+            this.setError("state", "State required");
+            isValid = false;
+        }
 
-    async handleSubmit(e) {
-        e.preventDefault();
+        if (!get("country")) {
+            this.setError("country", "Country required");
+            isValid = false;
+        }
 
-        const payButton = this.shadow.getElementById("form").querySelector(".btn");
-        payButton.disabled = true;
-        payButton.textContent = "Processing...";
+        const zip = get("zip");
 
-        const err = this.validate();
-        if (err) {
-            alert(err);
-            payButton.disabled = false;
-            payButton.textContent = `Pay $${(this.amount / 100).toFixed(2)}`;
-            return;
+        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;
+}
 
+    async oneTimePayment() {
         try {
             const values = await this.getServerEncription();
             if (values?.public_key) {
                 const keys = await this.generateClientKeyPair();
                 if (keys?.privateKey) {
                     const getVal = id => this.shadow.getElementById(id)?.value?.trim();
-
                     const phoneCode = getVal("phone-code") || "";
                     const phone = getVal("phone");
 
@@ -538,13 +766,17 @@ export class SwirepayCheckout extends HTMLElement {
                         phone: phone ? `${phoneCode}${phone}` : null
                     };
 
-                    const address = {
-                        street: getVal("street"),
-                        city: getVal("city"),
-                        state: getVal("state"),
-                        countryCode: getVal("country"),
-                        postalCode: getVal("zip")
-                    };
+                    let address = null;
+
+                    if (this.isAddressRequired) {
+                        address = {
+                            street: getVal("street"),
+                            city: getVal("city"),
+                            state: getVal("state"),
+                            countryCode: getVal("country"),
+                            postalCode: getVal("zip")
+                        };
+                    }
 
                     const encriptedData = await this.encryptData(JSON.stringify(customer), values.public_key, keys.privateKey, values.key_id);
                     const payload = {
@@ -565,7 +797,7 @@ export class SwirepayCheckout extends HTMLElement {
                             cvv: cvv,
                             name: cardHolderName
                         },
-                        postalCode: address?.zip,
+                        postalCode: address?.postalCode,
                         paymentMethodBillingAddress: address,
                         customerGid: customerGid
                     };
@@ -611,20 +843,282 @@ export class SwirepayCheckout extends HTMLElement {
                         body: JSON.stringify({ data: payload2?.data })
                     });
                     const resData = await res.json();
-                    if (resData?.entity?.errorCode === null){
-                        this.events.emit("success", resData);
-                        this.close();
-                    } else if (resData?.entity?.errorCode !== null){
-                        console.error("Payment Error:", resData?.entity?.errorDescription);
-                        this.events.emit("error", resData?.entity?.errorDescription);
-                        alert(resData?.entity?.errorDescription || "Payment failed");
-                    } 
+                    return resData;
+                }
+            }
+        } catch (error) {
+            console.error("Payment Error:", error);
+            this.events.emit("error", error);
+        }
+    }
+
+    async recurringPayment () {
+        try {
+            const values = await this.getServerEncription();
+            if (values?.public_key) {
+                const keys = await this.generateClientKeyPair();
+                if (keys?.privateKey) {
+                    const getVal = id => this.shadow.getElementById(id)?.value?.trim();
+                    const phoneCode = getVal("phone-code") || "";
+                    const phone = getVal("phone");
+
+                    const cardNumber = getVal("card")?.replace(/\s/g, "");
+                    const expiry = getVal("expiry")?.split("/") || [];
+                    const cvv = getVal("cvv");
+                    const cardHolderName = getVal("card-name");
+
+                    const customer = {
+                        name: getVal("name"),
+                        email: getVal("email"),
+                        phone: phone ? `${phoneCode}${phone}` : null
+                    };
+
+                    let address = null;
+
+                    if (this.isAddressRequired) {
+                        address = {
+                            street: getVal("street"),
+                            city: getVal("city"),
+                            state: getVal("state"),
+                            countryCode: getVal("country"),
+                            postalCode: getVal("zip")
+                        };
+                    }
+
+                    const encriptedData = await this.encryptData(JSON.stringify(customer), values.public_key, keys.privateKey, values.key_id);
+                    const payload = {
+                        publicKey: keys?.publicKey,
+                        keyId: encriptedData?.keyId,
+                        iv: encriptedData?.iv,
+                        data: encriptedData?.encryptedData,
+                    }
+                    const newCustomer = await this.createCustomer(payload);
+                    const customerGid = newCustomer.entity?.gid;
+                    let product;
+                    const itemInfo = await this.getItemInfo();
+                    if (itemInfo?.entity?.content[0]?.gid) {
+                        product = itemInfo?.entity?.content[0];
+                    } else {
+                       const newItemInfo = await this.addedItemInfo();
+                       product = newItemInfo?.entity;
+                    }
+                    let plan;
+                    const planInfo = await this.getPlan();
+                    if (planInfo?.entity?.content[0]?.gid) {
+                        plan = planInfo?.entity?.content[0];
+                    } else {
+                        const newPlanInfo = await this.addedPlanInfo();
+                        plan = newPlanInfo?.entity;
+                    }
+
+                    const subscriptionData = {
+                        currencyCode: this.currencyCode,
+                        customerGid: customerGid,
+                        plan2Gid: plan?.gid,
+                        plan2BillingPeriod: 1,
+                        plan2BillingFrequency: this.frequency,
+                        plan2StartDate: new Date().toISOString(),
+                        plan2TotalPayments: this.totalPayments,
+                        description: this.description,
+                        notificationType: "ALL",
+                        emailRecipientList: [
+                            customer.email
+                        ],
+                        canCustomerCancelOrPause: true,
+                        subscription2LineItems: [
+                            {
+                                itemGid: product?.gid,
+                                quantity: 1,
+                                upfront: false,
+                                currencyCode: this.currencyCode,
+                                amount: this.amount
+                            }
+                        ]
+                    }
+                    const subscriptionDetails = await this.getSubScription(subscriptionData);
+                    const subscription = subscriptionDetails?.entity;
+                    const sessionData = {
+                        link: subscription?.subscription2Links[0]?.link,
+                        customer: subscription?.customer,
+                        type: 'CARD',
+                        card: {
+                            number: cardNumber,
+                            expiryMonth: parseInt(expiry[0]),
+                            expiryYear: 2000 + parseInt(expiry[1]),
+                            cvv: cvv,
+                            name: cardHolderName
+                        },
+                        postalCode: address?.postalCode,
+                        paymentMethodBillingAddress: address
+                    }
+                    const encriptedData4 = await this.encryptData(JSON.stringify(sessionData), values.public_key, keys.privateKey, values.key_id);
+                    const payload2 = {
+                        publicKey: keys?.publicKey,
+                        keyId: encriptedData4?.keyId,
+                        iv: encriptedData4?.iv,
+                        data: encriptedData4?.encryptedData,
+                    }
+                    const gateway = this.getEndpoints().gateway;
+                    const url = `${gateway}/v2/subscription-link/${subscription?.subscription2Links[0]?.gid}/payment-method`;
+                    const res = await fetch(url, {
+                        method: 'POST',
+                        headers: {
+                            'x-enc-public-key': payload2?.publicKey,
+                            'x-enc-key-id': payload2?.keyId,
+                            'x-enc-iv': payload2?.iv,
+                            'Content-Type': 'application/json',
+                            'x-api-key': this.apiKey,
+                        },
+                        body: JSON.stringify({ data: payload2?.data })
+                    });
+                    const resData = await res.json();
+                    return resData;
+                }
+            }
+        } catch (error) {
+            console.error("Payment Error:", error);
+            this.events.emit("error", error);
+        }
+    }
+
+    async inventoryCharge() {
+        try {
+            const values = await this.getServerEncription();
+            if (values?.public_key) {
+                const keys = await this.generateClientKeyPair();
+                if (keys?.privateKey) {
+                    const getVal = id => this.shadow.getElementById(id)?.value?.trim();
+                    const phoneCode = getVal("phone-code") || "";
+                    const phone = getVal("phone");
+
+                    const cardNumber = getVal("card")?.replace(/\s/g, "");
+                    const expiry = getVal("expiry")?.split("/") || [];
+                    const cvv = getVal("cvv");
+                    const cardHolderName = getVal("card-name");
+
+                    const customer = {
+                        name: getVal("name"),
+                        email: getVal("email"),
+                        phone: phone ? `${phoneCode}${phone}` : null
+                    };
+
+                    let address = null;
+
+                    if (this.isAddressRequired) {
+                        address = {
+                            street: getVal("street"),
+                            city: getVal("city"),
+                            state: getVal("state"),
+                            countryCode: getVal("country"),
+                            postalCode: getVal("zip")
+                        };
+                    }
+
+                    const encriptedData = await this.encryptData(JSON.stringify(customer), values.public_key, keys.privateKey, values.key_id);
+                    const payload = {
+                        publicKey: keys?.publicKey,
+                        keyId: encriptedData?.keyId,
+                        iv: encriptedData?.iv,
+                        data: encriptedData?.encryptedData,
+                    }
+                    const newCustomer = await this.createCustomer(payload);
+                    const customerGid = newCustomer.entity?.gid;
+                    const orderDetails = await this.createOrder();
+                    const order = orderDetails?.entity;
+                    const sessionData = {
+                        customer: customer,
+                        customerGid: customerGid,
+                        paymentMethod: {
+                            card: {
+                                number: cardNumber,
+                                expiryMonth: parseInt(expiry[0]),
+                                expiryYear: 2000 + parseInt(expiry[1]),
+                                cvv: cvv,
+                                name: cardHolderName
+                            },
+                            postalCode: address?.postalCode,
+                            type: "CARD",
+                            paymentMethodBillingAddress: address,
+                        }
+                    }
+                    const encriptedData1 = await this.encryptData(JSON.stringify(sessionData), values.public_key, keys.privateKey, values.key_id);
+                    const payload2 = {
+                        publicKey: keys?.publicKey,
+                        keyId: encriptedData1?.keyId,
+                        iv: encriptedData1?.iv,
+                        data: encriptedData1?.encryptedData,
+                    }
+                    const gateway = this.getEndpoints().gateway;
+                    const url = `${gateway}/v1/inventory/order-link/${order?.inventoryOrderLink?.gid}/charge`;
+                    const res = await fetch(url, {
+                        method: 'POST',
+                        headers: {
+                            'x-enc-public-key': payload2?.publicKey,
+                            'x-enc-key-id': payload2?.keyId,
+                            'x-enc-iv': payload2?.iv,
+                            'Content-Type': 'application/json',
+                            'x-api-key': this.apiKey,
+                        },
+                        body: JSON.stringify({ data: payload2?.data })
+                    });
+                    const resData = await res.json();
+                    return resData;
+                }
+            }
+
+        } catch (error) {
+            console.error("Payment Error:", error);
+            this.events.emit("error", error);
+        }
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+
+        const payButton = this.shadow.getElementById("form").querySelector(".btn");
+        payButton.disabled = true;
+        payButton.textContent = "Processing...";
+
+        const isValid = this.validate();
+        if (!isValid) {
+            payButton.disabled = false;
+            payButton.textContent = `Pay $${(this.amount / 100).toFixed(2)}`;
+            return;
+        }
+        try {
+            if (this.frequency === "ONE-TIME" && !this.inventory) {
+                const resData = await this.oneTimePayment();
+                if (resData?.entity?.errorCode === null) {
+                    this.events.emit("success", resData);
+                    this.close();
+                } else {
+                    const errorMsg = resData?.entity?.errorDescription || "Payment failed";
+                    console.error("Payment Error:", errorMsg);
+                    this.events.emit("error", errorMsg);
+                }
+            } else if (this.frequency !== "ONE-TIME" && !this.inventory) {
+                const resData = await this.recurringPayment();
+                if (resData?.entity?.setupSession?.errorCode === null) {
+                    this.events.emit("success", resData);
+                    this.close();
+                } else {
+                    const errorMsg = resData?.entity?.setupSession?.errorDescription || "Payment failed";
+                    console.error("Payment Error:", errorMsg);
+                    this.events.emit("error", errorMsg);
+                }
+            } else if (this.inventory) {
+                const resData = await this.inventoryCharge();
+                if (resData?.responseCode === 200) {
+                    this.events.emit("success", resData);
+                    this.close();
+                } else {
+                    console.error("Payment Error:", resData?.message || 'Payment failed');
+                    this.events.emit("error", resData?.message);
                 }
             }
         } catch (error) {
             console.error("Payment Error:", error);
             this.events.emit("error", error);
-            alert(error.message || "Payment failed");
         } finally {
             payButton.disabled = false;
             payButton.textContent = `Pay $${(this.amount / 100).toFixed(2)}`;
@@ -633,6 +1127,7 @@ export class SwirepayCheckout extends HTMLElement {
     render() {
         const t = this.theme;
         const amountText = (this.amount / 100).toFixed(2);
+        const inventoryAmountText = ((this.splitUp?.netPayable) / 100).toFixed(2);
 
         this.shadow.innerHTML = `
 <style>
@@ -654,26 +1149,45 @@ export class SwirepayCheckout extends HTMLElement {
   background:rgba(0,0,0,0.6);
   justify-content:center;
   align-items:center;
+  z-index:9999;
 }
 
 .modal {
-  width:420px;
-  background:var(--bg);
-  color:var(--text);
-  border-radius:16px;
-  padding:20px;
-  font-family:sans-serif;
+  width: 520px;
+  height: auto;
+  max-height: 650px;
+  background: var(--bg);
+  color: var(--text);
+  border-radius: 16px;
+  padding: 28px;
+  font-family: sans-serif;
+}
+
+.modal-body {
+  overflow-y: auto;
+  flex: 1;
+  height: auto;
+  max-height: 530px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 input, select {
-  width:100%;
-  padding:10px;
-  margin:6px 0;
-  border:1px solid var(--border);
-  background: white;
-  color: black;
-  border-radius:8px;
-  outline:none;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  color: #000000;
+  border-radius: 8px;
+  outline: none;
+  height: 44px;
+  font-size: 14px;
+  box-sizing: border-box;
+  margin: 0 !important;
 }
 
 input::placeholder {
@@ -696,7 +1210,7 @@ input::placeholder {
 select {
   width:100%;
   padding:10px;
-  margin:6px 0;
+  margin: 0;
   border:1px solid var(--border);
   border-radius:8px;
 
@@ -712,67 +1226,199 @@ select option {
   color: #000000;
 }
 
-.row { display:flex; gap:10px; }
+.row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+  .phone-code {
+  flex: 0 0 70px !important;
+}
+
+.row input,
+.row select {
+  flex: 1;
+}
 
-.phone-code { width:70px; }
+input, select {
+  box-sizing: border-box;
+  height: 40px;
+  padding: 10px;
+  font-size: 14px;
+}
 
 .btn {
-  background:var(--primary);
-  color:#fff;
-  padding:12px;
-  border:none;
-  border-radius:10px;
-  cursor:pointer;
-  width:100%;
+  background: var(--primary);
+  color: #fff;
+  padding: 14px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  width: 100%;
+  height: 48px;
+  font-size: 15px;
 }
 
 .close {
   float:right;
   cursor:pointer;
 }
-</style>
 
-<div class="overlay" id="overlay">
-  <div class="modal">
-    <span class="close" id="close">✕</span>
+h3 {
+  margin-bottom: 16px;
+}
 
-    <h3>Pay with Card</h3>
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 
-    <form id="form">
-      <input id="name" placeholder="Name"/>
-      <input id="email" placeholder="Email"/>
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+}
 
-      <div class="row">
-        <input class="phone-code" id="phone-code" value="+1"/>
-        <input id="phone" placeholder="Phone"/>
-      </div>
+.card-wrapper {
+  position: relative;
+}
 
-      <input id="card-name" placeholder="Card Holder Name"/>
-      <input id="card" placeholder="Card Number"/>
+#card-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+}
+.error {
+  font-size: 12px;
+  color: #dc2626;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 
-      <div class="row">
-        <input id="expiry" placeholder="MM/YY"/>
-        <input id="cvv" type="password" placeholder="CVV"/>
-      </div>
+.field {
+  position: relative;
+  width: 100%;
+}
 
-      <input id="street" placeholder="Street Address"/>
-      <input id="city" placeholder="City"/>
+.field input,
+.field select {
+  width: 100%;
+  padding: 14px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 14px;
+  background: #fff;
+  outline: none;
+}
+.field label {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0 4px;
+  color: #6b7280;
+  font-size: 14px;
+  pointer-events: none;
+  transition: 0.2s ease;
+}
+.field input:focus + label,
+.field input:not(:placeholder-shown) + label {
+  top: -8px;
+  font-size: 12px;
+  color: var(--primary);
+}
+.field select {
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  color: #000;
+  font-size: 14px;
+  outline: none;
+  appearance: none;
+}
+.input-error {
+  border-color: #dc2626 !important;
+}
 
-      <!-- STATE FIRST -->
-      <select id="state"></select>
+.field input.input-error + label {
+  color: #dc2626;
+}
 
-      <!-- COUNTRY AFTER -->
-      <select id="country">
-  ${COUNTRIES_LIST.map(c =>
-            `<option value="${c.code}" ${c.code === "US" ? "selected" : ""}>
-      ${c.name}
-    </option>`
-        ).join("")}
-</select>
+.field label.floating {
+  top: -8px;
+  font-size: 12px;
+  color: var(--primary);
+}
+</style>
 
-      <input id="zip" placeholder="ZIP Code"/>
+<div class="overlay" id="overlay">
+  <div class="modal">
+  <div class="modal-header">
+  <span class="close" id="close">✕</span>
+    <h3>Pay with Card</h3>
+  </div>
+  <div class="modal-body">
+    <form id="form">
+    <div class="section">
+    <div class="section-title">Customer Details</div>
+      <div class="field">
+    <input id="name" required placeholder=" " />
+    <label>Name *</label>
+  </div>
+      <div class="error" id="error-name"></div>
+      <div class="field">
+    <input id="email" required placeholder=" " />
+    <label>Email *</label>
+  </div>
+      <div class="error" id="error-email"></div>
+       <div class="row">
+        <div class="field phone-code">
+      <input id="phone-code" placeholder=" " />
+      <label>Code</label>
+    </div>
+        <div class="field">
+      <input id="phone" required placeholder=" " />
+      <label>Phone *</label>
+    </div>
+      </div>
+      <div class="error" id="error-phone"></div>
+      </div>
+      <div class="section">
+      <div class="section-title">Card Details</div>
+      <div class="field">
+    <input id="card" required placeholder=" " />
+    <label>Card Number *</label>
+  </div>
+  <div class="error" id="error-card"></div>
 
-      <button class="btn">Pay $${amountText}</button>
+      <div class="row">
+    <div class="field">
+      <input id="expiry" required placeholder=" " />
+      <label>MM/YY *</label>
+    </div>
+
+    <div class="field">
+      <input id="cvv" type="password" required placeholder=" " />
+      <label>CVV *</label>
+    </div>
+  </div>
+  <div class="error" id="error-expiry"></div>
+  <div class="error" id="error-cvv"></div>
+      <div class="field">
+    <input id="card-name" required placeholder=" " />
+    <label>Card Holder Name *</label>
+  </div>
+  <div class="error" id="error-card-name"></div>
+      </div>
+      ${this.getAddressFields()}
+      <button class="btn">Pay $${this.inventory ? inventoryAmountText : amountText}</button>
+      </div>
     </form>
   </div>
 </div>
@@ -780,16 +1426,64 @@ select option {
 
         const $ = id => this.shadow.getElementById(id);
 
+        if (this.customer) {
+            if (this.customer.name) $("name").value = this.customer.name;
+            if (this.customer.email) $("email").value = this.customer.email;
+
+            if (this.customer.phone) {
+                let phone = this.customer.phone;
+                let code = "";
+                let number = phone;
+
+                if (phone.startsWith("+")) {
+                    if (phone.startsWith("+1")) {
+                        code = "+1";
+                        number = phone.slice(2);
+                    } else if (phone.startsWith("+91")) {
+                        code = "+91";
+                        number = phone.slice(3);
+                    }
+                }
+
+                if ($("phone-code")) $("phone-code").value = code;
+                if ($("phone")) $("phone").value = number;
+            }
+        }
+
         $("close").onclick = () => this.close();
         $("form").onsubmit = e => this.handleSubmit(e);
 
-        $("country").onchange = () => this.handleCountryChange();
-
         const countryEl = $("country");
-        countryEl.value = "US";
-        this.handleCountryChange();
+        if (countryEl) {
+            countryEl.onchange = () => this.handleCountryChange();
+            if (!this.customer?.countryCode) {
+                countryEl.value = "US";
+            }
+            this.handleCountryChange();
+        }
+        const phoneCodeEl = $("phone-code");
+        if (phoneCodeEl) {
+            phoneCodeEl.dataset.auto = "true";
+        }
 
-        $("card").oninput = e => e.target.value = this.formatCard(e.target.value);
+        const icons = {
+            VISA: `<svg width="40" viewBox="0 0 48 16"><text x="0" y="14">VISA</text></svg>`,
+            MASTERCARD: `<svg width="40"><text x="0" y="14">MC</text></svg>`,
+            AMEX: `<svg width="40"><text x="0" y="14">AMEX</text></svg>`,
+            DISCOVER: `<svg width="40"><text x="0" y="14">DISC</text></svg>`
+        };
+        $("card").oninput = e => {
+            const formatted = this.formatCard(e.target.value);
+            e.target.value = formatted;
+
+            const type = this.detectCardType(formatted);
+
+            const iconEl = $("card-icon");
+            if (iconEl) {
+                iconEl.src = icons[type] || "";
+                iconEl.style.display = type ? "block" : "none";
+            }
+        };
         $("expiry").oninput = e => e.target.value = this.formatExpiry(e.target.value);
         $("phone").oninput = e => e.target.value = this.formatPhone(e.target.value);
     }