@swirepay-developer/swirepay-card-sdk 2.0.0

package/index.js

@@ -0,0 +1,16 @@
+export * from "./web-component/swirepay-checkout.js";
+
+/**
+ * Helper init function (optional usage)
+ */
+export const init = (config = {}) => {
+  const el = document.createElement("swirepay-checkout");
+
+  Object.entries(config).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      el.setAttribute(key, value);
+    }
+  });
+
+  return el;
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@swirepay-developer/swirepay-card-sdk",
+  "version": "2.0.0",
+  "description": "Swirepay Card Payment SDK (Web Component with Modal UI)",
+  "main": "index.js",
+  "type": "module",
+  "keywords": [
+    "swirepay",
+    "payments",
+    "sdk",
+    "checkout",
+    "web-components"
+  ],
+  "author": "Swirepay",
+  "license": "ISC",
+  "dependencies": {
+    "libphonenumber-js": "^1.10.53",
+    "postal-codes-js": "^2.5.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/web-component/swirepay-checkout.js

@@ -0,0 +1,799 @@
+import postalCodes from "postal-codes-js";
+import { isValidPhoneNumber } from "libphonenumber-js";
+
+const SDK_CONFIG = {
+    elliptic: "https://cdnjs.cloudflare.com/ajax/libs/elliptic/6.3.1/elliptic.js",
+    crypto: "https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"
+};
+class EventEmitter {
+    constructor() { this.events = {}; }
+    on(e, cb) {
+        this.events[e] = this.events[e] || [];
+        this.events[e].push(cb);
+    }
+    emit(e, d) {
+        (this.events[e] || []).forEach(cb => cb(d));
+    }
+}
+const INDIAN_STATES = [
+    { "code": "AN", "name": "Andaman and Nicobar Islands" },
+    { "code": "AP", "name": "Andhra Pradesh" },
+    { "code": "AR", "name": "Arunachal Pradesh" },
+    { "code": "AS", "name": "Assam" },
+    { "code": "BR", "name": "Bihar" },
+    { "code": "CG", "name": "Chandigarh" },
+    { "code": "CH", "name": "Chhattisgarh" },
+    { "code": "DH", "name": "Dadra and Nagar Haveli" },
+    { "code": "DD", "name": "Daman and Diu" },
+    { "code": "DL", "name": "Delhi" },
+    { "code": "GA", "name": "Goa" },
+    { "code": "GJ", "name": "Gujarat" },
+    { "code": "HR", "name": "Haryana" },
+    { "code": "HP", "name": "Himachal Pradesh" },
+    { "code": "JK", "name": "Jammu and Kashmir" },
+    { "code": "JH", "name": "Jharkhand" },
+    { "code": "KA", "name": "Karnataka" },
+    { "code": "KL", "name": "Kerala" },
+    { "code": "LD", "name": "Lakshadweep" },
+    { "code": "MP", "name": "Madhya Pradesh" },
+    { "code": "MH", "name": "Maharashtra" },
+    { "code": "MN", "name": "Manipur" },
+    { "code": "ML", "name": "Meghalaya" },
+    { "code": "MZ", "name": "Mizoram" },
+    { "code": "NL", "name": "Nagaland" },
+    { "code": "OR", "name": "Odisha" },
+    { "code": "PY", "name": "Puducherry" },
+    { "code": "PB", "name": "Punjab" },
+    { "code": "RJ", "name": "Rajasthan" },
+    { "code": "SK", "name": "Sikkim" },
+    { "code": "TN", "name": "Tamil Nadu" },
+    { "code": "TS", "name": "Telangana" },
+    { "code": "TR", "name": "Tripura" },
+    { "code": "UK", "name": "Uttarakhand" },
+    { "code": "UP", "name": "Uttar Pradesh" },
+    { "code": "WB", "name": "West Bengal" }
+];
+
+const USA_STATES = [
+    { "code": "AL", "name": "Alabama" },
+    { "code": "AK", "name": "Alaska" },
+    { "code": "AZ", "name": "Arizona" },
+    { "code": "AR", "name": "Arkansas" },
+    { "code": "CA", "name": "California" },
+    { "code": "CO", "name": "Colorado" },
+    { "code": "CT", "name": "Connecticut" },
+    { "code": "DE", "name": "Delaware" },
+    { "code": "FL", "name": "Florida" },
+    { "code": "GA", "name": "Georgia" },
+    { "code": "HI", "name": "Hawaii" },
+    { "code": "ID", "name": "Idaho" },
+    { "code": "IL", "name": "Illinois" },
+    { "code": "IN", "name": "Indiana" },
+    { "code": "IA", "name": "Iowa" },
+    { "code": "KS", "name": "Kansas" },
+    { "code": "KY", "name": "Kentucky" },
+    { "code": "LY", "name": "Louisiana" },
+    { "code": "ME", "name": "Maine" },
+    { "code": "MD", "name": "Maryland" },
+    { "code": "MA", "name": "Massachusetts" },
+    { "code": "MI", "name": "Michigan" },
+    { "code": "MN", "name": "Minnesota" },
+    { "code": "MS", "name": "Mississippi" },
+    { "code": "MO", "name": "Missouri" },
+    { "code": "MT", "name": "Montana" },
+    { "code": "NE", "name": "Nebraska" },
+    { "code": "NV", "name": "Nevada" },
+    { "code": "NH", "name": "New Hampshire" },
+    { "code": "NJ", "name": "New Jersey" },
+    { "code": "NM", "name": "New Mexico" },
+    { "code": "NY", "name": "New York" },
+    { "code": "NC", "name": "North Carolina" },
+    { "code": "ND", "name": "North Dakota" },
+    { "code": "OH", "name": "Ohio" },
+    { "code": "OK", "name": "Oklahoma" },
+    { "code": "OR", "name": "Oregon" },
+    { "code": "PA", "name": "Pennsylvania" },
+    { "code": "RI", "name": "Rhode Island" },
+    { "code": "SC", "name": "South Carolina" },
+    { "code": "SD", "name": "South Dakota" },
+    { "code": "TN", "name": "Tennessee" },
+    { "code": "TX", "name": "Texas" },
+    { "code": "UT", "name": "Utah" },
+    { "code": "VT", "name": "Vermont" },
+    { "code": "VA", "name": "Virginia" },
+    { "code": "WA", "name": "Washington" },
+    { "code": "WV", "name": "West Virginia" },
+    { "code": "WI", "name": "Wisconsin" },
+    { "code": "WY", "name": "Wyoming" },
+];
+
+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 = {
+    bg: "#ffffff",
+    text: "#111827",
+    primary: "#2563eb",
+    border: "#e5e7eb",
+    inputBg: "#ffffff",
+    placeholder: "#9ca3af"
+};
+
+const COUNTRY_PHONE_MAP = {
+    US: "+1",
+    IN: "+91"
+};
+
+function getStates(country) {
+    if (country === "IN") return INDIAN_STATES;
+    if (country === "US") return USA_STATES;
+    return [];
+}
+
+function loadScript(url) {
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${url}"]`)) {
+            resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = url;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+}
+
+export class SwirepayCheckout extends HTMLElement {
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.events = new EventEmitter();
+        this.theme = DEFAULT_THEME;
+    }
+
+    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");
+        await Promise.all([
+            loadScript(SDK_CONFIG.elliptic),
+            loadScript(SDK_CONFIG.crypto)
+        ]);
+
+        this.render();
+    }
+
+    async encryptData(data, serverPublicKey, clientPrivateKey, keyId) {
+        try {
+            const EC = window.elliptic.ec;
+            const ec = new EC('p256');
+            const publicKeyBytes = atob(serverPublicKey);
+            let keyDataStart = -1;
+            for (let i = 0; i < publicKeyBytes.length - 4; i++) {
+                if (publicKeyBytes.charCodeAt(i) === 0x03 &&
+                    publicKeyBytes.charCodeAt(i + 1) === 0x42 &&
+                    publicKeyBytes.charCodeAt(i + 2) === 0x00 &&
+                    publicKeyBytes.charCodeAt(i + 3) === 0x04) {
+                    keyDataStart = i + 4; // Skip the 03 42 00 04 header
+                    break;
+                }
+            }
+
+            if (keyDataStart === -1) {
+                throw new Error('Could not find public key data in DER format');
+            }
+            const keyData = publicKeyBytes.slice(keyDataStart, keyDataStart + 64);
+
+            if (keyData.length !== 64) {
+                throw new Error(`Invalid key data length: ${keyData.length}, expected 64`);
+            }
+            const publicKeyHex = '04' + Array.from(keyData)
+                .map(byte => byte.charCodeAt(0).toString(16).padStart(2, '0'))
+                .join('');
+            const serverPubKey = ec.keyFromPublic(publicKeyHex, 'hex');
+            const sharedSecret = clientPrivateKey.derive(serverPubKey.getPublic());
+            const sharedSecretBytes = sharedSecret.toArray();
+            const sharedSecretHex = sharedSecretBytes.map(byte =>
+                (byte < 0 ? byte + 256 : byte).toString(16).padStart(2, '0')
+            ).join('');
+            const aesKeyHash = CryptoJS.SHA256(CryptoJS.enc.Hex.parse(sharedSecretHex));
+            const aesKey = aesKeyHash.toString(CryptoJS.enc.Hex);
+            const iv = CryptoJS.lib.WordArray.random(16);
+            const key = CryptoJS.enc.Hex.parse(aesKey);
+            const encrypted = CryptoJS.AES.encrypt(data, key, {
+                iv: iv,
+                mode: CryptoJS.mode.CBC,
+                padding: CryptoJS.pad.Pkcs7,
+            });
+
+            return {
+                encryptedData: encrypted.toString(),
+                keyId: keyId,
+                iv: iv.toString(CryptoJS.enc.Base64),
+            };
+        } catch (error) {
+            console.error('Error encrypting data:', error);
+            throw new Error('Failed to encrypt data');
+        }
+    }
+
+    getEndpoints() {
+        if (this.test) {
+            return { gateway: 'https://staging-backend.swirepay.com' };
+        }
+        return { gateway: 'https://api.swirepay.com' };
+    }
+
+    async createCustomer(payload) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v3/customer`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'x-enc-public-key': payload?.publicKey,
+                'x-enc-key-id': payload?.keyId,
+                'x-enc-iv': payload?.iv,
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify({ data: payload?.data })
+        })
+        return await response.json();
+    }
+
+    async addPaymentMethod(payload) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v3/payment-method`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'x-enc-public-key': payload?.publicKey,
+                'x-enc-key-id': payload?.keyId,
+                'x-enc-iv': payload?.iv,
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+            },
+            body: JSON.stringify({ data: payload?.data })
+        })
+        return await response.json();
+    }
+
+    async getServerEncription() {
+        try {
+            const gateway = this.getEndpoints().gateway;
+            const response = await fetch(`${gateway}/v1/encryption/session`, {
+                method: 'POST',
+            });
+            const responseData = await response.json();
+            return responseData?.entity;
+        } catch (err) {
+            console.error("Failed to get encryption session:", err);
+            throw err;
+        }
+    }
+
+    async generateClientKeyPair() {
+        try {
+            if (!window.elliptic) {
+                throw new Error("Elliptic failed to load");
+            }
+            const EC = window.elliptic.ec;
+            const ec = new EC("p256");
+            const keyPair = ec.genKeyPair();
+            const publicKey = keyPair.getPublic('hex');
+            const privateKey = keyPair;
+            return { privateKey, publicKey };
+        } catch (err) {
+            console.error("Elliptic load error:", err);
+            throw err;
+        }
+    }
+
+    onSuccess(cb) { this.events.on("success", cb); }
+    onError(cb) { this.events.on("error", cb); }
+
+    open(options = {}) {
+        this.theme = { ...DEFAULT_THEME, ...(options.theme || {}) };
+        this.render();
+        this.shadow.getElementById("overlay").style.display = "flex";
+    }
+
+    close() {
+        this.shadow.getElementById("overlay").style.display = "none";
+    }
+    formatCard(v) {
+        return v.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
+    }
+
+    formatExpiry(v) {
+        return v.replace(/\D/g, "").replace(/(\d{2})(\d{1,2})/, "$1/$2");
+    }
+
+    formatPhone(v) {
+        return v.replace(/\D/g, "").slice(0, 10);
+    }
+    handleCountryChange() {
+        const country = this.shadow.getElementById("country").value;
+        const phoneCodeEl = this.shadow.getElementById("phone-code");
+        const stateEl = this.shadow.getElementById("state");
+        phoneCodeEl.value = COUNTRY_PHONE_MAP[country] || "";
+        const states = getStates(country);
+        stateEl.innerHTML = states.map(
+            s => `<option value="${s.code}">${s.name}</option>`
+        ).join("");
+    }
+
+    validate() {
+        const get = id => this.shadow.getElementById(id)?.value?.trim();
+
+        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";
+        }
+        if (!expiry || !/^\d{2}\/\d{2}$/.test(expiry)) {
+            return "Invalid expiry format (MM/YY)";
+        } 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";
+            }
+        }
+        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 (zip && postalCodes.validate(country, zip) !== true) {
+            return "Invalid ZIP";
+        }
+
+        return null;
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+
+        const payButton = this.shadow.getElementById("form").querySelector(".btn");
+        payButton.disabled = true;
+        payButton.textContent = "Processing...";
+
+        const err = this.validate();
+        if (err) {
+            alert(err);
+            payButton.disabled = false;
+            payButton.textContent = `Pay $${(this.amount / 100).toFixed(2)}`;
+            return;
+        }
+
+        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
+                    };
+
+                    const 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 pmPayload = {
+                        type: 'CARD',
+                        card: {
+                            number: cardNumber,
+                            expiryMonth: parseInt(expiry[0]),
+                            expiryYear: 2000 + parseInt(expiry[1]),
+                            cvv: cvv,
+                            name: cardHolderName
+                        },
+                        postalCode: address?.zip,
+                        paymentMethodBillingAddress: address,
+                        customerGid: customerGid
+                    };
+
+                    const encriptedData1 = await this.encryptData(JSON.stringify(pmPayload), values.public_key, keys.privateKey, values.key_id);
+                    const payload1 = {
+                        publicKey: keys?.publicKey,
+                        keyId: encriptedData1?.keyId,
+                        iv: encriptedData1?.iv,
+                        data: encriptedData1?.encryptedData,
+                    }
+
+                    const result = await this.addPaymentMethod(payload1);
+                    const gid = result?.entity?.gid;
+
+                    const sessionData = {
+                        amount: this.amount,
+                        currencyCode: this.currencyCode,
+                        paymentMethodGid: gid,
+                        paymentMethodType: ['CARD'],
+                        statementDescriptor: 'Card Payment',
+                        confirmMethod: 'AUTOMATIC',
+                        captureMethod: 'AUTOMATIC',
+                    };
+                    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}/v3/payment-session`;
+                    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();
+                    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");
+                    } 
+                }
+            }
+        } 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)}`;
+        }
+    }
+    render() {
+        const t = this.theme;
+        const amountText = (this.amount / 100).toFixed(2);
+
+        this.shadow.innerHTML = `
+<style>
+:host {
+  --bg:${t.bg};
+  --text:${t.text};
+  --primary:${t.primary};
+  --border:${t.border};
+  --input-bg:${t.inputBg};
+  --placeholder:${t.placeholder};
+  color: var(--text);
+  font-family: sans-serif;
+}
+
+.overlay {
+  display:none;
+  position:fixed;
+  inset:0;
+  background:rgba(0,0,0,0.6);
+  justify-content:center;
+  align-items:center;
+}
+
+.modal {
+  width:420px;
+  background:var(--bg);
+  color:var(--text);
+  border-radius:16px;
+  padding:20px;
+  font-family:sans-serif;
+}
+
+input, select {
+  width:100%;
+  padding:10px;
+  margin:6px 0;
+  border:1px solid var(--border);
+  background: white;
+  color: black;
+  border-radius:8px;
+  outline:none;
+}
+
+input::placeholder {
+  color: var(--placeholder);
+}
+select {
+  color: var(--text);
+}
+
+input {
+  background: #ffffff;
+  color: #000000;
+}
+
+input::placeholder {
+  color: #9ca3af !important;
+  opacity: 1 !important;
+}
+
+select {
+  width:100%;
+  padding:10px;
+  margin:6px 0;
+  border:1px solid var(--border);
+  border-radius:8px;
+
+  background-color: #ffffff !important;
+  color: #000000 !important;
+
+  -webkit-text-fill-color: #000000; /* Chrome fix */
+  appearance: none; /* removes default weird styling */
+}
+
+select option {
+  background: #ffffff;
+  color: #000000;
+}
+
+.row { display:flex; gap:10px; }
+
+.phone-code { width:70px; }
+
+.btn {
+  background:var(--primary);
+  color:#fff;
+  padding:12px;
+  border:none;
+  border-radius:10px;
+  cursor:pointer;
+  width:100%;
+}
+
+.close {
+  float:right;
+  cursor:pointer;
+}
+</style>
+
+<div class="overlay" id="overlay">
+  <div class="modal">
+    <span class="close" id="close">✕</span>
+
+    <h3>Pay with Card</h3>
+
+    <form id="form">
+      <input id="name" placeholder="Name"/>
+      <input id="email" placeholder="Email"/>
+
+      <div class="row">
+        <input class="phone-code" id="phone-code" value="+1"/>
+        <input id="phone" placeholder="Phone"/>
+      </div>
+
+      <input id="card-name" placeholder="Card Holder Name"/>
+      <input id="card" placeholder="Card Number"/>
+
+      <div class="row">
+        <input id="expiry" placeholder="MM/YY"/>
+        <input id="cvv" type="password" placeholder="CVV"/>
+      </div>
+
+      <input id="street" placeholder="Street Address"/>
+      <input id="city" placeholder="City"/>
+
+      <!-- STATE FIRST -->
+      <select id="state"></select>
+
+      <!-- COUNTRY AFTER -->
+      <select id="country">
+  ${COUNTRIES_LIST.map(c =>
+            `<option value="${c.code}" ${c.code === "US" ? "selected" : ""}>
+      ${c.name}
+    </option>`
+        ).join("")}
+</select>
+
+      <input id="zip" placeholder="ZIP Code"/>
+
+      <button class="btn">Pay $${amountText}</button>
+    </form>
+  </div>
+</div>
+`;
+
+        const $ = id => this.shadow.getElementById(id);
+
+        $("close").onclick = () => this.close();
+        $("form").onsubmit = e => this.handleSubmit(e);
+
+        $("country").onchange = () => this.handleCountryChange();
+
+        const countryEl = $("country");
+        countryEl.value = "US";
+        this.handleCountryChange();
+
+        $("card").oninput = e => e.target.value = this.formatCard(e.target.value);
+        $("expiry").oninput = e => e.target.value = this.formatExpiry(e.target.value);
+        $("phone").oninput = e => e.target.value = this.formatPhone(e.target.value);
+    }
+}
+if (!customElements.get("swirepay-checkout")) {
+    customElements.define("swirepay-checkout", SwirepayCheckout);
+}