@salla.sa/applepay 3.0.0-alpha.0 → 3.0.0

package/src/index.js

@@ -1,9 +1,26 @@
-import Http from './http';
+import http from './http';
 import DetectOS from './DetectOS';
-import { mutateShipmentAddress } from './utils';
+import { mutateShippingContact } from './utils';
+import { resolveApplePayNetworks } from './apple-pay-support';
 
-window.Salla = window.Salla || {};
-window.Salla.Payments = window.Salla.Payments || {};
+// SSR-safe: only access window in browser environment
+if (typeof window !== 'undefined') {
+  window.Salla = window.Salla || {};
+  window.Salla.Payments = window.Salla.Payments || {};
+}
+
+// Apple Pay method identifier for the W3C Payment Request API.
+const APPLE_PAY_METHOD = 'https://apple.com/apple-pay';
+
+// Captured at module load, before the Apple Pay SDK is injected: real Safari /
+// Apple devices expose `ApplePaySession` natively, whereas non-Safari browsers
+// only get it once the SDK loads. Keeps native-vs-PaymentRequest routing stable.
+const HAS_NATIVE_APPLE_PAY = typeof window !== 'undefined' && !!window.ApplePaySession;
+
+// Shown when the backend offers no usable network. twilight can ship ahead of Languages-Module,
+// so fall through to `payment_failed` while the key is missing — never a hardcoded sentence.
+const NO_SUPPORTED_NETWORK_KEY = 'pages.checkout.apple_pay_no_supported_network';
+const NO_SUPPORTED_NETWORK_FALLBACK_KEY = 'pages.checkout.payment_failed';
 
 /**
  * Full Example
@@ -35,7 +52,9 @@ window.Salla.Payments = window.Salla.Payments || {};
  *                  // }
  *              });
  */
-window.SallaApplePay = {
+
+// SSR-safe: define SallaApplePay as a stub during SSR, actual object in browser
+const SallaApplePay = typeof window !== 'undefined' ? {
     session: null,
     detail: null,
     address_id: null,
@@ -43,6 +62,14 @@ window.SallaApplePay = {
     total: undefined,
     request: undefined,
     id: undefined,
+    countryCode: null,
+    totals: [],
+    shippingCompany: null,
+    // Set true once onCancel has fired for the current transaction, so the
+    // QR (PaymentRequest) dismissal catch can notify on a plain sheet-close
+    // without double-firing when a prior handler (e.g. merchant validation)
+    // already routed through onCancel. Reset at the start of each transaction.
+    canceled: false,
     init: function () {
         document.removeEventListener('payments::apple-pay.start-transaction', SallaApplePay.startSession);
         Salla.event.addEventListener('payments::apple-pay.start-transaction', SallaApplePay.startSession);
@@ -66,7 +93,7 @@ window.SallaApplePay = {
         if (!SallaApplePay.detail.validateMerchant.onFailed) {
             SallaApplePay.detail.validateMerchant.onFailed = (response) => {
                 salla.logger.log(JSON.stringify(response))
-                salla.api.handleErrorResponse(response);
+                salla.api.handleErrorResponse({response});
                 SallaApplePay.onCancel({}, response.data.error.message);
             };
         }
@@ -80,11 +107,11 @@ window.SallaApplePay = {
     },
 
     prepareLineItems: function () {
-        if(!SallaApplePay.detail?.items?.length){
+        if (!SallaApplePay.detail?.items?.length) {
             SallaApplePay.detail.items = [
                 {
                     label: salla.lang.get('pages.cart.items_total'),
-                    amount: SallaApplePay.detail.amount
+                    amount: parseFloat(SallaApplePay.detail.amount).toString()
                 }
             ]
         }
@@ -93,31 +120,87 @@ window.SallaApplePay = {
     },
 
     prepareTotal: function () {
-       return {
-           // apple ask to use business name
-           label: window.location.hostname || 'Salla',
-           //label: salla.lang.get('pages.cart.final_total'),
-           amount: SallaApplePay.detail.amount
-       }
+        return {
+            // apple ask to use business name
+            label: window.location.hostname || 'Salla',
+            //label: salla.lang.get('pages.cart.final_total'),
+            amount: parseFloat(SallaApplePay.detail.amount).toString()
+        }
+    },
+
+    isPhysical() {
+        return SallaApplePay.detail?.requiredShippingContactFields?.includes('postalAddress');
+    },
+
+    /**
+     * Whether the native Apple Pay flow (Safari / Apple devices) can run. Gated
+     * on the module-load capture so the SDK loading later can't flip a
+     * non-Safari browser into the native path.
+     */
+    canUseNative: function () {
+        if (!HAS_NATIVE_APPLE_PAY) {
+            return false;
+        }
+        try {
+            return ApplePaySession.canMakePayments();
+        } catch (e) {
+            return false;
+        }
+    },
+
+    // Sourced from config (via the transaction detail). No fallback: a missing
+    // identifier means Apple Pay isn't configured for this store, and callers
+    // treat that null as the guard to skip Apple Pay.
+    getMerchantIdentifier: function () {
+        return (SallaApplePay.detail && SallaApplePay.detail.merchantIdentifier) || null;
     },
 
     startSession: async function (event) {
 
         SallaApplePay.detail = event.detail || event;
 
+        // Fresh transaction → clear any cancel flag from a previous attempt.
+        SallaApplePay.canceled = false;
+
+        // Analytics latches — one Submitted and one Succeeded per attempt, and
+        // at most one Failed, however many callbacks fire.
+        SallaApplePay._submittedTracked = false;
+        SallaApplePay._failureTracked = false;
+        SallaApplePay._succeededTracked = false;
+
+        // The cart belongs to the attempt, not to the singleton. The mini embed
+        // supplies one up front; on the PDP it stays null until checkout/mini
+        // answers during merchant validation. Without this a second attempt
+        // reports — and submits to — the previous attempt's cart.
+        SallaApplePay.id = SallaApplePay.detail?.cartId || null;
+
         salla.log('🍏 Pay: payments::apple-pay.start-transaction', SallaApplePay.detail);
 
         SallaApplePay.initDefault();
 
+        // Native (Safari / Apple devices) → classic ApplePaySession. Otherwise
+        // (non-Safari / non-Apple device) → Payment Request API, which renders
+        // Apple's "Scan Code with iPhone" QR sheet.
+        if (!SallaApplePay.canUseNative()) {
+            return SallaApplePay.startPaymentRequestSession(event);
+        }
+
+        return SallaApplePay.startNativeSession(event);
+    },
+
+    startNativeSession: async function (event) {
+
         let version = SallaApplePay.getApplePaySessionVersion();
-        let supportedNetworks = SallaApplePay.detail.supportedNetworks || ['masterCard', 'visa'];
+        // The backend resolves this per shopper, so it goes to Apple verbatim. Adding mada back
+        // here is what let a shopper authorize with Face ID and only then be refused.
+        let supportedNetworks = resolveApplePayNetworks(SallaApplePay.detail.supportedNetworks);
 
-        if (version === 5) {
-            supportedNetworks.push('mada');
+        if (!supportedNetworks.length) {
+            return SallaApplePay.abandonNoSupportedNetwork();
         }
 
         SallaApplePay.request = {
-            countryCode: 'SA',
+            countryCode: SallaApplePay.detail.countryCode || 'SA',
             supportsCouponCode: true,
             couponCode: '',
             currencyCode: SallaApplePay.detail.currency || 'SAR',
@@ -141,30 +224,79 @@ window.SallaApplePay = {
         SallaApplePay.session.onvalidatemerchant = SallaApplePay.onValidateMerchant;
         SallaApplePay.session.onpaymentauthorized = SallaApplePay.onPaymentAuthorized;
         SallaApplePay.session.oncancel = SallaApplePay.onCancel;
-        SallaApplePay.session.oncouponcodechanged = SallaApplePay.oncouponcodechanged;
-        SallaApplePay.session.onpaymentmethodselected = SallaApplePay.onpaymentmethodselected;
-
-        SallaApplePay.session.begin();
+        SallaApplePay.session.oncouponcodechanged = SallaApplePay.onCouponCodeChanged;
+        SallaApplePay.session.onpaymentmethodselected = SallaApplePay.onPaymentMethodSelected;
+
+        // Hook between session creation and begin(). Return truthy to skip
+        // begin() (caller handles it later, e.g. after async work).
+        let skipBegin;
+        if (typeof SallaApplePay.detail.onStartedSession === 'function') {
+            skipBegin = SallaApplePay.detail.onStartedSession(SallaApplePay.session);
+        }
+        if (!skipBegin) {
+            try {
+                SallaApplePay.session.begin();
+            } catch (error) {
+                salla.logger.error('🍏 Pay: session.begin() failed', error);
+                SallaApplePay.trackPaymentFailed('client', 'APPLE_PAY_PRESENTATION_FAILED', error?.message || '');
+                SallaApplePay.detail.onError(salla.lang.get('pages.checkout.payment_failed'));
+                Salla.event.createAndDispatch('payments::apple-pay.canceled', {});
+            }
+        }
+        // skipBegin path: the caller begins later — onValidateMerchant fires
+        // once the sheet actually opens and emits the (latched) Submitted.
     },
-    async onpaymentmethodselected(event) {
-        await SallaApplePay.recalculateTotal();
-        const updatedPaymentDetails = {
+    onPaymentMethodSelected: async (event) => {
+        salla.logger.log('🍏 Pay: onPaymentMethodSelected', event);
+
+        // perform recalculate here only if digital product
+        // if physical recalculate performed with shipping company
+        if (!SallaApplePay.isPhysical()) {
+            try {
+                await SallaApplePay.recalculateTotal();
+    
+                const updatedPaymentDetails = {
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems()
+                };
+    
+                salla.logger.log('🍏 Pay: completePaymentMethodSelection', updatedPaymentDetails);
+
+                SallaApplePay.session.completePaymentMethodSelection(updatedPaymentDetails);
+
+            } catch (error) {
+                salla.logger.warn('🍏 Pay: Failed recalculate total', error);
+    
+                SallaApplePay.session.completePaymentMethodSelection({
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems(),
+                    status: SallaApplePay.session.STATUS_FAILURE,
+                    errors: [new window.ApplePayError("unknown", undefined, error?.response?.data?.error?.message || error?.response?.data?.error?.code || 'Failed to recalculate total')]
+                });
+            }
+            return;
+        }
+
+        salla.logger.log('🍏 Pay: completePaymentMethodSelection', {
             newTotal: SallaApplePay.prepareTotal(),
             newLineItems: SallaApplePay.prepareLineItems(),
-        };
+        });
 
-        SallaApplePay.session.completePaymentMethodSelection(updatedPaymentDetails);
+        SallaApplePay.session.completePaymentMethodSelection({
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
     },
 
-    oncouponcodechanged(event) {
+    onCouponCodeChanged(event) {
         Salla.event.dispatch('payments::apple-pay.coupon.change', event);
 
-        return Http.post(SallaApplePay.detail.oncouponcodechanged.url.replace('{id}', SallaApplePay.id), {
+        return http.post(SallaApplePay.detail.onCouponCodeChanged.url.replace('{id}', SallaApplePay.id), {
             'coupon': event.couponCode,
             'payment_method': 'apple_pay',
-        }, async ({data}) => {
-            if (typeof SallaApplePay.detail.oncouponcodechanged.onSuccess === 'function') {
-                SallaApplePay.detail.oncouponcodechanged.onSuccess(data);
+        }, async ({ data }) => {
+            if (typeof SallaApplePay.detail.onCouponCodeChanged.onSuccess === 'function') {
+                SallaApplePay.detail.onCouponCodeChanged.onSuccess(data);
             }
 
             salla.log('🍏 Pay: Coupon applied success');
@@ -181,8 +313,8 @@ window.SallaApplePay = {
             Salla.event.dispatch('payments::apple-pay.coupon.failed', response);
 
             // SallaApplePay.abortSession();
-            if (typeof SallaApplePay.detail.oncouponcodechanged.onFailed === 'function') {
-                SallaApplePay.detail.oncouponcodechanged.onFailed(response);
+            if (typeof SallaApplePay.detail.onCouponCodeChanged.onFailed === 'function') {
+                SallaApplePay.detail.onCouponCodeChanged.onFailed(response);
             }
 
             await SallaApplePay.recalculateTotal();
@@ -195,7 +327,29 @@ window.SallaApplePay = {
         });
     },
 
+    /**
+     * Give up before the sheet opens: the backend left no usable network.
+     *
+     * Routed through onCancel so the host gets the same terminal signals as a dismissal and the
+     * button recovers. trackPaymentFailed self-gates on Payment Submitted, so the funnel is safe.
+     */
+    abandonNoSupportedNetwork: () => {
+        salla.logger.error('🍏 Pay: no supported network for this shopper — Apple Pay not offered');
+
+        const message = salla?.lang?.get?.(NO_SUPPORTED_NETWORK_KEY);
+        const resolved = !message || message === NO_SUPPORTED_NETWORK_KEY
+            ? salla?.lang?.get?.(NO_SUPPORTED_NETWORK_FALLBACK_KEY)
+            : message;
+
+        SallaApplePay.onCancel({}, resolved || null);
+    },
+
     onCancel: (event = {}, message = null) => {
+        SallaApplePay.canceled = true;
+        // Sheet opened (Payment Submitted already fired) but the attempt ended
+        // without authorization — dismissal, abort, or validation failure.
+        // Latched: a server rejection tracked earlier absorbs this call.
+        SallaApplePay.trackPaymentFailed('client', 'APPLE_PAY_SESSION_CANCELED', message || '');
         SallaApplePay.detail.onError(message || salla.lang.get('pages.checkout.payment_failed'));
         Salla.event.createAndDispatch('payments::apple-pay.canceled', event);
     },
@@ -208,35 +362,89 @@ window.SallaApplePay = {
     onPaymentAuthorized: async (event) => {
         salla.logger.log('🍏 Pay: onPaymentAuthorized', event.payment);
 
-        // Update the payment address
-        await mutateShipmentAddress(SallaApplePay, event.payment.shippingContact, true);
+        // update guest details
+        try {
+            await mutateShippingContact(SallaApplePay, event.payment.shippingContact, true);
+        } catch (error) {
+            salla.logger.error('🍏 Pay: Failed to update guest contact details', error);
+            
+            const response = error?.response || error;
+            
+            // Parse backend errors for shipping contact fields
+            const fields = response?.data?.error?.fields || {};
+            const errors = [];
+            
+            // Map backend field errors to Apple Pay contact field errors
+            if (fields?.email && fields.email.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'emailAddress', fields.email[0]));
+            }
+
+            if (fields?.phone && fields.phone.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'phoneNumber', fields.phone[0]));
+            }
+
+            if (fields?.first_name && fields.first_name.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', fields.first_name[0]));
+            } else if (fields?.last_name && fields.last_name.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', fields.last_name[0]));
+            }
+            
+            // If no specific field errors, use general error message
+            if (errors.length === 0) {
+                const errorMessage = response?.data?.error?.message || response?.data?.error?.code || 'Invalid shipping contact details';
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', errorMessage));
+            }
+            
+            Salla.event.dispatch('payments::apple-pay.authorized.failed', response);
+            
+            if (typeof SallaApplePay.detail.authorized.onFailed === 'function') {
+                SallaApplePay.detail.authorized.onFailed(response);
+            }
+
+            // Complete shipping contact selection with invalid contact status
+            SallaApplePay.session.completePayment({
+                status: ApplePaySession.STATUS_INVALID_SHIPPING_CONTACT,
+                errors: errors
+            });
+
+            return;
+        }
 
         Salla.event.dispatch('payments::apple-pay.authorized.init', event);
-        Http.post(SallaApplePay.detail.authorized.url.replace('{id}', SallaApplePay.id), {
+        // The shopper has authorised with Face ID / Touch ID and the token is
+        // about to go to the gateway — this is the submission, not the tap.
+        SallaApplePay.trackPaymentSubmitted();
+        http.post(SallaApplePay.detail.authorized.url.replace('{id}', SallaApplePay.id), {
             payment_method: 'apple_pay',
             applepay_token: JSON.stringify(event.payment)
-        }, ({data}) => {
+        }, ({ data }) => {
             Salla.event.dispatch('payments::apple-pay.authorized.success', data);
-
-            SallaApplePay.session.completePayment(ApplePaySession.STATUS_SUCCESS);
+            SallaApplePay.trackPaymentSucceeded(data);
 
             if (typeof SallaApplePay.detail.authorized.onSuccess === 'function') {
                 SallaApplePay.detail.authorized.onSuccess(data);
             }
+
+            SallaApplePay.session.completePayment(ApplePaySession.STATUS_SUCCESS);
         }, (error) => {
 
             let response = error?.response;
 
             Salla.event.dispatch('payments::apple-pay.authorized.failed', response);
-
-            SallaApplePay.session.completePayment({
-                status: ApplePaySession.STATUS_FAILURE,
-                errors: [new ApplePayError("unknown", undefined, response?.data?.error?.message || response?.data?.error?.code || 'Failed to parse authorized response')]
-            })
+            // Backend rejected the token — latch set so the cancel callback
+            // following the failure UI can't emit a second Failed.
+            SallaApplePay.trackPaymentFailed('server',
+                response?.data?.error?.code || 'APPLE_PAY_FAILED',
+                response?.data?.error?.message || '');
 
             if (typeof SallaApplePay.detail.authorized.onFailed === 'function') {
                 SallaApplePay.detail.authorized.onFailed(response);
             }
+
+            SallaApplePay.session.completePayment({
+                status: ApplePaySession.STATUS_FAILURE,
+                errors: [new window.ApplePayError("unknown", undefined, response?.data?.error?.message || response?.data?.error?.code || 'Failed to parse authorized response')]
+            })
         });
     },
 
@@ -251,7 +459,7 @@ window.SallaApplePay = {
             Salla.event.dispatch('payments::apple-pay.validate-merchant.init', event);
 
             // Post request to validate merchant
-            const { data } = await Http.post(SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id), {
+            const { data } = await http.post(SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id), {
                 validation_url: event.validationURL
             });
 
@@ -300,7 +508,7 @@ window.SallaApplePay = {
         salla.logger.log('🍏 Pay: onShippingContactSelected', event.shippingContact);
 
         // create address for shipping calculation
-        mutateShipmentAddress(SallaApplePay, event.shippingContact);
+        await mutateShippingContact(SallaApplePay, event.shippingContact);
     },
 
     /**
@@ -310,32 +518,536 @@ window.SallaApplePay = {
      *
      */
     onShippingMethodSelected: async (event) => {
-        salla.logger.log(event);
 
         let shipping_ids = event.shippingMethod.identifier.split(',');
+        let shippingMethod = {
+            ship_id: shipping_ids[0],
+            private_ship_id: typeof shipping_ids[1] === 'undefined' ? null : shipping_ids[1],
+            type: typeof shipping_ids[2] === 'undefined' ? null : shipping_ids[2],
+            route_id: typeof shipping_ids[3] === 'undefined' ? null : shipping_ids[3],
+        };
+
+        salla.logger.log('🍏 Pay: onShippingMethodSelected', {
+            event,
+            previous: SallaApplePay.shippingCompany,
+            current: shippingMethod,
+        });
+
+        if (SallaApplePay.shouldUpdateShippingCompany(shippingMethod)) {
+            try {
+
+                await SallaApplePay.selectApplePayShippingMethod(shippingMethod);
+    
+                await SallaApplePay.recalculateTotal();
+    
+            } catch (error) {
+                salla.logger.warn('🍏 Pay: Failed set the shipping details to api', error);
+    
+                // todo :: find a better handling for error without abort session
+                SallaApplePay.session.completeShippingMethodSelection({
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems(),
+                    status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+                    errors: [
+                      new window.ApplePayError('addressUnserviceable')
+                    ]
+                });
+
+                return;
+            }
+        }
+
+        salla.logger.log('🍏 Pay: completeShippingMethodSelection', {
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+
+        SallaApplePay.session.completeShippingMethodSelection({
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+    },
+
+
+    abortSession: () => {
+        if (SallaApplePay.session) {
+            SallaApplePay.session.abort();
+        }
+    },
+
+    /* -------------------------------------------------------------------------
+     * Payment Request API flow (non-Safari browsers / non-Apple devices).
+     * Apple renders the "Scan Code with iPhone" QR sheet. Reuses the same
+     * backend endpoints (validate / address / shipping / recalculate / submit)
+     * as the native flow; only the sheet-completion model differs
+     * (event.updateWith / response.complete instead of session.completeXxx).
+     * ---------------------------------------------------------------------- */
+
+    paymentRequest: null,
+    paymentResponse: null,
+
+    getCurrency: () => SallaApplePay.detail.currency || 'SAR',
+
+    prAmount: (value) => ({ currency: SallaApplePay.getCurrency(), value: String(value) }),
+
+    prTotal: () => {
+        const total = SallaApplePay.prepareTotal();
+        return { label: total.label, amount: SallaApplePay.prAmount(total.amount) };
+    },
+
+    prDisplayItems: () => SallaApplePay.prepareLineItems().map(item => ({
+        label: item.label,
+        amount: SallaApplePay.prAmount(item.amount),
+    })),
+
+    prShippingOptions: (selectedId = null) => {
+        const options = SallaApplePay.mappingShippingMethods(SallaApplePay.shipping_methods || []);
+        return options.map((option, index) => ({
+            id: option.identifier,
+            label: option.label,
+            amount: SallaApplePay.prAmount(option.amount),
+            selected: selectedId ? option.identifier === selectedId : index === 0,
+        }));
+    },
+
+    prContactOptions: () => {
+        const fields = SallaApplePay.detail.requiredShippingContactFields || [];
+        return {
+            requestPayerName: fields.includes('name'),
+            requestPayerEmail: fields.includes('email'),
+            requestPayerPhone: fields.includes('phone'),
+            requestShipping: fields.includes('postalAddress'),
+            shippingType: 'shipping',
+        };
+    },
+
+    startPaymentRequestSession: async function () {
+        // No merchant identifier in config → Apple Pay isn't set up for this
+        // store; bail rather than open a QR sheet that can't be validated.
+        const merchantIdentifier = SallaApplePay.getMerchantIdentifier();
+        if (!merchantIdentifier) {
+            salla.logger.error('🍏 Pay: missing merchant identifier — skipping QR Apple Pay');
+            return;
+        }
+
+        const version = SallaApplePay.getApplePaySessionVersion();
+        // Same contract as the native flow. resolveApplePayNetworks also handles the
+        // object-shaped payload, which the old spread would have thrown on.
+        const supportedNetworks = resolveApplePayNetworks(SallaApplePay.detail.supportedNetworks);
+
+        if (!supportedNetworks.length) {
+            return SallaApplePay.abandonNoSupportedNetwork();
+        }
+
+        const methodData = [{
+            supportedMethods: APPLE_PAY_METHOD,
+            data: {
+                version,
+                merchantIdentifier,
+                merchantCapabilities: ['supports3DS'],
+                supportedNetworks,
+                countryCode: SallaApplePay.detail.countryCode || 'SA',
+            },
+        }];
+
+        const requiresShipping = SallaApplePay.isPhysical();
+
+        const details = {
+            total: SallaApplePay.prTotal(),
+            displayItems: SallaApplePay.prDisplayItems(),
+        };
+        if (requiresShipping) {
+            details.shippingOptions = SallaApplePay.prShippingOptions();
+        }
+
+        let request;
+        try {
+            request = new PaymentRequest(methodData, details, SallaApplePay.prContactOptions());
+        } catch (error) {
+            salla.logger.error('🍏 Pay: Failed to create PaymentRequest', error);
+            SallaApplePay.detail.onError(salla.lang.get('pages.checkout.payment_failed'));
+            return;
+        }
+
+        SallaApplePay.paymentRequest = request;
+
+        request.onmerchantvalidation = (event) => {
+            event.complete(SallaApplePay.prValidateMerchant(event));
+        };
+
+        if (requiresShipping) {
+            request.onshippingaddresschange = (event) => {
+                event.updateWith(SallaApplePay.prShippingAddressChange(request));
+            };
+            request.onshippingoptionchange = (event) => {
+                event.updateWith(SallaApplePay.prShippingOptionChange(request));
+            };
+        }
+
+        // Showing the sheet is the QR equivalent of ApplePaySession.begin(): it
+        // must run inside the user gesture (transient activation). Wrapped so the
+        // order-options deferral can drive it — the caller either calls begin()
+        // itself (no options → open the QR sheet now) or discards this request
+        // and the modal's own Apple Pay button starts a fresh one (options found).
+        const beginShow = async () => {
+            // The QR sheet is browser chrome (fixed, top layer) that overlays the
+            // page. Signal open/closed so hosts embedding Apple Pay (e.g. the
+            // mini-checkout modal in an iframe) can hide UI — like their own close
+            // button — that would otherwise collide with the sheet.
+            Salla.event.dispatch('payments::apple-pay.sheet-opened');
+            try {
+                const response = await request.show();
+                SallaApplePay.paymentResponse = response;
+                await SallaApplePay.prPaymentAuthorized(response);
+            } catch (error) {
+                // AbortError → the shopper dismissed the sheet / QR, or merchant
+                // validation rejected. Mirror the native oncancel path so hosts
+                // listening for payments::apple-pay.canceled (to reset checkout UI)
+                // still get notified on a plain dismissal. The `canceled` guard
+                // skips the double-fire when validation already routed through
+                // onCancel via validateMerchant.onFailed.
+                salla.logger.log('🍏 Pay: PaymentRequest closed', error);
+                if (error?.name === 'AbortError' && !SallaApplePay.canceled) {
+                    SallaApplePay.onCancel({});
+                }
+            } finally {
+                SallaApplePay.paymentRequest = null;
+                SallaApplePay.paymentResponse = null;
+                Salla.event.dispatch('payments::apple-pay.sheet-closed');
+            }
+        };
+
+        // Mirror the native path (startNativeSession): expose a hook between
+        // request creation and show(). Returning truthy skips the immediate
+        // show() so the order-options modal can open first. Same shim contract
+        // as native — the caller only needs `.begin()`.
+        let skipBegin;
+        if (typeof SallaApplePay.detail.onStartedSession === 'function') {
+            skipBegin = SallaApplePay.detail.onStartedSession({ begin: beginShow });
+        }
+        if (!skipBegin) {
+            await beginShow();
+        }
+    },
+
+    /** Merchant validation — resolves the promise passed to event.complete(). */
+    prValidateMerchant: async function (event) {
+        Salla.event.dispatch('payments::apple-pay.validate-merchant.init', event);
+        try {
+            const { data } = await http.post(
+                SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id),
+                { validation_url: event.validationURL }
+            );
+
+            // The BE can return HTTP 200 while Apple actually rejected the session
+            // (e.g. statusCode 417 "not a registered merchant in WWDR"), with the
+            // real session under data.data. A valid Apple session always carries a
+            // merchantSessionIdentifier; its absence means validation failed. Without
+            // this the QR sheet just closes silently — notify the shopper and abort.
+            if (!data?.data?.merchantSessionIdentifier) {
+                salla.logger.error('🍏 Pay: merchant validation failed', data?.statusMessage || data);
+                Salla.event.dispatch('payments::apple-pay.validate-merchant.failed', { data });
+                SallaApplePay.onCancel({});
+                // Dismiss the sheet + paired device immediately. Rejecting
+                // event.complete() alone leaves them spinning until Apple's own
+                // timeout; abort() forces an instant close. Deferred a tick so it
+                // runs after this validation update settles (abort() throws if
+                // called while an update is still in flight).
+                setTimeout(() => {
+                    try { SallaApplePay.paymentRequest?.abort(); } catch (e) { /* already closing */ }
+                }, 0);
+                const validationError = new Error('Apple Pay merchant validation failed');
+                validationError.handled = true;
+                throw validationError;
+            }
+
+            Salla.event.dispatch('payments::apple-pay.validate-merchant.success', data);
+
+            if (typeof SallaApplePay.detail.validateMerchant.onSuccess === 'function') {
+                const response = await SallaApplePay.detail.validateMerchant.onSuccess(data);
+                if (response?.redirect) {
+                    window.location = response.redirect;
+                }
+            }
 
+            return data.data;
+        } catch (error) {
+            // Skip when the invalid-session branch above already notified via onCancel.
+            if (!error?.handled) {
+                const response = error?.response;
+                Salla.event.dispatch('payments::apple-pay.validate-merchant.failed', response);
+                if (typeof SallaApplePay.detail.validateMerchant.onFailed === 'function') {
+                    SallaApplePay.detail.validateMerchant.onFailed(response);
+                }
+            }
+            // Rethrow so PaymentRequest aborts the sheet.
+            throw error;
+        }
+    },
+
+    /**
+     * ISO 3166 alpha-2 code → localized country name. The native path sends the
+     * country *name* in `country` (from ApplePayPaymentContact.country) and the
+     * ISO code in `country_code`; W3C PaymentAddress only exposes the ISO code,
+     * so we derive the name the backend expects. Falls back to the code if
+     * Intl.DisplayNames is unavailable or the code is unknown.
+     */
+    prCountryName: (isoCode) => {
+        if (!isoCode) {
+            return isoCode;
+        }
         try {
-            await SallaApplePay.selectApplePayShippingMethod(shipping_ids[0], typeof shipping_ids[1] === 'undefined' ? null : shipping_ids[1]);
+            const locale = (salla?.config?.get?.('user.language_code')) || 'en';
+            return new Intl.DisplayNames([locale], { type: 'region' }).of(isoCode) || isoCode;
+        } catch (e) {
+            return isoCode;
+        }
+    },
 
+    /** Shipping address selected in the sheet → returns a PaymentDetailsUpdate. */
+    prShippingAddressChange: async function (request) {
+        const address = request.shippingAddress;
+        const fallback = {
+            total: SallaApplePay.prTotal(),
+            displayItems: SallaApplePay.prDisplayItems(),
+            shippingOptions: [],
+        };
+
+        if (!address) {
+            return fallback;
+        }
+
+        try {
+            const { data } = await http.post(
+                SallaApplePay.detail.shippingContactSelected.url.replace('{id}', SallaApplePay.id),
+                {
+                    country: SallaApplePay.prCountryName(address.country),
+                    city: address.city,
+                    local: address.dependentLocality || address.region || address.city,
+                    description: address.region,
+                    street: (address.addressLine || []).join(', ') || address.region,
+                    country_code: address.country,
+                    postal_code: address.postalCode,
+                }
+            );
+
+            SallaApplePay.address_id = data.data.address_id;
+            SallaApplePay.shipping_methods = data.data.shipping_methods;
+
+            if (!SallaApplePay.shipping_methods?.length) {
+                return { ...fallback, error: salla.lang.get('pages.checkout.payment_failed') };
+            }
+
+            await SallaApplePay.selectApplePayShippingMethod(SallaApplePay.shipping_methods[0]);
             await SallaApplePay.recalculateTotal();
 
-            SallaApplePay.session.completeShippingMethodSelection({
-                newTotal: SallaApplePay.prepareTotal(),
-                newLineItems: SallaApplePay.prepareLineItems(),
+            return {
+                total: SallaApplePay.prTotal(),
+                displayItems: SallaApplePay.prDisplayItems(),
+                shippingOptions: SallaApplePay.prShippingOptions(),
+            };
+        } catch (error) {
+            salla.logger.warn('🍏 Pay: PR shipping address change failed', error);
+            return { ...fallback, error: salla.lang.get('pages.checkout.payment_failed') };
+        }
+    },
+
+    /** Shipping option selected in the sheet → returns a PaymentDetailsUpdate. */
+    prShippingOptionChange: async function (request) {
+        const identifier = request.shippingOption;
+        if (!identifier) {
+            return {
+                total: SallaApplePay.prTotal(),
+                displayItems: SallaApplePay.prDisplayItems(),
+                shippingOptions: SallaApplePay.prShippingOptions(),
+            };
+        }
+
+        const ids = identifier.split(',');
+        const shippingMethod = {
+            ship_id: ids[0],
+            private_ship_id: typeof ids[1] === 'undefined' ? null : ids[1],
+            type: typeof ids[2] === 'undefined' ? null : ids[2],
+            route_id: typeof ids[3] === 'undefined' ? null : ids[3],
+        };
+
+        try {
+            if (SallaApplePay.shouldUpdateShippingCompany(shippingMethod)) {
+                await SallaApplePay.selectApplePayShippingMethod(shippingMethod);
+                await SallaApplePay.recalculateTotal();
+            }
+            return {
+                total: SallaApplePay.prTotal(),
+                displayItems: SallaApplePay.prDisplayItems(),
+                shippingOptions: SallaApplePay.prShippingOptions(identifier),
+            };
+        } catch (error) {
+            salla.logger.warn('🍏 Pay: PR shipping option change failed', error);
+            return {
+                total: SallaApplePay.prTotal(),
+                displayItems: SallaApplePay.prDisplayItems(),
+                shippingOptions: SallaApplePay.prShippingOptions(identifier),
+                error: salla.lang.get('pages.checkout.payment_failed'),
+            };
+        }
+    },
+
+    /** Map the PaymentResponse payer fields to the contact shape the API expects. */
+    prContactFromResponse: (response) => {
+        const name = (response.payerName || '').trim();
+        const spaceIndex = name.indexOf(' ');
+        return {
+            givenName: spaceIndex > -1 ? name.slice(0, spaceIndex) : name,
+            familyName: spaceIndex > -1 ? name.slice(spaceIndex + 1) : '',
+            emailAddress: response.payerEmail || null,
+            phoneNumber: response.payerPhone || null,
+            countryCode: response.shippingAddress?.country || SallaApplePay.detail.countryCode || null,
+        };
+    },
+
+    track: function (event, extra = {}) {
+        const id = SallaApplePay.id ? String(SallaApplePay.id) : null;
+        try {
+            salla.analytics?.track(event, {
+                payment_method: 'apple_pay',
+                gateway: 'apple_pay',
+                cart_id: id,
+                checkout_id: id,
+                session_id: salla.config?.get?.('jitsu.session_id') || null,
+                ...extra,
+                // The host knows the surface — PDP quick-buy vs the mini-checkout
+                // embed both render salla-quick-buy and share this package.
+                checkout_type: extra.checkout_type
+                    || SallaApplePay.detail?.checkout_type
+                    || 'applepay_checkout',
             });
         } catch (error) {
-            salla.logger.warn('🍏 Pay: Failed set the shipping details to api', error);
+            salla.logger.error('🍏 Pay: failed to track ' + event, error);
+        }
+    },
 
-            // todo :: find a better handling for error without abort session
-            SallaApplePay.abortSession();
+    trackPaymentSubmitted: function () {
+        if (SallaApplePay._submittedTracked) {
+            return;
         }
+        SallaApplePay._submittedTracked = true;
+        // Checkout Started belongs to the host: the mini-checkout embed already
+        // emits its own on open, and on the PDP the cart does not exist until
+        // checkout/mini answers, so salla-quick-buy fires it there with a real id.
+        SallaApplePay.track('Payment Submitted', {});
     },
 
+    trackPaymentFailed: function (errorType, errorCode, message = '') {
+        // Payment Failed answers a Payment Submitted, and Submitted is emitted at
+        // authorization. Anything that ends the attempt before that — a dismissed
+        // sheet, a refused presentation, merchant validation — is abandonment or a
+        // setup error, not a failed payment, and counting it here would make
+        // Failed exceed Submitted. Those paths still log, still call
+        // detail.onError and still dispatch payments::apple-pay.canceled, so
+        // hosts and error reporting are unaffected; only the funnel is.
+        if (!SallaApplePay._submittedTracked || SallaApplePay._failureTracked) {
+            return;
+        }
+        SallaApplePay._failureTracked = true;
+        SallaApplePay.track('Payment Failed', {
+            error_type: errorType,
+            error_code: errorCode,
+            error_message: message || '',
+        });
+    },
 
-    abortSession: () => {
-        if (SallaApplePay.session) {
-            SallaApplePay.session.abort();
+    trackPaymentSucceeded: function (data) {
+        if (SallaApplePay._succeededTracked) {
+            return;
         }
+        SallaApplePay._succeededTracked = true;
+        const payload = data?.data || data || {};
+        SallaApplePay.track('Payment Succeeded', {
+            order_id: payload.order_id || null,
+            cart_total: payload.total || SallaApplePay.detail?.amount || null,
+            response_status: 'success',
+            has_redirect: false,
+            redirect_url: null,
+        });
+    },
+
+    /** Authorize + submit the payment, then close the sheet. */
+    prPaymentAuthorized: async function (response) {
+        // Guest checkout → persist the payer contact before submitting.
+        if (SallaApplePay.detail.guestContactSelected) {
+            const contact = SallaApplePay.prContactFromResponse(response);
+
+            // Require familyName too, mirroring the native guest guard
+            // (utils.js mutateShippingContact). Keeps the payload the backend
+            // receives identical to the production native flow — it has only
+            // ever been sent a non-empty last_name from Apple Pay guest checkout.
+            if (!contact.emailAddress || !contact.givenName || !contact.familyName || !contact.phoneNumber) {
+                await response.complete('fail');
+                SallaApplePay.detail.onError(salla.lang.get('common.messages.required_fields'));
+                return;
+            }
+
+            try {
+                await http.post(
+                    SallaApplePay.detail.guestContactSelected.url.replace('{id}', SallaApplePay.id),
+                    {
+                        email: contact.emailAddress,
+                        first_name: contact.givenName,
+                        last_name: contact.familyName,
+                        phone_number: contact.phoneNumber,
+                        country_code: contact.countryCode,
+                    }
+                );
+            } catch (error) {
+                await response.complete('fail');
+                SallaApplePay.detail.onError(
+                    error?.response?.data?.error?.message || salla.lang.get('pages.checkout.payment_failed')
+                );
+                return;
+            }
+        }
+
+        Salla.event.dispatch('payments::apple-pay.authorized.init', response);
+        // Authorised on the paired device; the token is about to be submitted.
+        SallaApplePay.trackPaymentSubmitted();
+
+        let authorizedData;
+        try {
+            const { data } = await http.post(
+                SallaApplePay.detail.authorized.url.replace('{id}', SallaApplePay.id),
+                { payment_method: 'apple_pay', applepay_token: JSON.stringify(response.details) }
+            );
+
+            authorizedData = data;
+            Salla.event.dispatch('payments::apple-pay.authorized.success', data);
+            SallaApplePay.trackPaymentSucceeded(data);
+            await response.complete('success');
+        } catch (error) {
+            const errorResponse = error?.response;
+            Salla.event.dispatch('payments::apple-pay.authorized.failed', errorResponse);
+            // Backend rejected the token — latch set so the sheet-close /
+            // cancel that follows can't emit a second Failed.
+            SallaApplePay.trackPaymentFailed('server',
+                errorResponse?.data?.error?.code || 'APPLE_PAY_FAILED',
+                errorResponse?.data?.error?.message || '');
+            await response.complete('fail');
+            if (typeof SallaApplePay.detail.authorized.onFailed === 'function') {
+                SallaApplePay.detail.authorized.onFailed(errorResponse);
+            }
+            return;
+        }
+
+        // response.complete() has already run above, and it can only be called
+        // once. Run the merchant onSuccess callback OUTSIDE the try/catch so a
+        // throw here (e.g. redirect handling) can't fall into the catch and fire
+        // a second complete('fail') → InvalidStateError that masks the real error.
+        if (typeof SallaApplePay.detail.authorized.onSuccess === 'function') {
+            SallaApplePay.detail.authorized.onSuccess(authorizedData);
+        }
+    },
+
+    shouldUpdateShippingCompany(shippingCompany) {
+        return SallaApplePay.shippingCompany?.ship_id != shippingCompany?.ship_id || SallaApplePay.shippingCompany?.private_ship_id != shippingCompany?.private_ship_id
     },
 
     getApplePaySessionVersion: () => {
@@ -363,24 +1075,40 @@ window.SallaApplePay = {
     },
 
     recalculateTotal: () => {
-        salla.logger.log('Recalculate Total');
+        salla.logger.log('🍏 Pay: recalculate total');
 
-        return Http.requestWithSupportAjax(SallaApplePay.detail.recalculateTotal.url.replace('{id}', SallaApplePay.id),{}, 'get').then((data) => {
+        return http.get(SallaApplePay.detail.recalculateTotal.url.replace('{id}', SallaApplePay.id), ({ data }) => {
+            salla.logger.log('🍏 Pay: recalculate total success', data);
             let cart = data.data.initial_data?.cart || data.data.cart;
-            // todo :: enhance response from backend
-            SallaApplePay.detail.amount = cart.total;
+            let payments = data.data.initial_data?.payments || data.data.payments;
+
+            salla.logger.log('🍏 Pay: recalculate total success', {
+                cart,
+                payments
+            });
+
+            // BE-canary gate keyed on the live payload (not cached config): the unified BE adds
+            // applePay.amount, legacy BE doesn't — so gate and data can never desync.
+            if (payments?.gateways?.applePay?.amount != null) {
+                // Unified BE: Apple Pay is always charged in the store base currency.
+                SallaApplePay.detail.amount = payments.gateways.applePay.amount;
+                SallaApplePay.detail.currency = payments.gateways.applePay.currency ?? SallaApplePay.detail.currency;
+            } else {
+                // Legacy BE .
+                SallaApplePay.detail.amount = payments?.gateways?.applePay?.supportedMultiCurrency ? cart.total_in_customer_currency : cart.total;
+            }
             SallaApplePay.detail.items = (cart.totals || cart.items).map((item) => {
                 return {
                     label: item.title,
-                    amount: item.amount === 'مجاني' ? 0 : item.amount.toString().replace('+', ''),
+                    amount: (item.amount === 'مجاني' || item.amount === 'Free') ? 0 : item.amount.toString().replace('+', ''),
                 };
             })
 
             // lets remove last element (final total)
             SallaApplePay.detail.items.pop();
+            SallaApplePay.totals = SallaApplePay.detail.items;
 
-            return data;
-        }).catch((error) => {
+        }, (error) => {
             salla.logger.warn('🍏 Pay: recalculate total failed', error);
 
             // general error
@@ -389,22 +1117,26 @@ window.SallaApplePay = {
     },
 
 
-    selectApplePayShippingMethod: (company_id, private_company_id) => {
-        salla.logger.log('🍏 Pay: select shipping method ', 'company_id : ' + company_id, 'private_company_id: ' + private_company_id);
+    selectApplePayShippingMethod: (shippingMethod) => {
+        salla.logger.log('🍏 Pay: select shipping method ', shippingMethod);
+        SallaApplePay.shippingCompany = shippingMethod;
 
-        return Http.requestWithSupportAjax(SallaApplePay.detail.shippingMethodSelected.url.replace('{id}', SallaApplePay.id), {
+        const payload = {
             address_id: SallaApplePay.address_id,
-            company_id: company_id,
-            private_company_id: private_company_id,
+            company_id: shippingMethod.ship_id,
+            private_company_id: shippingMethod.private_ship_id,
+            type: shippingMethod.type || undefined,
+            route_id: shippingMethod.route_id || undefined,
             payment_method: 'apple_pay'
-        }, 'post').then(() => {
-            if (typeof SallaApplePay.detail. shippingMethodSelected.onSuccess === 'function') {
+        }
+        return http.post(SallaApplePay.detail.shippingMethodSelected.url.replace('{id}', SallaApplePay.id), payload, ({ data }) => {
+            if (typeof SallaApplePay.detail.shippingMethodSelected.onSuccess === 'function') {
                 SallaApplePay.detail.shippingMethodSelected.onSuccess(data);
             }
 
             // we don't have any data in this request, lets resolve the promise
             return true;
-        }).catch((error) => {
+        }, (error) => {
             salla.logger.warn('🍏 Pay: Set shipping method failed', error);
 
             if (typeof SallaApplePay.detail.shippingMethodSelected.onFailed === 'function') {
@@ -427,15 +1159,24 @@ window.SallaApplePay = {
         'label': method.shipping_title,
         'amount': method.enable_free_shipping ? 0 : method.ship_cost,
         'detail': '',
-        'identifier': method.ship_id.toString() + (method.private_ship_id ? ',' + method.private_ship_id.toString() : '')
+        'identifier': method.ship_id.toString() + (method.private_ship_id ? ',' + method.private_ship_id.toString() : '') + (method.type ? ',' + method.type : '') + (method.route_id ? ',' + method.route_id : '')
     }))
+} : {};
+
+// SSR-safe: export and assign to window in browser
+if (typeof window !== 'undefined') {
+  window.SallaApplePay = SallaApplePay;
 }
 
 //applePay doesn't allow iframes
-// if (window.ApplePaySession && window.self === window.top && ApplePaySession.canMakePayments()) {
-if (window.ApplePaySession?.canMakePayments()) {
+// SSR-safe (init only in the browser). Native (Safari) OR any browser with the
+// Payment Request API (non-Safari / QR-code fallback) can start a transaction;
+// capability is confirmed per-flow.
+if (typeof window !== 'undefined' && (SallaApplePay.canUseNative() || window.PaymentRequest)) {
     SallaApplePay.init();
-} else {
+} else if (typeof document !== 'undefined') {
     // You can hide the Apple Pay button easy with add data-show-if-apple-pay-supported to element like <div data-show-if-apple-pay-supported>
     document.querySelectorAll('data-show-if-apple-pay-supported').forEach(element => element.style.display = 'none');
 }
+
+export default SallaApplePay;