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

package/deploy.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://cdn.assets.salla.network/json-schemas/deploy.json",
+  "type": "package",
+  "publish": {
+    "npm": true,
+    "cdn": false
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/applepay",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0",
   "description": "Salla Apple Pay light",
   "main": "dist/app.js",
   "scripts": {
@@ -24,7 +24,7 @@
   "license": "UNLICENSED",
   "homepage": "https://github.com/SallaApp/twilight#readme",
   "dependencies": {
-    "axios": "^0.23.0"
+    "axios": "^1.10.0"
   },
-  "gitHead": "741e5aadebda0f980c7c3ed2e9a85036e50d154c"
+  "gitHead": "43f7a57e278a226a3e1f77924f9da8f10c7e49ba"
 }

package/src/DetectOS.js

@@ -1,75 +1,84 @@
 export default {
-    options: [],
-    header: [navigator.platform, navigator.userAgent, navigator.appVersion, navigator.vendor, window.opera],
-    dataos: [
-        {name: 'Windows Phone', value: 'Windows Phone', version: 'OS'},
-        {name: 'Windows', value: 'Win', version: 'NT'},
-        {name: 'iPhone', value: 'iPhone', version: 'OS'},
-        {name: 'iPad', value: 'iPad', version: 'OS'},
-        {name: 'Kindle', value: 'Silk', version: 'Silk'},
-        {name: 'Android', value: 'Android', version: 'Android'},
-        {name: 'PlayBook', value: 'PlayBook', version: 'OS'},
-        {name: 'BlackBerry', value: 'BlackBerry', version: '/'},
-        {name: 'Macintosh', value: 'Mac', version: 'OS X'},
-        {name: 'Linux', value: 'Linux', version: 'rv'},
-        {name: 'Palm', value: 'Palm', version: 'PalmOS'}
-    ],
-    databrowser: [
-        {name: 'Chrome', value: 'Chrome', version: 'Chrome'},
-        {name: 'Firefox', value: 'Firefox', version: 'Firefox'},
-        {name: 'Safari', value: 'Safari', version: 'Version'},
-        {name: 'Internet Explorer', value: 'MSIE', version: 'MSIE'},
-        {name: 'Opera', value: 'Opera', version: 'Opera'},
-        {name: 'BlackBerry', value: 'CLDC', version: 'CLDC'},
-        {name: 'Mozilla', value: 'Mozilla', version: 'Mozilla'}
-    ],
-    init: function () {
-        var agent = this.header.join(' '),
-            os = this.matchItem(agent, this.dataos),
-            browser = this.matchItem(agent, this.databrowser);
+  options: [],
+  header:
+    typeof navigator !== "undefined" && typeof window !== "undefined"
+      ? [
+          navigator.platform,
+          navigator.userAgent,
+          navigator.appVersion,
+          navigator.vendor,
+          window.opera,
+        ]
+      : [],
+  dataos: [
+    { name: "Windows Phone", value: "Windows Phone", version: "OS" },
+    { name: "Windows", value: "Win", version: "NT" },
+    { name: "iPhone", value: "iPhone", version: "OS" },
+    { name: "iPad", value: "iPad", version: "OS" },
+    { name: "Kindle", value: "Silk", version: "Silk" },
+    { name: "Android", value: "Android", version: "Android" },
+    { name: "PlayBook", value: "PlayBook", version: "OS" },
+    { name: "BlackBerry", value: "BlackBerry", version: "/" },
+    { name: "Macintosh", value: "Mac", version: "OS X" },
+    { name: "Linux", value: "Linux", version: "rv" },
+    { name: "Palm", value: "Palm", version: "PalmOS" },
+  ],
+  databrowser: [
+    { name: "Chrome", value: "Chrome", version: "Chrome" },
+    { name: "Firefox", value: "Firefox", version: "Firefox" },
+    { name: "Safari", value: "Safari", version: "Version" },
+    { name: "Internet Explorer", value: "MSIE", version: "MSIE" },
+    { name: "Opera", value: "Opera", version: "Opera" },
+    { name: "BlackBerry", value: "CLDC", version: "CLDC" },
+    { name: "Mozilla", value: "Mozilla", version: "Mozilla" },
+  ],
+  init: function () {
+    var agent = this.header.join(" "),
+      os = this.matchItem(agent, this.dataos),
+      browser = this.matchItem(agent, this.databrowser);
 
-        return {os: os, browser: browser};
-    },
-    matchItem: function (string, data) {
-        var i = 0,
-            j = 0,
-            html = '',
-            regex,
-            regexv,
-            match,
-            matches,
-            version;
+    return { os: os, browser: browser };
+  },
+  matchItem: function (string, data) {
+    var i = 0,
+      j = 0,
+      html = "",
+      regex,
+      regexv,
+      match,
+      matches,
+      version;
 
-        for (i = 0; i < data.length; i += 1) {
-            regex = new RegExp(data[i].value, 'i');
-            match = regex.test(string);
-            if (match) {
-                regexv = new RegExp(data[i].version + '[- /:;]([\\d._]+)', 'i');
-                matches = string.match(regexv);
-                version = '';
-                if (matches) {
-                    if (matches[1]) {
-                        matches = matches[1];
-                    }
-                }
-                if (matches) {
-                    matches = matches.split(/[._]+/);
-                    for (j = 0; j < matches.length; j += 1) {
-                        if (j === 0) {
-                            version += matches[j] + '.';
-                        } else {
-                            version += matches[j];
-                        }
-                    }
-                } else {
-                    version = '0';
-                }
-                return {
-                    name: data[i].name,
-                    version: parseFloat(version)
-                };
+    for (i = 0; i < data.length; i += 1) {
+      regex = new RegExp(data[i].value, "i");
+      match = regex.test(string);
+      if (match) {
+        regexv = new RegExp(data[i].version + "[- /:;]([\\d._]+)", "i");
+        matches = string.match(regexv);
+        version = "";
+        if (matches) {
+          if (matches[1]) {
+            matches = matches[1];
+          }
+        }
+        if (matches) {
+          matches = matches.split(/[._]+/);
+          for (j = 0; j < matches.length; j += 1) {
+            if (j === 0) {
+              version += matches[j] + ".";
+            } else {
+              version += matches[j];
             }
+          }
+        } else {
+          version = "0";
         }
-        return {name: 'unknown', version: 0};
+        return {
+          name: data[i].name,
+          version: parseFloat(version),
+        };
+      }
     }
+    return { name: "unknown", version: 0 };
+  },
 };

package/src/apple-pay-support.d.ts

@@ -0,0 +1,24 @@
+export declare const APPLE_PAY_METHOD: string;
+
+export declare function applePayMerchantId(): string | null;
+
+export declare function buildApplePayMethodData(opts: {
+  version: number;
+  merchantIdentifier: string;
+  supportedNetworks: string[];
+  countryCode: string;
+}): PaymentMethodData[];
+
+export declare function isApplePayHostedRedirect(): boolean;
+
+export declare function ensureApplePaySdk(): Promise<void>;
+
+export declare function normalizeApplePayNetworks(raw: string[] | Record<string, string> | null | undefined): string[];
+
+export declare function applePayNetworks(): string[];
+
+export declare function resolveApplePayNetworks(
+  networks: string[] | Record<string, string> | null | undefined,
+): string[];
+
+export declare function canCompleteApplePay(currency?: string, networks?: string[] | null): Promise<boolean>;

package/src/apple-pay-support.js

@@ -0,0 +1,187 @@
+/**
+ * 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.
+ */
+
+export const APPLE_PAY_METHOD = '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}
+ */
+export function applePayMerchantId() {
+  return salla?.config?.get?.('store.settings.buy_now.merchant_identifier') || null;
+}
+
+/**
+ * Whether the store's Apple Pay is a hosted redirect rather than a native sheet.
+ *
+ * MyFatoorah Apple Pay without S2S has no native flow: the checkout page hands off as a
+ * credit_card redirect to MyFatoorah's hosted page. The buy-now surfaces (PDP, sticky bar)
+ * have no redirect path, so they must not offer an Apple Pay button at all.
+ *
+ * The backend publishes this as a single boolean (`ApplePayFeature::isHostedRedirect`).
+ * Compared with `=== true` on purpose: against a backend that predates the field the key is
+ * absent, so this returns false and every surface keeps its current behaviour. That is what
+ * makes the storefront half safe to ship independently of the backend half.
+ * @returns {boolean}
+ */
+export function isApplePayHostedRedirect() {
+  return salla?.config?.get?.('store.settings.buy_now.hostedRedirect') === true;
+}
+
+/**
+ * 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[]}
+ */
+export function buildApplePayMethodData({ version, merchantIdentifier, supportedNetworks, countryCode }) {
+  return [{
+    supportedMethods: APPLE_PAY_METHOD,
+    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>}
+ */
+export 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;
+}
+
+/**
+ * Coerce a networks payload into an array. PHP serializes the list as an object when the
+ * array keys are non-sequential, so both shapes arrive.
+ *
+ * @param {string[]|Object|null|undefined} raw
+ * @returns {string[]}
+ */
+export function normalizeApplePayNetworks(raw) {
+  if (Array.isArray(raw)) return [...raw];
+  if (raw && typeof raw === 'object') return Object.values(raw);
+
+  return [];
+}
+
+/**
+ * The store's buy-now networks from config.
+ *
+ * @returns {string[]}
+ */
+export function applePayNetworks() {
+  return normalizeApplePayNetworks(
+    salla?.config?.get?.('store.settings.buy_now.supportedNetworks')
+      || salla?.config?.get?.('store.settings.buy_now.networks'),
+  );
+}
+
+/**
+ * The networks for this attempt. `null`/`undefined` means "not supplied" and defers to config;
+ * an array — empty included — is the backend's answer and is used as-is.
+ *
+ * @param {string[]|Object|null|undefined} networks
+ * @returns {string[]}
+ */
+export function resolveApplePayNetworks(networks) {
+  return networks == null ? applePayNetworks() : normalizeApplePayNetworks(networks);
+}
+
+/**
+ * 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]
+ * @param {string[]} [networks] The backend's list; null/undefined defers to the buy-now config.
+ * @returns {Promise<boolean>}
+ */
+export async function canCompleteApplePay(currency = 'SAR', networks = null) {
+  const supportedNetworks = resolveApplePayNetworks(networks);
+
+  // Nothing to charge with — checked before the native probe, which would report "available"
+  // and only fail after the shopper taps pay.
+  if (!supportedNetworks.length) return false;
+
+  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,
+        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;
+  }
+}

package/src/http.js

@@ -1,7 +1,12 @@
 import axios from 'axios'
 
+function setBaseCurrencyHeader() {
+    axios.defaults.headers.common.currency = salla?.config?.get?.('user.currency_code');
+}
+
 export default {
     request(method, url, data, successCb = null, errorCb = null) {
+        setBaseCurrencyHeader();
         return axios
             .request({url, data, method: method.toLowerCase(), responseType: 'json'})
             .then(successCb)
@@ -10,6 +15,7 @@ export default {
 
     get(url, successCb = null, errorCb = null, data) {
         // return this.request('get', url, data, successCb, errorCb);
+        setBaseCurrencyHeader();
         return axios
             .get(url, {params: data})
             .then(successCb)
@@ -41,10 +47,12 @@ export default {
             /**
              * @deprecated to support legacy themes
              */
+            setBaseCurrencyHeader();
             $.ajax({
                 url: url,
                 method: method.toUpperCase(),
                 data: payload,
+                headers: { currency: axios.defaults.headers.common.currency },
                 async: false,
                 success: function ({data}) {
                     return resolve(data);