@easypayment/medusa-paypal-ui 1.1.0 → 1.2.0

package/dist/order.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Provider ids registered by `@easypayment/medusa-payment-paypal`.
+ *
+ * Single source of truth — `PayPalPaymentSection`, `MedusaNextPayPalAdapter`,
+ * and the server-safe `order` entrypoint all re-export from here so the ids
+ * can never drift between entrypoints.
+ */
+declare const PAYPAL_WALLET_PROVIDER_ID: "pp_paypal_paypal";
+declare const PAYPAL_CARD_PROVIDER_ID: "pp_paypal_card_paypal_card";
+/** True when the provider id belongs to this PayPal plugin. */
+declare function isPayPalProviderId(providerId?: string | null): boolean;
+
 /**
  * Server-safe helpers for displaying PayPal payments on order / confirmation
  * pages.
@@ -23,8 +35,7 @@
  *   )}
  * </Text>
  */
-declare const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
-declare const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
+
 type PayPalPaymentInfo = {
     title: string;
 };
@@ -35,8 +46,6 @@ type PayPalConfigTitles = {
     paypal_title?: string | null;
     card_title?: string | null;
 };
-/** True when the provider id belongs to this PayPal plugin. */
-declare function isPayPalProviderId(providerId?: string | null): boolean;
 /**
  * Null-safe payment label resolver for order / confirmation pages.
  *

package/dist/order.mjs

@@ -1,13 +1,22 @@
-// src/order.ts
+// src/constants.ts
 var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
 var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
+var PAYPAL_PROVIDER_IDS = [
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID
+];
+function isPayPalProviderId(providerId) {
+  if (!providerId) return false;
+  return PAYPAL_PROVIDER_IDS.includes(
+    providerId
+  );
+}
+
+// src/order.ts
 var paypalPaymentInfoMap = {
   [PAYPAL_WALLET_PROVIDER_ID]: { title: "PayPal" },
   [PAYPAL_CARD_PROVIDER_ID]: { title: "Credit or Debit Card" }
 };
-function isPayPalProviderId(providerId) {
-  return providerId === PAYPAL_WALLET_PROVIDER_ID || providerId === PAYPAL_CARD_PROVIDER_ID;
-}
 function getPaymentLabel(providerId, fallback, titles) {
   if (!providerId) {
     return fallback ?? "";

package/dist/order.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/order.ts"],"sourcesContent":["/**\r\n * Server-safe helpers for displaying PayPal payments on order / confirmation\r\n * pages.\r\n *\r\n * This module is intentionally free of React and any client-only code, so it\r\n * can be imported from Next.js **server components** (e.g. the order\r\n * confirmation page) without pulling in the checkout UI.\r\n *\r\n * @example\r\n * import { getPaymentLabel, fetchPayPalConfig } from \"@easypayment/medusa-paypal-ui/order\"\r\n *\r\n * // In the (async) server component that renders the payment method:\r\n * const titles = await fetchPayPalConfig({\r\n *   baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,\r\n *   publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,\r\n * })\r\n *\r\n * <Text>\r\n *   {getPaymentLabel(\r\n *     payment.provider_id,\r\n *     paymentInfoMap[payment.provider_id]?.title,\r\n *     titles\r\n *   )}\r\n * </Text>\r\n */\r\n\r\nexport const PAYPAL_WALLET_PROVIDER_ID = \"pp_paypal_paypal\"\r\nexport const PAYPAL_CARD_PROVIDER_ID = \"pp_paypal_card_paypal_card\"\r\n\r\nexport type PayPalPaymentInfo = { title: string }\r\n\r\n/** Built-in fallback titles, used only when admin titles aren't supplied. */\r\nexport const paypalPaymentInfoMap: Record<string, PayPalPaymentInfo> = {\r\n  [PAYPAL_WALLET_PROVIDER_ID]: { title: \"PayPal\" },\r\n  [PAYPAL_CARD_PROVIDER_ID]: { title: \"Credit or Debit Card\" },\r\n}\r\n\r\n/** Admin-configured titles, as returned by `GET /store/paypal/config`. */\r\nexport type PayPalConfigTitles = {\r\n  paypal_title?: string | null\r\n  card_title?: string | null\r\n}\r\n\r\n/** True when the provider id belongs to this PayPal plugin. */\r\nexport function isPayPalProviderId(providerId?: string | null): boolean {\r\n  return (\r\n    providerId === PAYPAL_WALLET_PROVIDER_ID ||\r\n    providerId === PAYPAL_CARD_PROVIDER_ID\r\n  )\r\n}\r\n\r\n/**\r\n * Null-safe payment label resolver for order / confirmation pages.\r\n *\r\n * Precedence for the PayPal providers: **admin-configured title** (`titles`,\r\n * from {@link fetchPayPalConfig}) → built-in default. For any other provider:\r\n * `fallback` → raw id. Never throws on an unknown / missing provider, which is\r\n * what causes the common `Cannot read properties of undefined (reading 'title')`\r\n * crash on the order confirmation page.\r\n *\r\n * @param titles Admin titles so the order page shows the same labels configured\r\n *   in Medusa Admin → Settings → PayPal (e.g. a custom \"Credit or Debit Card\").\r\n */\r\nexport function getPaymentLabel(\r\n  providerId: string | undefined | null,\r\n  fallback?: string,\r\n  titles?: PayPalConfigTitles\r\n): string {\r\n  if (!providerId) {\r\n    return fallback ?? \"\"\r\n  }\r\n  if (providerId === PAYPAL_WALLET_PROVIDER_ID) {\r\n    return (\r\n      titles?.paypal_title?.trim() ||\r\n      paypalPaymentInfoMap[PAYPAL_WALLET_PROVIDER_ID].title\r\n    )\r\n  }\r\n  if (providerId === PAYPAL_CARD_PROVIDER_ID) {\r\n    return (\r\n      titles?.card_title?.trim() ||\r\n      paypalPaymentInfoMap[PAYPAL_CARD_PROVIDER_ID].title\r\n    )\r\n  }\r\n  return fallback ?? providerId\r\n}\r\n\r\n/**\r\n * Fetch the admin-configured PayPal titles from the storefront API\r\n * (`GET /store/paypal/config`). Server-safe (uses the global `fetch`).\r\n *\r\n * Returns `{}` on any error/network failure so callers can fall back to the\r\n * built-in defaults without their own try/catch.\r\n */\r\nexport async function fetchPayPalConfig(opts: {\r\n  baseUrl: string\r\n  publishableApiKey?: string\r\n  signal?: AbortSignal\r\n}): Promise<PayPalConfigTitles> {\r\n  const { baseUrl, publishableApiKey, signal } = opts\r\n  if (!baseUrl) {\r\n    return {}\r\n  }\r\n  try {\r\n    const timeoutMs = 30_000\r\n    let effectiveSignal = signal\r\n    let timeoutId: ReturnType<typeof setTimeout> | undefined\r\n    if (!signal) {\r\n      const controller = new AbortController()\r\n      timeoutId = setTimeout(() => controller.abort(), timeoutMs)\r\n      effectiveSignal = controller.signal\r\n    }\r\n    let res: Response\r\n    try {\r\n      res = await fetch(`${baseUrl.replace(/\\/$/, \"\")}/store/paypal/config`, {\r\n        headers: {\r\n          accept: \"application/json\",\r\n          ...(publishableApiKey ? { \"x-publishable-api-key\": publishableApiKey } : {}),\r\n        },\r\n        signal: effectiveSignal,\r\n      })\r\n    } finally {\r\n      if (timeoutId !== undefined) clearTimeout(timeoutId)\r\n    }\r\n    if (!res.ok) {\r\n      return {}\r\n    }\r\n    const cfg = (await res.json()) as Record<string, unknown>\r\n    return {\r\n      paypal_title:\r\n        typeof cfg.paypal_title === \"string\" ? cfg.paypal_title : undefined,\r\n      card_title:\r\n        typeof cfg.card_title === \"string\" ? cfg.card_title : undefined,\r\n    }\r\n  } catch {\r\n    return {}\r\n  }\r\n}\r\n"],"mappings":";AA0BO,IAAM,4BAA4B;AAClC,IAAM,0BAA0B;AAKhC,IAAM,uBAA0D;AAAA,EACrE,CAAC,yBAAyB,GAAG,EAAE,OAAO,SAAS;AAAA,EAC/C,CAAC,uBAAuB,GAAG,EAAE,OAAO,uBAAuB;AAC7D;AASO,SAAS,mBAAmB,YAAqC;AACtE,SACE,eAAe,6BACf,eAAe;AAEnB;AAcO,SAAS,gBACd,YACA,UACA,QACQ;AACR,MAAI,CAAC,YAAY;AACf,WAAO,YAAY;AAAA,EACrB;AACA,MAAI,eAAe,2BAA2B;AAC5C,WACE,QAAQ,cAAc,KAAK,KAC3B,qBAAqB,yBAAyB,EAAE;AAAA,EAEpD;AACA,MAAI,eAAe,yBAAyB;AAC1C,WACE,QAAQ,YAAY,KAAK,KACzB,qBAAqB,uBAAuB,EAAE;AAAA,EAElD;AACA,SAAO,YAAY;AACrB;AASA,eAAsB,kBAAkB,MAIR;AAC9B,QAAM,EAAE,SAAS,mBAAmB,OAAO,IAAI;AAC/C,MAAI,CAAC,SAAS;AACZ,WAAO,CAAC;AAAA,EACV;AACA,MAAI;AACF,UAAM,YAAY;AAClB,QAAI,kBAAkB;AACtB,QAAI;AACJ,QAAI,CAAC,QAAQ;AACX,YAAM,aAAa,IAAI,gBAAgB;AACvC,kBAAY,WAAW,MAAM,WAAW,MAAM,GAAG,SAAS;AAC1D,wBAAkB,WAAW;AAAA,IAC/B;AACA,QAAI;AACJ,QAAI;AACF,YAAM,MAAM,MAAM,GAAG,QAAQ,QAAQ,OAAO,EAAE,CAAC,wBAAwB;AAAA,QACrE,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,GAAI,oBAAoB,EAAE,yBAAyB,kBAAkB,IAAI,CAAC;AAAA,QAC5E;AAAA,QACA,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,UAAE;AACA,UAAI,cAAc,OAAW,cAAa,SAAS;AAAA,IACrD;AACA,QAAI,CAAC,IAAI,IAAI;AACX,aAAO,CAAC;AAAA,IACV;AACA,UAAM,MAAO,MAAM,IAAI,KAAK;AAC5B,WAAO;AAAA,MACL,cACE,OAAO,IAAI,iBAAiB,WAAW,IAAI,eAAe;AAAA,MAC5D,YACE,OAAO,IAAI,eAAe,WAAW,IAAI,aAAa;AAAA,IAC1D;AAAA,EACF,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;","names":[]}
+{"version":3,"sources":["../src/constants.ts","../src/order.ts"],"sourcesContent":["/**\n * Provider ids registered by `@easypayment/medusa-payment-paypal`.\n *\n * Single source of truth — `PayPalPaymentSection`, `MedusaNextPayPalAdapter`,\n * and the server-safe `order` entrypoint all re-export from here so the ids\n * can never drift between entrypoints.\n */\nexport const PAYPAL_WALLET_PROVIDER_ID = \"pp_paypal_paypal\" as const\nexport const PAYPAL_CARD_PROVIDER_ID = \"pp_paypal_card_paypal_card\" as const\n\nexport const PAYPAL_PROVIDER_IDS = [\n  PAYPAL_WALLET_PROVIDER_ID,\n  PAYPAL_CARD_PROVIDER_ID,\n] as const\n\n/** True when the provider id belongs to this PayPal plugin. */\nexport function isPayPalProviderId(providerId?: string | null): boolean {\n  if (!providerId) return false\n  return PAYPAL_PROVIDER_IDS.includes(\n    providerId as (typeof PAYPAL_PROVIDER_IDS)[number]\n  )\n}\n","/**\r\n * Server-safe helpers for displaying PayPal payments on order / confirmation\r\n * pages.\r\n *\r\n * This module is intentionally free of React and any client-only code, so it\r\n * can be imported from Next.js **server components** (e.g. the order\r\n * confirmation page) without pulling in the checkout UI.\r\n *\r\n * @example\r\n * import { getPaymentLabel, fetchPayPalConfig } from \"@easypayment/medusa-paypal-ui/order\"\r\n *\r\n * // In the (async) server component that renders the payment method:\r\n * const titles = await fetchPayPalConfig({\r\n *   baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,\r\n *   publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,\r\n * })\r\n *\r\n * <Text>\r\n *   {getPaymentLabel(\r\n *     payment.provider_id,\r\n *     paymentInfoMap[payment.provider_id]?.title,\r\n *     titles\r\n *   )}\r\n * </Text>\r\n */\r\n\r\nimport {\r\n  PAYPAL_WALLET_PROVIDER_ID,\r\n  PAYPAL_CARD_PROVIDER_ID,\r\n  isPayPalProviderId,\r\n} from \"./constants\"\r\n\r\nexport { PAYPAL_WALLET_PROVIDER_ID, PAYPAL_CARD_PROVIDER_ID, isPayPalProviderId }\r\n\r\nexport type PayPalPaymentInfo = { title: string }\r\n\r\n/** Built-in fallback titles, used only when admin titles aren't supplied. */\r\nexport const paypalPaymentInfoMap: Record<string, PayPalPaymentInfo> = {\r\n  [PAYPAL_WALLET_PROVIDER_ID]: { title: \"PayPal\" },\r\n  [PAYPAL_CARD_PROVIDER_ID]: { title: \"Credit or Debit Card\" },\r\n}\r\n\r\n/** Admin-configured titles, as returned by `GET /store/paypal/config`. */\r\nexport type PayPalConfigTitles = {\r\n  paypal_title?: string | null\r\n  card_title?: string | null\r\n}\r\n\r\n/**\r\n * Null-safe payment label resolver for order / confirmation pages.\r\n *\r\n * Precedence for the PayPal providers: **admin-configured title** (`titles`,\r\n * from {@link fetchPayPalConfig}) → built-in default. For any other provider:\r\n * `fallback` → raw id. Never throws on an unknown / missing provider, which is\r\n * what causes the common `Cannot read properties of undefined (reading 'title')`\r\n * crash on the order confirmation page.\r\n *\r\n * @param titles Admin titles so the order page shows the same labels configured\r\n *   in Medusa Admin → Settings → PayPal (e.g. a custom \"Credit or Debit Card\").\r\n */\r\nexport function getPaymentLabel(\r\n  providerId: string | undefined | null,\r\n  fallback?: string,\r\n  titles?: PayPalConfigTitles\r\n): string {\r\n  if (!providerId) {\r\n    return fallback ?? \"\"\r\n  }\r\n  if (providerId === PAYPAL_WALLET_PROVIDER_ID) {\r\n    return (\r\n      titles?.paypal_title?.trim() ||\r\n      paypalPaymentInfoMap[PAYPAL_WALLET_PROVIDER_ID].title\r\n    )\r\n  }\r\n  if (providerId === PAYPAL_CARD_PROVIDER_ID) {\r\n    return (\r\n      titles?.card_title?.trim() ||\r\n      paypalPaymentInfoMap[PAYPAL_CARD_PROVIDER_ID].title\r\n    )\r\n  }\r\n  return fallback ?? providerId\r\n}\r\n\r\n/**\r\n * Fetch the admin-configured PayPal titles from the storefront API\r\n * (`GET /store/paypal/config`). Server-safe (uses the global `fetch`).\r\n *\r\n * Returns `{}` on any error/network failure so callers can fall back to the\r\n * built-in defaults without their own try/catch.\r\n */\r\nexport async function fetchPayPalConfig(opts: {\r\n  baseUrl: string\r\n  publishableApiKey?: string\r\n  signal?: AbortSignal\r\n}): Promise<PayPalConfigTitles> {\r\n  const { baseUrl, publishableApiKey, signal } = opts\r\n  if (!baseUrl) {\r\n    return {}\r\n  }\r\n  try {\r\n    const timeoutMs = 30_000\r\n    let effectiveSignal = signal\r\n    let timeoutId: ReturnType<typeof setTimeout> | undefined\r\n    if (!signal) {\r\n      const controller = new AbortController()\r\n      timeoutId = setTimeout(() => controller.abort(), timeoutMs)\r\n      effectiveSignal = controller.signal\r\n    }\r\n    let res: Response\r\n    try {\r\n      res = await fetch(`${baseUrl.replace(/\\/$/, \"\")}/store/paypal/config`, {\r\n        headers: {\r\n          accept: \"application/json\",\r\n          ...(publishableApiKey ? { \"x-publishable-api-key\": publishableApiKey } : {}),\r\n        },\r\n        signal: effectiveSignal,\r\n      })\r\n    } finally {\r\n      if (timeoutId !== undefined) clearTimeout(timeoutId)\r\n    }\r\n    if (!res.ok) {\r\n      return {}\r\n    }\r\n    const cfg = (await res.json()) as Record<string, unknown>\r\n    return {\r\n      paypal_title:\r\n        typeof cfg.paypal_title === \"string\" ? cfg.paypal_title : undefined,\r\n      card_title:\r\n        typeof cfg.card_title === \"string\" ? cfg.card_title : undefined,\r\n    }\r\n  } catch {\r\n    return {}\r\n  }\r\n}\r\n"],"mappings":";AAOO,IAAM,4BAA4B;AAClC,IAAM,0BAA0B;AAEhC,IAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AACF;AAGO,SAAS,mBAAmB,YAAqC;AACtE,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,oBAAoB;AAAA,IACzB;AAAA,EACF;AACF;;;ACgBO,IAAM,uBAA0D;AAAA,EACrE,CAAC,yBAAyB,GAAG,EAAE,OAAO,SAAS;AAAA,EAC/C,CAAC,uBAAuB,GAAG,EAAE,OAAO,uBAAuB;AAC7D;AAoBO,SAAS,gBACd,YACA,UACA,QACQ;AACR,MAAI,CAAC,YAAY;AACf,WAAO,YAAY;AAAA,EACrB;AACA,MAAI,eAAe,2BAA2B;AAC5C,WACE,QAAQ,cAAc,KAAK,KAC3B,qBAAqB,yBAAyB,EAAE;AAAA,EAEpD;AACA,MAAI,eAAe,yBAAyB;AAC1C,WACE,QAAQ,YAAY,KAAK,KACzB,qBAAqB,uBAAuB,EAAE;AAAA,EAElD;AACA,SAAO,YAAY;AACrB;AASA,eAAsB,kBAAkB,MAIR;AAC9B,QAAM,EAAE,SAAS,mBAAmB,OAAO,IAAI;AAC/C,MAAI,CAAC,SAAS;AACZ,WAAO,CAAC;AAAA,EACV;AACA,MAAI;AACF,UAAM,YAAY;AAClB,QAAI,kBAAkB;AACtB,QAAI;AACJ,QAAI,CAAC,QAAQ;AACX,YAAM,aAAa,IAAI,gBAAgB;AACvC,kBAAY,WAAW,MAAM,WAAW,MAAM,GAAG,SAAS;AAC1D,wBAAkB,WAAW;AAAA,IAC/B;AACA,QAAI;AACJ,QAAI;AACF,YAAM,MAAM,MAAM,GAAG,QAAQ,QAAQ,OAAO,EAAE,CAAC,wBAAwB;AAAA,QACrE,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,GAAI,oBAAoB,EAAE,yBAAyB,kBAAkB,IAAI,CAAC;AAAA,QAC5E;AAAA,QACA,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,UAAE;AACA,UAAI,cAAc,OAAW,cAAa,SAAS;AAAA,IACrD;AACA,QAAI,CAAC,IAAI,IAAI;AACX,aAAO,CAAC;AAAA,IACV;AACA,UAAM,MAAO,MAAM,IAAI,KAAK;AAC5B,WAAO;AAAA,MACL,cACE,OAAO,IAAI,iBAAiB,WAAW,IAAI,eAAe;AAAA,MAC5D,YACE,OAAO,IAAI,eAAe,WAAW,IAAI,aAAa;AAAA,IAC1D;AAAA,EACF,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;","names":[]}

package/package.json

@@ -1,65 +1,76 @@
-{
-  "name": "@easypayment/medusa-paypal-ui",
-  "version": "1.1.0",
-  "description": "Enterprise Gold PayPal UI module for Medusa v2 storefront (Next.js)",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./order": {
-      "types": "./dist/order.d.ts",
-      "import": "./dist/order.mjs",
-      "require": "./dist/order.cjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "peerDependencies": {
-    "next": ">=14",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "next": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "@paypal/react-paypal-js": "^9.2.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "jsdom": "^24.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^2.0.5"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/easypaymentplugins/medusa-paypal-ui"
-  }
-}
+{
+  "name": "@easypayment/medusa-paypal-ui",
+  "version": "1.2.0",
+  "description": "Enterprise Gold PayPal UI module for Medusa v2 storefront (Next.js)",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./order": {
+      "import": {
+        "types": "./dist/order.d.ts",
+        "default": "./dist/order.mjs"
+      },
+      "require": {
+        "types": "./dist/order.d.cts",
+        "default": "./dist/order.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "next": ">=14",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@paypal/react-paypal-js": "^9.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^24.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.0.5"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/easypaymentplugins/medusa-paypal-ui"
+  }
+}

package/src/adapters/MedusaNextPayPalAdapter.tsx

@@ -5,11 +5,12 @@ import { PayPalCurrencyNotice } from "../components/PayPalCurrencyNotice"
 import { PayPalAdvancedCard } from "../components/PayPalAdvancedCard"
 import { PayPalProvider } from "../components/PayPalProvider"
 import { PayPalSmartButtons } from "../components/PayPalSmartButtons"
+import {
+  PAYPAL_WALLET_PROVIDER_ID as DEFAULT_PAYPAL_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID as DEFAULT_PAYPAL_CARD_PROVIDER_ID,
+} from "../constants"
 import { usePayPalConfig } from "../hooks/usePayPalConfig"
 
-const DEFAULT_PAYPAL_PROVIDER_ID = "pp_paypal_paypal"
-const DEFAULT_PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card"
-
 const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
 
 function PayPalLoadingCard() {
@@ -69,6 +70,30 @@ function PayPalErrorCard({ message }: { message: string }) {
   )
 }
 
+/**
+ * Shown when the merchant has disabled the selected PayPal method in admin
+ * settings. Rendering nothing here (the old behavior) left the buyer staring
+ * at blank space under a selected payment option.
+ */
+function PayPalUnavailableCard({ label }: { label: string }) {
+  return (
+    <div
+      role="status"
+      style={{
+        padding: "12px 16px",
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+        fontSize: 13,
+        color: "#6b7280",
+      }}
+    >
+      {label} is currently unavailable. Please choose a different payment
+      method.
+    </div>
+  )
+}
+
 export type MedusaNextPayPalAdapterProps = {
   cartId: string
   selectedProviderId: string | null | undefined
@@ -126,8 +151,12 @@ export function MedusaNextPayPalAdapter(props: MedusaNextPayPalAdapterProps) {
   if (!config) return null
 
   const isCardProvider = selectedProviderId === paypalCardProviderId
-  if (config.paypal_enabled === false && !isCardProvider) return null
-  if (isCardProvider && config.card_enabled === false) return null
+  if (config.paypal_enabled === false && !isCardProvider) {
+    return <PayPalUnavailableCard label={config.paypal_title || "PayPal"} />
+  }
+  if (isCardProvider && config.card_enabled === false) {
+    return <PayPalUnavailableCard label={config.card_title || "Card payment"} />
+  }
 
   const disableFunding = Array.isArray(config.disable_buttons)
     ? config.disable_buttons.join(",")

package/src/client/http.ts

@@ -1,6 +1,14 @@
 export type HttpOptions = {
   baseUrl: string
   publishableApiKey?: string
+  /**
+   * `credentials` mode for every request. Defaults to "include" (the
+   * historical behavior, required when the backend sits behind cookie-based
+   * gateways like Cloudflare Access). Set to "omit" or "same-origin" when the
+   * backend answers with `Access-Control-Allow-Origin: *` — browsers reject
+   * credentialed requests against a wildcard CORS origin outright.
+   */
+  credentials?: RequestCredentials
 }
 
 export type RequestOptions = {
@@ -35,6 +43,21 @@ function isRetryableError(err: unknown): boolean {
 
 const wait = (ms: number) => new Promise((r) => setTimeout(r, ms))
 
+/** Best-effort extraction of a `{ message: string }` payload from a response body. */
+function extractJsonMessage(text: string): string | null {
+  if (!text) return null
+  try {
+    const parsed = JSON.parse(text)
+    const message = parsed?.message
+    if (typeof message === "string" && message.trim()) {
+      return message.trim().slice(0, 500)
+    }
+  } catch {
+    // not JSON — caller falls back to the raw text
+  }
+  return null
+}
+
 function toHeaderRecord(headers?: RequestInit["headers"]): Record<string, string> {
   if (!headers) {
     return {}
@@ -65,41 +88,70 @@ export function createHttpClient(opts: HttpOptions) {
       headers["x-publishable-api-key"] = opts.publishableApiKey
     }
 
+    // Always arm the timeout — a caller-supplied signal composes with it
+    // rather than replacing it. Without this, hook-issued requests (which
+    // always pass an abort signal) could hang forever on a stalled
+    // connection. The timer also covers reading the body: a server that sends
+    // headers then stalls the response stream would otherwise hang the
+    // request indefinitely with the old header-only timeout.
     const timeoutMs = 30_000
-    let timeoutId: ReturnType<typeof setTimeout> | undefined
     const controller = new AbortController()
-    if (!init?.signal) {
-      timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+    const callerSignal = init?.signal ?? null
+    const onCallerAbort = () => controller.abort()
+    if (callerSignal) {
+      if (callerSignal.aborted) controller.abort()
+      else callerSignal.addEventListener("abort", onCallerAbort)
     }
-    const effectiveSignal = init?.signal || controller.signal
     let res: Response
+    let text: string
     try {
-      res = await fetch(url, { ...init, headers, credentials: "include", signal: effectiveSignal })
+      res = await fetch(url, {
+        ...init,
+        headers,
+        credentials: opts.credentials ?? "include",
+        signal: controller.signal,
+      })
+      text = await res.text().catch(() => "")
     } catch (err) {
-      if (err instanceof Error && err.name === "AbortError" && !init?.signal) {
+      if (
+        err instanceof Error &&
+        err.name === "AbortError" &&
+        !(callerSignal && callerSignal.aborted)
+      ) {
         throw new Error(`[PayPal] Request to ${path} timed out after ${timeoutMs / 1000}s`)
       }
       throw err
     } finally {
-      if (timeoutId !== undefined) clearTimeout(timeoutId)
+      clearTimeout(timeoutId)
+      if (callerSignal) callerSignal.removeEventListener("abort", onCallerAbort)
     }
-    const text = await res.text().catch(() => "")
 
     if (!res.ok) {
+      // Backend routes return structured JSON errors ({ message }) written for
+      // the buyer (e.g. unsupported currency, rate-limit, "payment processed
+      // but order not finalized"). Prefer that message over raw response text
+      // or a generic hint so the user sees something actionable instead of a
+      // JSON blob.
+      const parsedMessage = extractJsonMessage(text)
       if (res.status === 401) {
         throw new HttpError(
-          "[PayPal] Unauthorized (401) — check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY",
+          parsedMessage ||
+            "[PayPal] Unauthorized (401) — check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY",
           401
         )
       }
       if (res.status === 403) {
         throw new HttpError(
-          "[PayPal] Forbidden (403) — this request is not allowed. Check your CORS and API key settings.",
+          parsedMessage ||
+            "[PayPal] Forbidden (403) — this request is not allowed. Check your CORS and API key settings.",
           403
         )
       }
       throw new HttpError(
-        text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`,
+        parsedMessage ||
+          text.slice(0, 500).replace(/<[^>]*>/g, "") ||
+          `Request failed (${res.status})`,
         res.status
       )
     }

package/src/client/paypal.ts

@@ -1,6 +1,26 @@
 import type { PayPalConfig, PayPalSettingsResponse } from "./types"
 import { createHttpClient, type HttpOptions } from "./http"
 
+/**
+ * Fresh idempotency key per create-order ATTEMPT (i.e. per buyer click).
+ *
+ * The backend derives the PayPal-Request-Id from this header. It must be
+ * unique per attempt: PayPal replays the cached response for a reused request
+ * id, so a key stable across cart changes would hand back the ORIGINAL order —
+ * at the original total — after the buyer edits the cart, charging a stale
+ * amount. Reuse/dedup of an unchanged order is handled server-side by the
+ * stored-order staleness check, not by this key.
+ */
+export function generateIdempotencyKey(): string {
+  try {
+    const c = (globalThis as { crypto?: Crypto }).crypto
+    if (c?.randomUUID) return c.randomUUID()
+  } catch {
+    // fall through
+  }
+  return `pp-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`
+}
+
 export async function markPaymentComplete(
   baseUrl: string,
   cartId: string,
@@ -38,7 +58,13 @@ export function createPayPalStoreApi(opts: HttpOptions) {
     createOrder(cartId: string, isCardPayment = false) {
       return http.request<{ id: string }>(`/store/paypal/create-order`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          // One key per attempt — see generateIdempotencyKey. Deliberately NOT
+          // sent for capture-order: there the server's deterministic
+          // per-order-id fallback is the correct idempotency scope.
+          "Idempotency-Key": generateIdempotencyKey(),
+        },
         body: JSON.stringify({ cart_id: cartId, is_card_payment: isCardPayment }),
       })
     },

package/src/client/types.ts

@@ -21,6 +21,16 @@ export type PayPalConfig = {
 }
 
 export type PayPalSettingsResponse = {
+  /**
+   * What `GET /store/paypal/settings` actually returns: the configured
+   * payment action and whether advanced card fields are enabled.
+   */
+  paymentAction?: "capture" | "authorize"
+  advancedCardEnabled?: boolean
+  /**
+   * @deprecated The settings endpoint has never returned a `data` envelope —
+   * kept only so existing (already-null-safe) consumer code keeps compiling.
+   */
   data?: {
     api_details?: { currency_code?: string }
     paypal_settings?: Record<string, unknown>