@easypayment/medusa-paypal-ui 1.0.39 → 1.0.41

package/dist/index.d.cts

@@ -47,13 +47,13 @@ declare function createPayPalStoreApi(opts: HttpOptions): {
     captureOrder(cartId: string, orderId: string): Promise<Record<string, unknown>>;
 };
 
-type Args = {
+type Args$1 = {
     baseUrl: string;
     publishableApiKey?: string;
     cartId?: string;
     enabled?: boolean;
 };
-declare function usePayPalConfig({ baseUrl, publishableApiKey, cartId, enabled, }: Args): {
+declare function usePayPalConfig({ baseUrl, publishableApiKey, cartId, enabled, }: Args$1): {
     config: PayPalConfig | null;
     loading: boolean;
     error: string | null;
@@ -111,4 +111,71 @@ type MedusaNextPayPalAdapterProps = {
 };
 declare function MedusaNextPayPalAdapter(props: MedusaNextPayPalAdapterProps): react_jsx_runtime.JSX.Element | null;
 
-export { MedusaNextPayPalAdapter, type MedusaNextPayPalAdapterProps, PayPalAdvancedCard, type PayPalConfig, PayPalCurrencyNotice, PayPalProvider, type PayPalSettingsResponse, PayPalSmartButtons, createPayPalStoreApi, usePayPalConfig };
+declare const PAYPAL_WALLET_PROVIDER_ID: "pp_paypal_paypal";
+declare const PAYPAL_CARD_PROVIDER_ID: "pp_paypal_card_paypal_card";
+/**
+ * Returns true when the given provider ID is a PayPal provider.
+ * Use this to disable the storefront's "Continue to review" button.
+ *
+ * @example
+ * disabled={isPayPalProviderId(selectedPaymentMethod)}
+ */
+declare function isPayPalProviderId(id?: string | null): boolean;
+type PayPalPaymentSectionProps = {
+    cartId: string;
+    selectedProviderId: string | null | undefined;
+    baseUrl: string;
+    publishableApiKey?: string;
+    /**
+     * Whether a PayPal session is currently being initiated by the storefront
+     * (i.e. the `initiatePaymentSession()` call is in-flight).
+     * When true, the component shows a "Setting up payment…" spinner instead
+     * of the PayPal buttons.
+     *
+     * @example
+     * const [paypalLoading, setPaypalLoading] = useState(false)
+     *
+     * const setPaymentMethod = async (method: string) => {
+     *   if (isPayPalProviderId(method)) setPaypalLoading(true)
+     *   try { await initiatePaymentSession(cart, { provider_id: method }) }
+     *   finally { setPaypalLoading(false) }
+     * }
+     *
+     * <PayPalPaymentSection sessionLoading={paypalLoading} ... />
+     */
+    sessionLoading?: boolean;
+    /**
+     * Called after PayPal capture succeeds.
+     * You must call placeOrder(cartId) here so the Next.js server action
+     * can clear the httpOnly cart cookie.
+     */
+    onSuccess?: (cartId: string) => void;
+    onError?: (message: string) => void;
+    /** @deprecated use onSuccess */
+    onPaid?: (result: unknown) => void;
+};
+/**
+ * Drop-in PayPal payment section for Medusa storefronts.
+ *
+ * Renders nothing when a non-PayPal provider is selected.
+ * Shows a spinner while config is loading or the session is being created.
+ * Automatically picks Smart Buttons vs Advanced Card based on selectedProviderId.
+ */
+declare function PayPalPaymentSection({ cartId, selectedProviderId, baseUrl, publishableApiKey, sessionLoading, onSuccess, onError, onPaid, }: PayPalPaymentSectionProps): react_jsx_runtime.JSX.Element | null;
+
+type Args = {
+    baseUrl: string;
+    publishableApiKey?: string;
+    cartId?: string;
+    enabled?: boolean;
+};
+type Result = {
+    paypalEnabled: boolean;
+    paypalTitle: string;
+    cardEnabled: boolean;
+    cardTitle: string;
+    loading: boolean;
+};
+declare function usePayPalPaymentMethods({ baseUrl, publishableApiKey, cartId, enabled, }: Args): Result;
+
+export { MedusaNextPayPalAdapter, type MedusaNextPayPalAdapterProps, PAYPAL_CARD_PROVIDER_ID, PAYPAL_WALLET_PROVIDER_ID, PayPalAdvancedCard, type PayPalConfig, PayPalCurrencyNotice, PayPalPaymentSection, type PayPalPaymentSectionProps, PayPalProvider, type PayPalSettingsResponse, PayPalSmartButtons, createPayPalStoreApi, isPayPalProviderId, usePayPalConfig, usePayPalPaymentMethods };

package/dist/index.d.ts

@@ -47,13 +47,13 @@ declare function createPayPalStoreApi(opts: HttpOptions): {
     captureOrder(cartId: string, orderId: string): Promise<Record<string, unknown>>;
 };
 
-type Args = {
+type Args$1 = {
     baseUrl: string;
     publishableApiKey?: string;
     cartId?: string;
     enabled?: boolean;
 };
-declare function usePayPalConfig({ baseUrl, publishableApiKey, cartId, enabled, }: Args): {
+declare function usePayPalConfig({ baseUrl, publishableApiKey, cartId, enabled, }: Args$1): {
     config: PayPalConfig | null;
     loading: boolean;
     error: string | null;
@@ -111,4 +111,71 @@ type MedusaNextPayPalAdapterProps = {
 };
 declare function MedusaNextPayPalAdapter(props: MedusaNextPayPalAdapterProps): react_jsx_runtime.JSX.Element | null;
 
-export { MedusaNextPayPalAdapter, type MedusaNextPayPalAdapterProps, PayPalAdvancedCard, type PayPalConfig, PayPalCurrencyNotice, PayPalProvider, type PayPalSettingsResponse, PayPalSmartButtons, createPayPalStoreApi, usePayPalConfig };
+declare const PAYPAL_WALLET_PROVIDER_ID: "pp_paypal_paypal";
+declare const PAYPAL_CARD_PROVIDER_ID: "pp_paypal_card_paypal_card";
+/**
+ * Returns true when the given provider ID is a PayPal provider.
+ * Use this to disable the storefront's "Continue to review" button.
+ *
+ * @example
+ * disabled={isPayPalProviderId(selectedPaymentMethod)}
+ */
+declare function isPayPalProviderId(id?: string | null): boolean;
+type PayPalPaymentSectionProps = {
+    cartId: string;
+    selectedProviderId: string | null | undefined;
+    baseUrl: string;
+    publishableApiKey?: string;
+    /**
+     * Whether a PayPal session is currently being initiated by the storefront
+     * (i.e. the `initiatePaymentSession()` call is in-flight).
+     * When true, the component shows a "Setting up payment…" spinner instead
+     * of the PayPal buttons.
+     *
+     * @example
+     * const [paypalLoading, setPaypalLoading] = useState(false)
+     *
+     * const setPaymentMethod = async (method: string) => {
+     *   if (isPayPalProviderId(method)) setPaypalLoading(true)
+     *   try { await initiatePaymentSession(cart, { provider_id: method }) }
+     *   finally { setPaypalLoading(false) }
+     * }
+     *
+     * <PayPalPaymentSection sessionLoading={paypalLoading} ... />
+     */
+    sessionLoading?: boolean;
+    /**
+     * Called after PayPal capture succeeds.
+     * You must call placeOrder(cartId) here so the Next.js server action
+     * can clear the httpOnly cart cookie.
+     */
+    onSuccess?: (cartId: string) => void;
+    onError?: (message: string) => void;
+    /** @deprecated use onSuccess */
+    onPaid?: (result: unknown) => void;
+};
+/**
+ * Drop-in PayPal payment section for Medusa storefronts.
+ *
+ * Renders nothing when a non-PayPal provider is selected.
+ * Shows a spinner while config is loading or the session is being created.
+ * Automatically picks Smart Buttons vs Advanced Card based on selectedProviderId.
+ */
+declare function PayPalPaymentSection({ cartId, selectedProviderId, baseUrl, publishableApiKey, sessionLoading, onSuccess, onError, onPaid, }: PayPalPaymentSectionProps): react_jsx_runtime.JSX.Element | null;
+
+type Args = {
+    baseUrl: string;
+    publishableApiKey?: string;
+    cartId?: string;
+    enabled?: boolean;
+};
+type Result = {
+    paypalEnabled: boolean;
+    paypalTitle: string;
+    cardEnabled: boolean;
+    cardTitle: string;
+    loading: boolean;
+};
+declare function usePayPalPaymentMethods({ baseUrl, publishableApiKey, cartId, enabled, }: Args): Result;
+
+export { MedusaNextPayPalAdapter, type MedusaNextPayPalAdapterProps, PAYPAL_CARD_PROVIDER_ID, PAYPAL_WALLET_PROVIDER_ID, PayPalAdvancedCard, type PayPalConfig, PayPalCurrencyNotice, PayPalPaymentSection, type PayPalPaymentSectionProps, PayPalProvider, type PayPalSettingsResponse, PayPalSmartButtons, createPayPalStoreApi, isPayPalProviderId, usePayPalConfig, usePayPalPaymentMethods };

package/dist/index.mjs

@@ -775,6 +775,251 @@ function MedusaNextPayPalAdapter(props) {
     )
   ] }, selectedProviderId);
 }
+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(id) {
+  if (!id) return false;
+  return PAYPAL_PROVIDER_IDS.includes(id);
+}
+var SPIN_STYLE4 = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`;
+function SessionInitCard() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "14px 16px",
+        marginTop: 8,
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: SPIN_STYLE4 }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              animation: "_pp_section_spin .7s linear infinite",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Setting up payment\u2026" })
+      ]
+    }
+  );
+}
+function ConfigLoadingCard() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "14px 16px",
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: SPIN_STYLE4 }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 22,
+              height: 22,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              animation: "_pp_section_spin .7s linear infinite",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
+        ] })
+      ]
+    }
+  );
+}
+function ErrorCard({ message }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        padding: "12px 16px",
+        background: "#fef2f2",
+        border: "1px solid #fecaca",
+        borderRadius: 10,
+        fontSize: 13,
+        color: "#b91c1c"
+      },
+      children: message
+    }
+  );
+}
+function PayPalPaymentSection({
+  cartId,
+  selectedProviderId,
+  baseUrl,
+  publishableApiKey,
+  sessionLoading = false,
+  onSuccess,
+  onError,
+  onPaid
+}) {
+  const shouldRender = isPayPalProviderId(selectedProviderId);
+  const { config, loading, error } = usePayPalConfig({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    enabled: shouldRender
+  });
+  const handlePaid = useCallback(
+    (captureResult) => {
+      onPaid?.(captureResult);
+      onSuccess?.(cartId);
+    },
+    [cartId, onPaid, onSuccess]
+  );
+  if (!shouldRender) return null;
+  if (sessionLoading) return /* @__PURE__ */ jsx(SessionInitCard, {});
+  if (loading) return /* @__PURE__ */ jsx(ConfigLoadingCard, {});
+  if (error) return /* @__PURE__ */ jsx(ErrorCard, { message: error });
+  if (!config) return null;
+  if (config.paypal_enabled === false && selectedProviderId === PAYPAL_WALLET_PROVIDER_ID) {
+    return null;
+  }
+  const isCardProvider = selectedProviderId === PAYPAL_CARD_PROVIDER_ID;
+  if (isCardProvider && config.card_enabled === false) return null;
+  const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ jsx(PayPalCurrencyNotice, { config }),
+    /* @__PURE__ */ jsx(
+      PayPalProvider,
+      {
+        config,
+        intent: config.intent === "authorize" ? "authorize" : "capture",
+        disableFunding,
+        children: isCardProvider ? /* @__PURE__ */ jsx(
+          PayPalAdvancedCard,
+          {
+            baseUrl,
+            publishableApiKey,
+            cartId,
+            config,
+            onPaid: handlePaid,
+            onError
+          }
+        ) : /* @__PURE__ */ jsx(
+          PayPalSmartButtons,
+          {
+            baseUrl,
+            publishableApiKey,
+            cartId,
+            config,
+            onPaid: handlePaid,
+            onError
+          }
+        )
+      }
+    )
+  ] }, selectedProviderId);
+}
+var _cache2 = /* @__PURE__ */ new Map();
+var CACHE_TTL2 = 5 * 60 * 1e3;
+function cacheKey2(baseUrl, cartId) {
+  return `ppm::${baseUrl}::${cartId ?? ""}`;
+}
+var DEFAULT_RESULT = {
+  paypalEnabled: true,
+  paypalTitle: "PayPal",
+  cardEnabled: true,
+  cardTitle: "Credit or Debit Card",
+  loading: false
+};
+function usePayPalPaymentMethods({
+  baseUrl,
+  publishableApiKey,
+  cartId,
+  enabled = true
+}) {
+  const api = useMemo(
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
+    [baseUrl, publishableApiKey]
+  );
+  const key = cacheKey2(baseUrl, cartId);
+  const hit = _cache2.get(key);
+  const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
+  const [result, setResult] = useState(seed ?? { ...DEFAULT_RESULT, loading: enabled });
+  const fetchIdRef = useRef(0);
+  useEffect(() => {
+    if (!enabled) {
+      setResult((prev) => ({ ...prev, loading: false }));
+      return;
+    }
+    const k = cacheKey2(baseUrl, cartId);
+    const cached = _cache2.get(k);
+    if (cached && Date.now() - cached.at < CACHE_TTL2) {
+      setResult(cached.result);
+      return;
+    }
+    const id = ++fetchIdRef.current;
+    let mounted = true;
+    const controller = new AbortController();
+    setResult((prev) => ({ ...prev, loading: true }));
+    (async () => {
+      try {
+        const cfg = await api.getConfig(cartId, controller.signal);
+        if (!mounted || id !== fetchIdRef.current) return;
+        const next = {
+          paypalEnabled: cfg.paypal_enabled !== false,
+          paypalTitle: typeof cfg.paypal_title === "string" && cfg.paypal_title ? cfg.paypal_title : "PayPal",
+          cardEnabled: cfg.card_enabled !== false,
+          cardTitle: typeof cfg.card_title === "string" && cfg.card_title ? cfg.card_title : "Credit or Debit Card",
+          loading: false
+        };
+        _cache2.set(k, { result: next, at: Date.now() });
+        setResult(next);
+      } catch (e) {
+        if (e?.name === "AbortError") return;
+        if (!mounted || id !== fetchIdRef.current) return;
+        if (e?.message?.includes("403") || e?.message?.includes("Forbidden")) {
+          const disabled = {
+            ...DEFAULT_RESULT,
+            paypalEnabled: false,
+            cardEnabled: false,
+            loading: false
+          };
+          setResult(disabled);
+          return;
+        }
+        setResult({ ...DEFAULT_RESULT, loading: false });
+      }
+    })();
+    return () => {
+      mounted = false;
+      controller.abort();
+    };
+  }, [api, baseUrl, cartId, enabled]);
+  return result;
+}
 
-export { MedusaNextPayPalAdapter, PayPalAdvancedCard, PayPalCurrencyNotice, PayPalProvider, PayPalSmartButtons, createPayPalStoreApi, usePayPalConfig };
+export { MedusaNextPayPalAdapter, PAYPAL_CARD_PROVIDER_ID, PAYPAL_WALLET_PROVIDER_ID, PayPalAdvancedCard, PayPalCurrencyNotice, PayPalPaymentSection, PayPalProvider, PayPalSmartButtons, createPayPalStoreApi, isPayPalProviderId, usePayPalConfig, usePayPalPaymentMethods };
 //# sourceMappingURL=index.mjs.map