@swirepay-developer/swirepay-payment-sdk 1.0.0

package/swirepayPaypalWalletPayment.js

@@ -0,0 +1,742 @@
+class PaypalPaymentMethod {
+    static paypal_sdk_url = "https://www.paypal.com/sdk/js";
+    static intent = "capture";
+    
+    // CACHE: Stores active loading promises to prevent race conditions
+    static _scriptLoadingPromises = {}; 
+
+    constructor(config) {
+        this.mountId = config.mountId;
+        this.test = config.test;
+        this.apiKey = config.apiKey;
+        this.accountGid = config.accountGid;
+        this.currencyDetail = {
+            code: config.currencyCode,
+            countryAlpha2: config.countryAlpha2,
+        };
+        this.processStartCallback = config.processStartCallback;
+        this.failCallback = config.failCallback;
+        this.successCallback = config.successCallback;
+        this.unMountOnError = config.unMountOnError;
+    }
+
+    getEndpoints() {
+        if (this.test) {
+            return { gateway: 'https://staging-backend.swirepay.com' };
+        }
+        return { gateway: 'https://api.swirepay.com' };
+    }
+
+    AmountDivideByHundred(amount) {
+        return (amount ? (amount / 100).toFixed(2) : amount);
+    }
+
+    getRobustPhoneNumber(countryCode, googlePhoneStr) {
+        if (!googlePhoneStr || !countryCode) return null;
+        const cleanPhone = typeof googlePhoneStr === 'string' ? googlePhoneStr.replace(/\D/g, '') : '';
+        const cleanCode = typeof countryCode === 'string' ? countryCode.replace(/\D/g, '') : '';
+        if (cleanCode && cleanPhone && cleanPhone.startsWith(cleanCode)) {
+            return `+${cleanPhone}`;
+        }
+        return cleanCode && cleanPhone ? `+${cleanCode}${cleanPhone}` : null;
+    }
+
+    // ROBUST SCRIPT LOADER (Fixes Race Condition)
+    async script_to_head(attrs) {
+        const id = attrs.id;
+
+        // 1. If script is already in DOM, resolve immediately.
+        if (id && document.getElementById(id)) {
+            return Promise.resolve();
+        }
+
+        // 2. If a request for this ID is already in progress, wait for it.
+        if (id && PaypalPaymentMethod._scriptLoadingPromises[id]) {
+            return PaypalPaymentMethod._scriptLoadingPromises[id];
+        }
+
+        // 3. Create a new loading promise
+        const loadPromise = new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+            Object.entries(attrs).forEach(([k, v]) => script.setAttribute(k, v));
+            
+            script.onload = () => resolve();
+            script.onerror = (err) => {
+                delete PaypalPaymentMethod._scriptLoadingPromises[id]; // Cleanup on fail
+                reject(err);
+            };
+            
+            document.head.appendChild(script);
+        });
+
+        // 4. Cache the promise
+        if (id) {
+            PaypalPaymentMethod._scriptLoadingPromises[id] = loadPromise;
+        }
+
+        return loadPromise;
+    }
+
+    async getPayPalClientToken() {
+        const gateway = this.getEndpoints().gateway;
+        const config = {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey },
+        };
+        const response = await fetch(`${gateway}/v1/paypal/${this.accountGid}/config`, config);
+        const responseData = await response.json();
+        return responseData?.message;
+    };
+
+    Spinner({ size = '40px', color = '#007bff', thickness = '4px', speed = '1s', ...props }) {
+        const spinner = document.createElement('div');
+        spinner.style.width = size;
+        spinner.style.height = size;
+        spinner.style.border = `${thickness} solid #f3f3f3`;
+        spinner.style.borderTop = `${thickness} solid ${color}`;
+        spinner.style.borderRadius = '50%';
+        spinner.style.display = 'inline-block';
+        spinner.style.animation = `spin ${speed} linear infinite`;
+
+        if (!document.querySelector('#spinner-keyframes')) {
+            const style = document.createElement('style');
+            style.id = 'spinner-keyframes';
+            style.textContent = `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
+            document.head.appendChild(style);
+        }
+        Object.keys(props).forEach(key => {
+            if (key === 'className') spinner.className = props[key];
+            else if (key !== 'onClick') spinner.setAttribute(key, props[key]);
+        });
+        return spinner;
+    }
+
+    async findCustomer(name, email, phone) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/customer`;
+        const config = { method: 'GET', headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey } };
+        
+        let params = [];
+        if(name) params.push(`name.EQ=${name}`);
+        if(email) params.push(`email.EQ=${email}`);
+        if(phone) params.push(`phoneNumber.EQ=${phone}`);
+        
+        if(params.length > 0) url += `?${params.join('&')}`;
+        
+        const response = await fetch(url, config);
+        return await response.json();
+    }
+
+    async createCustomer(name, email, phone) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/customer`;
+        const config = {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey },
+            body: JSON.stringify({ name, email, phoneNumber: phone }),
+        };
+        const response = await fetch(url, config);
+        return await response.json();
+    }
+
+    async addPaymentMethod(paymentMethod) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v1/payment-method`;
+        const config = {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey },
+            body: JSON.stringify(paymentMethod),
+        };
+        const response = await fetch(url, config);
+        return await response.json();
+    }
+
+    async getMrn(psGid, psSecret) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v2/payment-session/${psGid}/mrn`;
+        const config = {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json', 'ps-client-secret': psSecret, 'x-api-key': this.apiKey },
+        };
+        const response = await fetch(url, config);
+        const data = await response.json();
+        return data?.message;
+    }
+
+    async action(psGid, psSecret) {
+        const gateway = this.getEndpoints().gateway;
+        let url = `${gateway}/v2/payment-session/${psGid}/action`;
+        const config = {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'ps-client-secret': psSecret, 'x-api-key': this.apiKey },
+            body: JSON.stringify({}),
+        };
+        const response = await fetch(url, config);
+        const data = await response.json();
+        return data?.entity;
+    }
+    
+    removeAllChildFromMount() {
+        const mount = document.getElementById(this.mountId);
+        if (mount) mount.innerHTML = '';
+    }
+
+    showLoading() {
+        const loadingSpinner = this.Spinner({ id: 'swirepay-loading-spinner' });
+        const mount = document.getElementById(this.mountId);
+        this.removeAllChildFromMount();
+        if (mount) mount.appendChild(loadingSpinner);
+    }
+    
+    showEligibilityIssue() {
+        this.removeAllChildFromMount();
+        if (!this.unMountOnError) {
+            const mount = document.getElementById(this.mountId);
+            const errorMsg = document.createElement('p');
+            errorMsg.innerText = 'Not Eligible';
+            if (mount) mount.appendChild(errorMsg);
+        }
+    }
+}
+
+class PaypalGooglePay extends PaypalPaymentMethod {
+    static google_pay_sdk_url = "https://pay.google.com/gp/p/js/pay.js";
+
+    constructor(config) {
+        super(config);
+        this.googlePayPaymentsClient = null;
+        this.paypalGooglePayConfig = null;
+        this.countryCallingCode = config.countryCallingCode;
+        this.amount = null;
+        
+        this.initGooglePay = this.initGooglePay.bind(this);
+
+        if (document.readyState === "complete" || document.readyState === "interactive") {
+            this.initGooglePay();
+        } else {
+            window.addEventListener('DOMContentLoaded', this.initGooglePay);
+        }
+    }
+
+    GooglePayButton({ onClick, disabled = false, ...props }) {
+        const button = document.createElement('button');
+        if (props?.id) button.id = props.id;
+
+        const COLOR_PRIMARY = '#23262aff';
+        let isHovered = false;
+
+        const updateStyles = () => {
+            const btnStyles = {
+                backgroundColor: isHovered ? '#000000' : COLOR_PRIMARY,
+                borderColor: isHovered ? '#000000' : COLOR_PRIMARY,
+                color: '#fff',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                opacity: disabled ? '0.6' : '1',
+                height: '32px',
+                padding: '4px 15px',
+                fontSize: '14px',
+                borderRadius: '6px',
+                border: '1px solid transparent',
+                outline: 'none',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+                transition: 'all 0.2s',
+            };
+            Object.keys(btnStyles).forEach(key => button.style[key] = btnStyles[key]);
+        };
+        updateStyles();
+
+        const googleIcon = document.createElement('img');
+        googleIcon.src = '/assets/imgs/GOOGLE_PAY.svg'; 
+        googleIcon.alt = 'Google Icon';
+        googleIcon.style.height = '20px';
+        googleIcon.style.width = 'auto';
+
+        const textSpan = document.createElement('span');
+        textSpan.textContent = ' Pay';
+
+        button.appendChild(googleIcon);
+        button.appendChild(textSpan);
+        button.disabled = disabled;
+        button.addEventListener('click', (e) => { if (!disabled && onClick) onClick(e); });
+        button.addEventListener('mouseenter', () => { if (!disabled) { isHovered = true; updateStyles(); } });
+        button.addEventListener('mouseleave', () => { isHovered = false; updateStyles(); });
+
+        Object.keys(props).forEach(key => {
+            if (key === 'className') button.className = props[key];
+            else if (key !== 'onClick') button.setAttribute(key, props[key]);
+        });
+
+        return button;
+    }
+
+    async handleGooglePayButtonClick() {
+        if (!this.googlePayPaymentsClient) {
+            console.error('no paymentsClient');
+            return;
+        }
+        
+        if (window.swirepayPayableAmount) {
+             this.amount = window.swirepayPayableAmount;
+        } else {
+            alert("Payment Error: Amount not set");
+            return;
+        }
+
+        if (this.processStartCallback) this.processStartCallback();
+
+        const { paymentDataRequest } = this.constructGooglePayPaymentDataRequest();
+        try {
+            const paymentData = await this.googlePayPaymentsClient?.loadPaymentData(paymentDataRequest);
+            const value = await this.getPayPalClientToken();
+            const billingAddress = paymentData?.paymentMethodData?.info?.billingAddress;
+            const customerName = billingAddress?.name ?? null;
+            const customerEmail = paymentData?.email ?? null;
+            const customerPhone = this.getRobustPhoneNumber(this.countryCallingCode, billingAddress?.phoneNumber);
+            
+            if (value) {
+                let customerGid;
+                const customerData = await this.findCustomer(customerName, customerEmail, customerPhone);
+                if (customerData.entity.content[0]?.gid) {
+                    customerGid = customerData.entity.content[0].gid;
+                } else {
+                    const newCustomer = await this.createCustomer(customerName, customerEmail, customerPhone);
+                    customerGid = newCustomer.entity?.gid;
+                }
+                const paymentMethod = {
+                    type: "WALLET",
+                    subType: "GOOGLE_PAY_US",
+                    googlePayUS: {
+                        apiVersionMinor: paymentData.apiVersionMinor,
+                        apiVersion: paymentData.apiVersion,
+                        paymentMethodDescription: paymentData.paymentMethodData.description,
+                        paymentMethodTokenizationDataType: paymentData.paymentMethodData.tokenizationData.type,
+                        paymentMethodTokenizationDataToken: paymentData.paymentMethodData.tokenizationData.token,
+                        paymentMethodType: paymentData.paymentMethodData.type,
+                        paymentMethodInfo: paymentData.paymentMethodData.info
+                    },
+                    customerGid: customerGid,
+                }
+                let result = await this.addPaymentMethod(paymentMethod);
+                const gid = result?.entity?.gid;
+                
+                const postData = {
+                    amount: this.amount,
+                    captureMethod: 'AUTOMATIC',
+                    confirmMethod: 'AUTOMATIC',
+                    currencyCode: this.currencyDetail?.code,
+                    description: 'Online Payment',
+                    paymentMethodGid: gid,
+                    paymentMethodType: ['WALLET'],
+                    receiptEmail: customerEmail || null,
+                    receiptSms: customerPhone || null,
+                    statementDescriptor: 'Google Pay Payment',
+                };
+                
+                const gateway = this.getEndpoints().gateway;
+                const res = await fetch(`${gateway}/v1/payment-session`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey },
+                    body: JSON.stringify(postData),
+                });
+                const resData = await res.json();
+                
+                const orderId = await this.getMrn(resData?.entity?.gid, resData?.entity?.psClientSecret);
+                await window?.paypal?.Googlepay()?.confirmOrder({ orderId, paymentMethodData: paymentData?.paymentMethodData });
+                await this.action(resData?.entity?.gid, resData?.entity?.psClientSecret);
+                if (this.successCallback) await this.successCallback(resData?.entity);
+            }
+        } catch (err) {
+            console.error('Google Pay Error:', err);
+            if (this.failCallback) await this.failCallback(err);
+        }
+    }
+
+    showGooglePayButton() {
+        const googlePayButton = this.GooglePayButton({
+            onClick: () => this.handleGooglePayButtonClick(),
+            disabled: false,
+            id: 'google-pay-btn'
+        });
+        const mount = document.getElementById(this.mountId);
+        this.removeAllChildFromMount();
+        if (mount) mount.appendChild(googlePayButton);
+    }
+
+    getPaypalGooglePayConfig() {
+        const paymentsClient = this.getGooglePaymentsClient();
+        this.googlePayPaymentsClient = paymentsClient;
+        
+        window.paypal?.Googlepay?.()?.config()?.then((currentPaypalGooglePayConfig) => {
+            this.paypalGooglePayConfig = currentPaypalGooglePayConfig;
+            const { allowedPaymentMethods, baseRequest } = this.constructGooglePayPaymentDataRequest();
+            
+            paymentsClient?.isReadyToPay({ ...baseRequest, allowedPaymentMethods })
+                ?.then((response) => {
+                    if (response.result && currentPaypalGooglePayConfig.isEligible) {
+                        this.showGooglePayButton();
+                        return;
+                    }
+                    this.showEligibilityIssue();
+                })?.catch((err) => { this.showEligibilityIssue(); });
+        })?.catch((err) => { this.showEligibilityIssue(); });
+    }
+
+    getGooglePaymentsClient() {
+        const usageMode = this.test ? 'TEST' : 'PRODUCTION';
+        return new window.google.payments.api.PaymentsClient({ environment: String(usageMode) });
+    }
+
+    constructGooglePayPaymentDataRequest() {
+        const currentAmount = window.swirepayPayableAmount || 0; 
+        if (!this.paypalGooglePayConfig || !this.currencyDetail) return {};
+
+        const paymentDataRequest = {
+            apiVersion: this.paypalGooglePayConfig?.apiVersion,
+            apiVersionMinor: this.paypalGooglePayConfig?.apiVersionMinor,
+            emailRequired: true, 
+            merchantInfo: {
+                merchantName: 'Swirepay',
+                merchantId: this.paypalGooglePayConfig?.merchantInfo?.merchantId,
+            },
+            allowedPaymentMethods: [{
+                type: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.type,
+                parameters: {
+                    allowedAuthMethods: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.parameters?.allowedAuthMethods,
+                    allowedCardNetworks: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.parameters?.allowedCardNetworks,
+                    billingAddressRequired: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.parameters?.billingAddressRequired,
+                    billingAddressParameters: {
+                        format: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.parameters?.billingAddressParameters?.format,
+                        phoneNumberRequired: true,
+                    },
+                },
+                tokenizationSpecification: {
+                    type: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.tokenizationSpecification?.type,
+                    parameters: {
+                        gateway: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.tokenizationSpecification?.parameters?.gateway,
+                        gatewayMerchantId: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.tokenizationSpecification?.parameters?.gatewayMerchantId,
+                    },
+                },
+            }],
+            transactionInfo: {
+                countryCode: this.currencyDetail?.countryAlpha2,
+                currencyCode: this.currencyDetail?.code,
+                totalPriceStatus: 'FINAL',
+                totalPrice: this.AmountDivideByHundred(currentAmount),
+                checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
+            }
+        };
+        return {
+            allowedPaymentMethods: this.paypalGooglePayConfig?.allowedPaymentMethods,
+            paymentDataRequest,
+            baseRequest: { apiVersion: this.paypalGooglePayConfig?.apiVersion, apiVersionMinor: this.paypalGooglePayConfig?.apiVersionMinor },
+            tokenizationSpecification: this.paypalGooglePayConfig?.allowedPaymentMethods?.[0]?.tokenizationSpecification,
+        };
+    }
+
+    async initGooglePay() {
+        if (!this.accountGid) return;
+        
+        this.showLoading();
+        try {
+            const data = await this.getPayPalClientToken();
+            const value = atob(data);
+            const value_json = JSON.parse(value);
+            
+            // Unified Request: buttons,googlepay,applepay
+            await this.script_to_head({
+                id: 'paypalSDK', 
+                src: `${PaypalPaymentMethod.paypal_sdk_url}?client-id=${value_json?.clientId}&currency=${this.currencyDetail?.code}&intent=${PaypalPaymentMethod.intent}&buyer-country=US&merchant-id=${value_json?.merchantId}&components=buttons,googlepay,applepay`, // Added applepay
+                "data-client-token": value_json?.token?.client_token,
+            });
+
+            await this.script_to_head({
+                id: 'googlePaySDK',
+                src: PaypalGooglePay.google_pay_sdk_url,
+                async: true,
+            });
+
+            const checkGooglePaySDKInterval = setInterval(() => {
+                if (window.google?.payments?.api && window.paypal) {
+                    this.getPaypalGooglePayConfig();
+                    clearInterval(checkGooglePaySDKInterval);
+                }
+            }, 50);
+        } catch (err) {
+            console.error(err);
+            this.showEligibilityIssue();
+        }
+    }
+}
+
+class PaypalApplePay extends PaypalPaymentMethod {
+    constructor(config) {
+        super(config);
+        this.isApplePayEligible = false;
+        
+        this.checkAppleEligible = this.checkAppleEligible.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+
+        if (document.readyState === "complete" || document.readyState === "interactive") {
+            this.checkAppleEligible();
+        } else {
+            window.addEventListener('DOMContentLoaded', this.checkAppleEligible);
+        }
+    }
+
+    // Helper to wait for specific PayPal components to initialize
+    waitForPayPalComponent(componentName, timeout = 5000) {
+        return new Promise((resolve, reject) => {
+            const startTime = Date.now();
+            
+            const check = () => {
+                // Check if paypal exists AND the specific component exists
+                if (window.paypal && window.paypal[componentName]) {
+                    resolve(window.paypal[componentName]);
+                } else if (Date.now() - startTime > timeout) {
+                    reject(new Error(`PayPal component '${componentName}' failed to load within ${timeout}ms`));
+                } else {
+                    // Check again in 50ms
+                    setTimeout(check, 50);
+                }
+            };
+            
+            check();
+        });
+    }
+
+    async existsApplePayJsApi() {
+        try {
+            return !!(window.ApplePaySession && (await window.ApplePaySession.canMakePayments()));
+        } catch { return false; }
+    }
+
+    async checkAppleEligible() {
+        this.showLoading();
+        const enabled = await this.existsApplePayJsApi();
+        if (!enabled || !this.accountGid) {
+            if(this.failCallback && !this.unMountOnError) this.failCallback('Payment method not supported...!');
+            this.showEligibilityIssue();
+            return;
+        }
+
+        try {
+            const data = await this.getPayPalClientToken();
+            const value = window.atob(data);
+            const value_json = JSON.parse(value);
+            
+            // Unified Request: buttons,googlepay,applepay
+            await this.script_to_head({
+                id: 'paypalSDK', 
+                src: `${PaypalPaymentMethod.paypal_sdk_url}?client-id=${value_json?.clientId}&enable-funding=venmo&currency=${this.currencyDetail?.code}&intent=${PaypalPaymentMethod.intent}&merchant-id=${value_json?.merchantId}&components=buttons,googlepay,applepay`, // Added googlepay
+                "data-client-token": value_json?.token?.client_token,
+            });
+
+
+            // confirm the paypal sdk has loaded in before proceeding (5secs time limit)
+            try {
+                await this.waitForPayPalComponent('Applepay');
+            } catch (waitError) {
+                console.error(waitError);
+                this.showEligibilityIssue();
+                return;
+            }
+
+            const config = await window.paypal.Applepay().config();
+            this.isApplePayEligible = config.isEligible;
+
+            if (this.isApplePayEligible) {
+                this.renderApplePayButton();
+            } else {
+                this.showEligibilityIssue();
+            }
+        } catch (err) {
+            console.error("Apple Pay Init Error:", err);
+            this.showEligibilityIssue();
+        }
+    }
+
+    renderApplePayButton() {
+        if (!document.getElementById('apple-pay-style')) {
+            const style = document.createElement('style');
+            style.id = 'apple-pay-style';
+            style.innerHTML = `
+                .apple-pay-button {
+                    display: inline-block;
+                    -webkit-appearance: -apple-pay-button;
+                    -apple-pay-button-type: buy;
+                    -apple-pay-button-style: black;
+                    width: 100%;
+                    height: 32px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+
+        const button = document.createElement('div');
+        button.className = 'apple-pay-button';
+        button.onclick = this.handleClick; 
+        
+        const mount = document.getElementById(this.mountId);
+        this.removeAllChildFromMount();
+        if (mount) mount.appendChild(button);
+    }
+
+    getPaymentRequest(items, label, amountString) {
+        const paymentRequest = {
+            currencyCode: this.currencyDetail.code,
+            countryCode: this.currencyDetail.countryAlpha2,
+            lineItems: items,
+            total: {
+                label: label,
+                amount: amountString
+            },
+            supportedNetworks: ['masterCard', 'visa'],
+            merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
+            requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
+            requiredBillingContactFields: ["postalAddress", "email", "name", "phone"]
+        };
+        return paymentRequest;
+    }
+
+    async performApplePayPayment(items, label) {
+        const payableAmount = this.AmountDivideByHundred(window.swirepayPayableAmount);
+        const paymentRequest = this.getPaymentRequest(items, label, payableAmount);
+
+        return new Promise((resolve, reject) => {
+            const session = new window.ApplePaySession(4, paymentRequest);
+            
+            session.oncancel = (e) => reject("Payment cancelled");
+            
+            session.onvalidatemerchant = async (event) => {
+                try {
+                    const applepay = window.paypal.Applepay();
+                    const payload = await applepay.validateMerchant({
+                        validationUrl: event.validationURL,
+                        displayName: "My Shop",
+                    });
+                    session.completeMerchantValidation(payload.merchantSession);
+                } catch (err) {
+                    console.error("Merchant validation failed:", err);
+                    session.abort();
+                }
+            };
+
+            session.onpaymentauthorized = async (event) => {
+                try {
+                    const payment = event.payment;
+                    const contact = payment.shippingContact || {};
+                    const billing = payment.billingContact || {};
+
+                    const customerName = (billing.givenName || "") + " " + (billing.familyName || "");
+                    const customerEmail = contact.emailAddress || "";
+                    const customerPhone = contact.phoneNumber ? `+1${contact.phoneNumber}` : "";
+
+                    let customerGid;
+                    const customerData = await this.findCustomer(customerName, customerEmail, customerPhone);
+                    if (customerData.entity?.content?.[0]?.gid) {
+                        customerGid = customerData.entity.content[0].gid;
+                    } else {
+                        const newCustomer = await this.createCustomer(customerName, customerEmail, customerPhone);
+                        customerGid = newCustomer.entity?.gid;
+                    }
+
+                    const deviceData = `${payment.token.paymentData.data}&ectype=apple&ecsig=${payment.token.paymentData.signature}&eckey=${payment.token.paymentData.header.ephemeralPublicKey}&ectid=${payment.token.transactionIdentifier}&echash=&ecpublickeyhash=${payment.token.paymentData.header.publicKeyHash}`;
+
+                    const paymentMethod = {
+                        applePayUS: {
+                            deviceData: deviceData,
+                            cardBrand: payment.token.paymentMethod.network,
+                            cardFundingType: payment.token.paymentMethod.type,
+                            applePayDynamicLast4: payment.token.paymentMethod.displayName,
+                            cardLast4: payment.token.paymentMethod.displayName
+                        },
+                        type: "WALLET",
+                        subType: "APPLE_PAY_US",
+                        postalCode: billing.postalCode,
+                        paymentMethodBillingAddress: billing.locality ? {
+                            city: billing.locality,
+                            countryCode: billing.countryCode,
+                            state: billing.administrativeArea,
+                            street: billing.addressLines?.[0]
+                        } : null,
+                        customerGid: customerGid,
+                    };
+
+                    const pmResult = await this.addPaymentMethod(paymentMethod);
+                    const gid = pmResult?.entity?.gid;
+
+                    const postData = {
+                        amount: window.swirepayPayableAmount, 
+                        captureMethod: 'AUTOMATIC',
+                        confirmMethod: 'AUTOMATIC',
+                        currencyCode: this.currencyDetail.code,
+                        description: 'Online Payment',
+                        paymentMethodGid: gid,
+                        paymentMethodType: ['WALLET'],
+                        receiptEmail: customerEmail || null,
+                        receiptSms: customerPhone || null,
+                        statementDescriptor: 'Apple Pay Payment',
+                    };
+
+                    const gateway = this.getEndpoints().gateway;
+                    const res = await fetch(`${gateway}/v1/payment-session`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json', 'x-api-key': this.apiKey },
+                        body: JSON.stringify(postData),
+                    });
+                    const resData = await res.json();
+                    
+                    const orderId = await this.getMrn(resData?.entity?.gid, resData?.entity?.psClientSecret);
+                    await window.paypal.Applepay().confirmOrder({
+                        orderId,
+                        token: payment.token,
+                        billingContact: payment.billingContact,
+                    });
+                    
+                    await this.action(resData?.entity?.gid, resData?.entity?.psClientSecret);
+                    
+                    session.completePayment(window.ApplePaySession.STATUS_SUCCESS);
+                    resolve({ orderId, ...resData });
+                } catch (err) {
+                    console.error("Apple Pay flow error:", err);
+                    session.completePayment(window.ApplePaySession.STATUS_FAILURE);
+                    reject(err);
+                }
+            };
+
+            try {
+                session.begin();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
+
+    handleClick() {
+        if (!window.swirepayPayableAmount) {
+            alert('Amount not set');
+            return;
+        }
+        if (this.isApplePayEligible) {
+            if (this.processStartCallback) this.processStartCallback();
+
+            const payableAmount = this.AmountDivideByHundred(window.swirepayPayableAmount);
+
+            this.performApplePayPayment(
+                [{ label: 'Total', amount: payableAmount }],
+                'Total'
+            ).then((result) => {
+                if(this.successCallback) this.successCallback(result);
+                // console.log("Payment success:", result);
+            }).catch((err) => {
+                if(this.failCallback) this.failCallback(err);
+                console.error("Payment failed:", err);
+            });
+        }
+    }
+}