@easypayment/medusa-paypal-ui 1.0.49 → 1.0.51

package/src/components/PayPalSmartButtons.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useMemo, useState } from "react"
-import { PayPalButtons } from "@paypal/react-paypal-js"
+import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js"
 import { createPayPalStoreApi, markPaymentComplete } from "../client/paypal"
 import type { PayPalConfig } from "../client/types"
 
@@ -29,6 +29,7 @@ export function PayPalSmartButtons(props: {
 
   const [error, setError] = useState<string | null>(null)
   const [processing, setProcessing] = useState(false)
+  const [{ isPending, isResolved }] = usePayPalScriptReducer()
 
   if (!config.currency_supported) return null
 
@@ -75,7 +76,38 @@ export function PayPalSmartButtons(props: {
         </div>
       )}
 
-      {config.environment === "sandbox" && (
+      {isPending && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 10,
+            padding: "18px 16px",
+            background: "#f9fafb",
+            border: "1px solid #e5e7eb",
+            borderRadius: 8,
+            minHeight: 55,
+          }}
+        >
+          <div
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              animation: "_pp_spin .7s linear infinite",
+              flexShrink: 0,
+            }}
+          />
+          <div style={{ fontSize: 13, fontWeight: 500, color: "#6b7280" }}>
+            Loading PayPal…
+          </div>
+        </div>
+      )}
+
+      {config.environment === "sandbox" && isResolved && (
         <div
           style={{
             display: "flex",
@@ -111,47 +143,50 @@ export function PayPalSmartButtons(props: {
         </div>
       )}
 
-      <PayPalButtons
-        style={{
-          layout: "vertical",
-          color: config.button_color,
-          shape: config.button_shape,
-          label: config.button_label,
-          height: config.button_height,
-        }}
-        createOrder={async () => {
-          setError(null)
-          const r = await api.createOrder(cartId)
-          return r.id
-        }}
-        onApprove={async (data: { orderID?: string }) => {
-          try {
-            setProcessing(true)
+      {isResolved && (
+        <PayPalButtons
+          forceReRender={[config.currency, config.intent, cartId]}
+          style={{
+            layout: "vertical",
+            color: config.button_color,
+            shape: config.button_shape,
+            label: config.button_label,
+            height: config.button_height,
+          }}
+          createOrder={async () => {
             setError(null)
-            const orderId = String(data?.orderID || "")
-            const result = await api.captureOrder(cartId, orderId)
+            const r = await api.createOrder(cartId)
+            return r.id
+          }}
+          onApprove={async (data: { orderID?: string }) => {
+            try {
+              setProcessing(true)
+              setError(null)
+              const orderId = String(data?.orderID || "")
+              const result = await api.captureOrder(cartId, orderId)
 
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
+              const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
 
-            onPaid?.({ ...result, ...completeResult })
-          } catch (e: unknown) {
-            const msg = e instanceof Error ? e.message : "Payment capture failed"
+              onPaid?.({ ...result, ...completeResult })
+            } catch (e: unknown) {
+              const msg = e instanceof Error ? e.message : "Payment capture failed"
+              setError(msg)
+              onError?.(msg)
+            } finally {
+              setProcessing(false)
+            }
+          }}
+          onCancel={() => {
+            setProcessing(false)
+          }}
+          onError={(err: Error | { message?: string }) => {
+            setProcessing(false)
+            const msg = err instanceof Error ? err.message : err?.message || "PayPal error"
             setError(msg)
             onError?.(msg)
-          } finally {
-            setProcessing(false)
-          }
-        }}
-        onCancel={() => {
-          setProcessing(false)
-        }}
-        onError={(err: Error | { message?: string }) => {
-          setProcessing(false)
-          const msg = err instanceof Error ? err.message : err?.message || "PayPal error"
-          setError(msg)
-          onError?.(msg)
-        }}
-      />
+          }}
+        />
+      )}
 
       {error ? (
         <div

package/src/order.ts

@@ -0,0 +1,124 @@
+/**
+ * Server-safe helpers for displaying PayPal payments on order / confirmation
+ * pages.
+ *
+ * This module is intentionally free of React and any client-only code, so it
+ * can be imported from Next.js **server components** (e.g. the order
+ * confirmation page) without pulling in the checkout UI.
+ *
+ * @example
+ * import { getPaymentLabel, fetchPayPalConfig } from "@easypayment/medusa-paypal-ui/order"
+ *
+ * // In the (async) server component that renders the payment method:
+ * const titles = await fetchPayPalConfig({
+ *   baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,
+ *   publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+ * })
+ *
+ * <Text>
+ *   {getPaymentLabel(
+ *     payment.provider_id,
+ *     paymentInfoMap[payment.provider_id]?.title,
+ *     titles
+ *   )}
+ * </Text>
+ */
+
+export const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal"
+export const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card"
+
+export type PayPalPaymentInfo = { title: string }
+
+/** Built-in fallback titles, used only when admin titles aren't supplied. */
+export const paypalPaymentInfoMap: Record<string, PayPalPaymentInfo> = {
+  [PAYPAL_WALLET_PROVIDER_ID]: { title: "PayPal" },
+  [PAYPAL_CARD_PROVIDER_ID]: { title: "Credit or Debit Card" },
+}
+
+/** Admin-configured titles, as returned by `GET /store/paypal/config`. */
+export type PayPalConfigTitles = {
+  paypal_title?: string | null
+  card_title?: string | null
+}
+
+/** True when the provider id belongs to this PayPal plugin. */
+export function isPayPalProviderId(providerId?: string | null): boolean {
+  return (
+    providerId === PAYPAL_WALLET_PROVIDER_ID ||
+    providerId === PAYPAL_CARD_PROVIDER_ID
+  )
+}
+
+/**
+ * Null-safe payment label resolver for order / confirmation pages.
+ *
+ * Precedence for the PayPal providers: **admin-configured title** (`titles`,
+ * from {@link fetchPayPalConfig}) → built-in default. For any other provider:
+ * `fallback` → raw id. Never throws on an unknown / missing provider, which is
+ * what causes the common `Cannot read properties of undefined (reading 'title')`
+ * crash on the order confirmation page.
+ *
+ * @param titles Admin titles so the order page shows the same labels configured
+ *   in Medusa Admin → Settings → PayPal (e.g. a custom "Credit or Debit Card").
+ */
+export function getPaymentLabel(
+  providerId: string | undefined | null,
+  fallback?: string,
+  titles?: PayPalConfigTitles
+): string {
+  if (!providerId) {
+    return fallback ?? ""
+  }
+  if (providerId === PAYPAL_WALLET_PROVIDER_ID) {
+    return (
+      titles?.paypal_title?.trim() ||
+      paypalPaymentInfoMap[PAYPAL_WALLET_PROVIDER_ID].title
+    )
+  }
+  if (providerId === PAYPAL_CARD_PROVIDER_ID) {
+    return (
+      titles?.card_title?.trim() ||
+      paypalPaymentInfoMap[PAYPAL_CARD_PROVIDER_ID].title
+    )
+  }
+  return fallback ?? providerId
+}
+
+/**
+ * Fetch the admin-configured PayPal titles from the storefront API
+ * (`GET /store/paypal/config`). Server-safe (uses the global `fetch`).
+ *
+ * Returns `{}` on any error/network failure so callers can fall back to the
+ * built-in defaults without their own try/catch.
+ */
+export async function fetchPayPalConfig(opts: {
+  baseUrl: string
+  publishableApiKey?: string
+  signal?: AbortSignal
+}): Promise<PayPalConfigTitles> {
+  const { baseUrl, publishableApiKey, signal } = opts
+  if (!baseUrl) {
+    return {}
+  }
+  try {
+    const res = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal/config`, {
+      headers: {
+        accept: "application/json",
+        ...(publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}),
+      },
+      signal,
+    })
+    if (!res.ok) {
+      return {}
+    }
+    const cfg = (await res.json()) as Record<string, unknown>
+    return {
+      paypal_title:
+        typeof cfg.paypal_title === "string" ? cfg.paypal_title : undefined,
+      card_title:
+        typeof cfg.card_title === "string" ? cfg.card_title : undefined,
+    }
+  } catch {
+    return {}
+  }
+}