@salla.sa/twilight-components 2.14.533 → 2.14.534

package/dist/cjs/salla-add-product-button_5.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Bzkj4Mih.js');
+var index = require('./index-DOmij-lb.js');
 var cart = require('./cart-s-x1Fshk.js');
 var Helper = require('./Helper-B2B-kxAI.js');
 var catalogRecommendations = require('./catalog-recommendations-dtK9Dlfw.js');
@@ -20,6 +20,135 @@ var WalletIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
+/**
+ * Shared Apple Pay support helpers: SDK loading, capability detection, merchant
+ * identifier resolution, and Payment Request method-data construction.
+ *
+ * Lives in @salla.sa/applepay (not a theme) because it is Apple Pay domain
+ * logic and is consumed by every Apple Pay entry point — the storefront
+ * components (salla-quick-buy, salla-add-product-button) and the shared
+ * SallaApplePay session in ./index.js.
+ *
+ * Apple Pay runs through two flows:
+ *   - Native (Safari / Apple devices)      → window.ApplePaySession
+ *   - Payment Request API (other browsers) → Apple's "Scan Code with iPhone"
+ *     QR sheet, which requires Apple's JS SDK to be *loaded and registered*
+ *     before PaymentRequest.canMakePayment() reports the method as available.
+ */
+
+const APPLE_PAY_METHOD$1 = 'https://apple.com/apple-pay';
+const APPLE_PAY_SDK_ID = 'apple-pay-sdk';
+const APPLE_PAY_SDK_SRC = 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js';
+
+let sdkPromise = null;
+
+/**
+ * Salla-native Apple merchant identifier, sourced from store settings. Returns
+ * null when the store has no Apple Pay merchant configured — callers treat that
+ * absence as the guard and skip Apple Pay entirely (no hardcoded fallback).
+ * @returns {string|null}
+ */
+function applePayMerchantId() {
+  return salla?.config?.get?.('store.settings.buy_now.merchant_identifier') || null;
+}
+
+/**
+ * Build the W3C Payment Request `methodData` for the Apple Pay method. Callers
+ * supply the values (the probe reads them from config; the live session reads
+ * them from the transaction detail), this owns the constant scaffold so the two
+ * can't drift apart.
+ * @param {{ version: number, merchantIdentifier: string, supportedNetworks: string[], countryCode: string }} opts
+ * @returns {PaymentMethodData[]}
+ */
+function buildApplePayMethodData({ version, merchantIdentifier, supportedNetworks, countryCode }) {
+  return [{
+    supportedMethods: APPLE_PAY_METHOD$1,
+    data: {
+      version,
+      merchantIdentifier,
+      merchantCapabilities: ['supports3DS'],
+      supportedNetworks,
+      countryCode,
+    },
+  }];
+}
+
+/**
+ * Inject Apple's Pay JS SDK (`1.latest` ships the cross-browser / QR support)
+ * and resolve once it has loaded. Idempotent: a second call reuses the same
+ * in-flight promise and never appends a second <script>. Resolves (rather than
+ * rejects) on load error so a failed CDN fetch simply falls back to "no QR".
+ * @returns {Promise<void>}
+ */
+function ensureApplePaySdk() {
+  if (typeof document === 'undefined') return Promise.resolve();
+
+  if (sdkPromise) return sdkPromise;
+
+  const existing = document.getElementById(APPLE_PAY_SDK_ID);
+  if (existing) {
+    // Script already in the DOM (e.g. added before this refactor). We can't know
+    // if it finished loading, so resolve immediately — the native/PaymentRequest
+    // probe will just report unavailable until the browser registers the method.
+    sdkPromise = Promise.resolve();
+    return sdkPromise;
+  }
+
+  sdkPromise = new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.src = APPLE_PAY_SDK_SRC;
+    script.setAttribute('id', APPLE_PAY_SDK_ID);
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => resolve();
+    document.body.appendChild(script);
+  });
+
+  return sdkPromise;
+}
+
+/**
+ * Whether Apple Pay can be completed in the current browser: natively
+ * (Safari / Apple devices) or via the Payment Request API (non-Safari browsers
+ * / non-Apple devices → QR-code fallback).
+ *
+ * For the QR path this awaits the SDK before probing, so callers get a stable
+ * answer on first load instead of racing the async script fetch.
+ * @param {string} [currency]
+ * @returns {Promise<boolean>}
+ */
+async function canCompleteApplePay(currency = 'SAR') {
+  try {
+    if (window.ApplePaySession?.canMakePayments?.()) return true;
+  } catch (e) { /* not supported natively */ }
+
+  if (typeof window === 'undefined' || !window.PaymentRequest) return false;
+
+  // QR path only: it can't validate the merchant without a merchant identifier,
+  // so treat a missing config key as the guard. Native (above) is unaffected —
+  // it never uses the client-side merchant id.
+  if (!applePayMerchantId()) return false;
+
+  await ensureApplePaySdk();
+
+  try {
+    const request = new PaymentRequest(
+      buildApplePayMethodData({
+        version: 3,
+        merchantIdentifier: applePayMerchantId(),
+        supportedNetworks: salla?.config?.get?.('store.settings.buy_now.supportedNetworks')
+          || salla?.config?.get?.('store.settings.buy_now.networks')
+          || ['masterCard', 'visa'],
+        countryCode: salla?.config?.get?.('store.store_country') || 'SA',
+      }),
+      { total: { label: 'Salla', amount: { currency: currency || 'SAR', value: '0.00' } } },
+    );
+    return await request.canMakePayment();
+  } catch (e) {
+    return false;
+  }
+}
+
 /**
  * Order-options gate for the fast-checkout widget — keeps <salla-add-product-button> thin.
  * Intercepts the widget click → runs the order-options modal → injects the result → re-fires the click.
@@ -303,16 +432,18 @@ const SallaAddProductButton = class {
     }
     componentWillLoad() {
         return salla.onReady()
-            .then(() => {
+            .then(async () => {
             // this to fix not added hydrated class to html element after components loaded
             document.documentElement.classList.add('hydrated');
             this.showQuickBuy = this.quickBuy
                 && salla.config.get('store.settings.buy_now')
                 && this.productStatus == 'sale'
                 && this.productType !== 'booking';
-            this.isApplePayActive = window.ApplePaySession?.canMakePayments()
-                && salla.config.get('store.settings.payments')?.includes('apple_pay')
-                && salla.config.get('store.settings.is_salla_gateway', false);
+            // Cross-browser Apple Pay: native (Safari) OR the Payment Request API
+            // (non-Safari browsers / non-Apple devices via the QR-code fallback).
+            this.isApplePayActive = salla.config.get('store.settings.payments')?.includes('apple_pay')
+                && salla.config.get('store.settings.is_salla_gateway', false)
+                && await canCompleteApplePay();
             this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
             if (!!this.passedLabel && this.isDesktopViewport) {
                 return this.btn?.setText(this.passedLabel);
@@ -1835,9 +1966,6 @@ const SallaProductOptions = class {
 };
 SallaProductOptions.style = sallaProductOptionsCss;
 
-// display currency (these requests use the global axios, not salla's instance). Legacy-BE stores
-// (isLegacyBuyNowBE) keep the old behavior — no override. Set once on the axios defaults so
-// every method inherits it without overriding the rest of the headers.
 function setBaseCurrencyHeader() {
     index.axios.defaults.headers.common.currency = salla?.config?.get?.('user.currency_code');
 }
@@ -2223,6 +2351,14 @@ if (typeof window !== 'undefined') {
   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;
+
 /**
  * Full Example
  *
@@ -2266,6 +2402,11 @@ const SallaApplePay = typeof window !== '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);
@@ -2328,14 +2469,52 @@ const SallaApplePay = typeof window !== 'undefined' ? {
         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;
+
         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();
         // Normalize to an array: the backend can serialize the networks list as a JSON object
         // (non-sequential PHP array keys). Copy it so we never mutate the shared `detail` reference.
@@ -2469,6 +2648,7 @@ const SallaApplePay = typeof window !== 'undefined' ? {
     },
 
     onCancel: (event = {}, message = null) => {
+        SallaApplePay.canceled = true;
         SallaApplePay.detail.onError(message || salla.lang.get('pages.checkout.payment_failed'));
         Salla.event.createAndDispatch('payments::apple-pay.canceled', event);
     },
@@ -2685,6 +2865,400 @@ const SallaApplePay = typeof window !== 'undefined' ? {
         }
     },
 
+    /* -------------------------------------------------------------------------
+     * 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();
+        const supportedNetworks = [...(SallaApplePay.detail.supportedNetworks || ['masterCard', 'visa'])];
+        if (version === 5 && !supportedNetworks.includes('mada')) {
+            supportedNetworks.push('mada');
+        }
+
+        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 {
+            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();
+
+            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,
+        };
+    },
+
+    /** 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);
+
+        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);
+            await response.complete('success');
+        } catch (error) {
+            const errorResponse = error?.response;
+            Salla.event.dispatch('payments::apple-pay.authorized.failed', errorResponse);
+            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
     },
@@ -2808,8 +3382,10 @@ if (typeof window !== 'undefined') {
 }
 
 //applePay doesn't allow iframes
-// SSR-safe: only initialize in browser
-if (typeof window !== 'undefined' && 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 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>
@@ -3024,16 +3600,12 @@ const SallaQuickBuy = class {
             currency: this.currency || salla.config.get('store.settings.buy_now.currency') || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
-            // Legacy BE 
-            supportedNetworks: this.isLegacyBuyNowBE()
-                ? salla.config.get('store.settings.buy_now.networks')
-                : ((Array.isArray(this.supportedNetworks) && this.supportedNetworks.length)
-                    ? this.supportedNetworks : salla.config.get('store.settings.buy_now.supportedNetworks')),
-            supportedCountries: this.isLegacyBuyNowBE()
-                ? salla.config.get('store.settings.buy_now.countries')
-                : ((Array.isArray(this.supportedCountries) && this.supportedCountries.length)
-                    ? this.supportedCountries : salla.config.get('store.settings.buy_now.supportedCountries')),
+            supportedNetworks: (Array.isArray(this.supportedNetworks) && this.supportedNetworks.length)
+                ? this.supportedNetworks : salla.config.get('store.settings.buy_now.supportedNetworks'),
+            supportedCountries: (Array.isArray(this.supportedCountries) && this.supportedCountries.length)
+                ? this.supportedCountries : salla.config.get('store.settings.buy_now.supportedCountries'),
             countryCode: salla.config.get('store.store_country') || 'SA',
+            merchantIdentifier: applePayMerchantId(),
             onStartedSession: this.handleApplePaySessionStarted,
             validateMerchant: {
                 url: this.validateHost ? `${this.validateHost}/checkout/applepay/validate` : salla.url.get('checkout/applepay/validate'),
@@ -3109,21 +3681,8 @@ const SallaQuickBuy = class {
         }
         return fields;
     }
-    /**
-     * TEMPORARY for BE Vip sync
-     */
-    isLegacyBuyNowBE() {
-        return salla?.config?.get?.('store.settings.buy_now.multi_currency') != null;
-    }
     /** Set Apple Pay amount + currency from a price payload, always keeping the pair in one currency. */
     applyBaseCurrencyPrice(data) {
-        // Legacy BE: amount only; currency is set once in runInit.
-        if (this.isLegacyBuyNowBE()) {
-            if (data?.price != null) {
-                this.amount = data.price;
-            }
-            return;
-        }
         const base = data?.base_currency_price;
         // Unified BE base pair (regular products): charge in base currency.
         if (base?.amount != null) {
@@ -3145,11 +3704,6 @@ const SallaQuickBuy = class {
         const isSallaGateway = salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? true;
         this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway;
         const runInit = async () => {
-            if (this.isLegacyBuyNowBE() && !this.currency && salla?.config?.get) {
-                // Legacy BE (pre-PR): currency from the multi_currency flag. The unified BE instead
-                // sources amount + currency from `base_currency_price` (see applyBaseCurrencyPrice).
-                this.currency = salla.config.get('store.settings.buy_now.multi_currency') ? salla.config.get('user.currency_code') : (salla.config.get('store.settings.buy_now.currency') || 'SAR');
-            }
             if (!this.productId && salla?.config?.get && salla.url?.is_page) {
                 this.productId = salla.config.get('page.id');
             }
@@ -3175,16 +3729,19 @@ const SallaQuickBuy = class {
             else if (salla?.url?.is_page?.('product.single') && salla?.product?.event?.onPriceUpdated) {
                 salla.product.event.onPriceUpdated(response => { this.applyBaseCurrencyPrice(response?.data); });
             }
-            this.isApplePayActive = (salla?.helpers?.hasApplePay?.() ?? canMakePayments)
-                && (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
+            const storeAllowsApplePay = (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
                 && (salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? isSallaGateway);
-            if (!document.getElementById('apple-pay-sdk') && this.isApplePayActive) {
-                const script = document.createElement('script');
-                script.src = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
-                script.setAttribute('id', 'apple-pay-sdk');
-                script.async = true;
-                document.body.appendChild(script);
-            }
+            // Preload Apple's JS SDK so the rendered <apple-pay-button> upgrades on
+            // every flow (native Safari + QR). Fire-and-forget: the element upgrades
+            // retroactively once the script defines it.
+            if (storeAllowsApplePay) {
+                ensureApplePaySdk();
+            }
+            // Cross-browser capability: native (Safari) OR the Payment Request API
+            // (non-Safari browsers / non-Apple devices via the QR-code fallback). The
+            // helper loads Apple's JS SDK and awaits it before probing, so this is a
+            // stable answer on first load (no race against the async script fetch).
+            this.isApplePayActive = storeAllowsApplePay && await canCompleteApplePay(this.currency);
         };
         return new Promise((resolve) => {
             if (typeof salla?.onReady === 'function') {
@@ -3196,7 +3753,7 @@ const SallaQuickBuy = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: 'c2ba63eb4fad49f80977d6f1adc836f655524933' }, this.quickBuyButton());
+        return index.h(index.Host, { key: '100f3cd501d568084f3596f5cef7c9b744f7ec82' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return index.h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });