@easypayment/medusa-paypal-ui 1.2.3 → 1.2.8

package/CHANGELOG.md

@@ -2,9 +2,18 @@
 
 All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
 
+## 1.2.7 — 2026-09-23
+
+### Changed
+
+- Code formatting only, no behavior changes. Version aligned with
+  `@easypayment/medusa-payment-paypal` 1.2.7 — both packages now share the
+  same version number. (1.2.4–1.2.6 were skipped to match.)
+
 ## 1.2.3 — 2026-09-21
 
 ### Changed
+
 - Code formatting only: applied the repo's Prettier style (no semicolons,
   double quotes, 80-column width) across `src/` and added `.prettierrc` so the
   package shares the plugin's formatting config. No behavior changes.
@@ -12,6 +21,7 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
 ## 1.2.0 — 2026-09-02
 
 ### Fixed
+
 - **A reload between capture and finalization no longer strands the buyer.**
   The "money was captured" state is now persisted per cart in
   `sessionStorage`; after a reload/crash the components restore the
@@ -26,6 +36,7 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
   idempotency scope there.)
 
 ### Added
+
 - `credentials` option on the HTTP client (`HttpOptions.credentials`). Defaults
   to the historical `"include"`; set `"omit"`/`"same-origin"` for backends
   answering with `Access-Control-Allow-Origin: *`, which browsers reject for
@@ -37,6 +48,7 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
   so storefronts can stop advertising methods that will fail once selected.
 
 ### Changed
+
 - A payment method the merchant disabled in admin now renders a neutral
   "currently unavailable" notice instead of blank space under the selected
   option.
@@ -48,6 +60,7 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
 ## 1.1.0
 
 ### Fixed (re-audit)
+
 - **Card submit rejections no longer strand the buyer under the processing
   overlay.** `cardFieldsForm.submit()` returns a promise whose rejection is not
   routed to the provider's `onError`; it is now caught, the overlay/state reset,
@@ -82,8 +95,8 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
   (`paymentAction`, `advancedCardEnabled`); the old `data` envelope shape is
   kept as deprecated so existing code compiles.
 
-
 ### Added
+
 - **Transient-failure retry** in the HTTP client (opt-in `retries`, jittered
   backoff on network errors / timeouts / 429 / 5xx). Wired into the idempotent
   `markPaymentComplete` and `captureOrder` calls so a network blip right after
@@ -92,12 +105,14 @@ All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
 - Tests for the retry logic and the capture/complete retry paths.
 
 ### Changed
+
 - Test environment switched from `node` to `jsdom` so component/hook tests can
   run against a DOM (the client tests continue to pass under it).
 
 ## 1.0.56
 
 ### Added
+
 - Unit test suite (vitest) for the framework-agnostic client logic: the HTTP
   client (base-url/path normalization, publishable-key header, 401/403 handling,
   HTML-tag stripping, empty-body and non-JSON guards, timeout surfacing) and the

package/README.md

@@ -36,13 +36,13 @@
 
 `@easypayment/medusa-paypal-ui` is the **storefront UI package** that connects your Next.js (App Router) storefront to the `@easypayment/medusa-paypal` backend plugin. It ships the PayPal adapter used inside your checkout payment step — your storefront adds the adapter, provider filtering, and backend config handling to the existing Medusa payment UI.
 
-| Feature | Details |
-|---|---|
-| 🔵 **PayPal Smart Buttons** | Wallet-based checkout via `pp_paypal_paypal` |
-| 💳 **Advanced Card Fields** | Hosted PCI-compliant advanced credit card inputs via `pp_paypal_card_paypal_card` |
-| 🛠 **Admin-driven config** | Enable/disable providers and set labels from Medusa Admin |
-| ⚡ **Built-in UX** | Smart Buttons and Advanced Card UI rendered by `MedusaNextPayPalAdapter` |
-| 🔄 **Storefront-controlled flow** | Your payment step controls session creation, loading states, and `placeOrder` |
+| Feature                           | Details                                                                           |
+| --------------------------------- | --------------------------------------------------------------------------------- |
+| 🔵 **PayPal Smart Buttons**       | Wallet-based checkout via `pp_paypal_paypal`                                      |
+| 💳 **Advanced Card Fields**       | Hosted PCI-compliant advanced credit card inputs via `pp_paypal_card_paypal_card` |
+| 🛠 **Admin-driven config**        | Enable/disable providers and set labels from Medusa Admin                         |
+| ⚡ **Built-in UX**                | Smart Buttons and Advanced Card UI rendered by `MedusaNextPayPalAdapter`          |
+| 🔄 **Storefront-controlled flow** | Your payment step controls session creation, loading states, and `placeOrder`     |
 
 ---
 
@@ -160,10 +160,14 @@ useEffect(() => {
 
       const config = await response.json()
 
-      if (typeof config?.paypal_enabled === "boolean") setPaypalEnabled(config.paypal_enabled)
-      if (typeof config?.paypal_title === "string" && config.paypal_title) setPaypalTitle(config.paypal_title)
-      if (typeof config?.card_enabled === "boolean") setCardEnabled(config.card_enabled)
-      if (typeof config?.card_title === "string" && config.card_title) setCardTitle(config.card_title)
+      if (typeof config?.paypal_enabled === "boolean")
+        setPaypalEnabled(config.paypal_enabled)
+      if (typeof config?.paypal_title === "string" && config.paypal_title)
+        setPaypalTitle(config.paypal_title)
+      if (typeof config?.card_enabled === "boolean")
+        setCardEnabled(config.card_enabled)
+      if (typeof config?.card_title === "string" && config.card_title)
+        setCardTitle(config.card_title)
     } catch (err) {
       if ((err as Error).name !== "AbortError") setPaypalLoading(false)
     }
@@ -215,7 +219,7 @@ const filteredPaymentMethods = useMemo(
       if (paymentMethod.id === PAYPAL_CARD_PROVIDER_ID) return cardEnabled
       return true
     }),
-  [availablePaymentMethods, cardEnabled, paypalEnabled],
+  [availablePaymentMethods, cardEnabled, paypalEnabled]
 )
 ```
 
@@ -242,10 +246,20 @@ This makes the radio button labels show the titles configured in Medusa Admin in
   paymentInfoMap={{
     ...paymentInfoMap,
     ...(paymentMethod.id === PAYPAL_PROVIDER_ID
-      ? { [paymentMethod.id]: { ...(paymentInfoMap[paymentMethod.id] || {}), title: paypalTitle } }
+      ? {
+          [paymentMethod.id]: {
+            ...(paymentInfoMap[paymentMethod.id] || {}),
+            title: paypalTitle,
+          },
+        }
       : {}),
     ...(paymentMethod.id === PAYPAL_CARD_PROVIDER_ID
-      ? { [paymentMethod.id]: { ...(paymentInfoMap[paymentMethod.id] || {}), title: cardTitle } }
+      ? {
+          [paymentMethod.id]: {
+            ...(paymentInfoMap[paymentMethod.id] || {}),
+            title: cardTitle,
+          },
+        }
       : {}),
   }}
   paymentProviderId={paymentMethod.id}
@@ -262,24 +276,32 @@ This makes the radio button labels show the titles configured in Medusa Admin in
 The first block shows a loading spinner while the session is being set up. The second block renders the PayPal buttons or card fields once the session is ready.
 
 ```tsx
-{/* Loading state while PayPal session is being created */}
-{isPayPal(selectedPaymentMethod) && paypalLoading && (
-  <div>Setting up payment...</div>
-)}
-
-{/* PayPal buttons or card fields */}
-{isPayPal(selectedPaymentMethod) && !paypalLoading && (
-  <MedusaNextPayPalAdapter
-    cartId={cart.id}
-    selectedProviderId={selectedPaymentMethod}
-    baseUrl={process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!}
-    publishableApiKey={process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY}
-    onSuccess={async () => {
-      await placeOrder(cart.id)
-    }}
-    onError={(message) => setError(message)}
-  />
-)}
+{
+  /* Loading state while PayPal session is being created */
+}
+{
+  isPayPal(selectedPaymentMethod) && paypalLoading && (
+    <div>Setting up payment...</div>
+  )
+}
+
+{
+  /* PayPal buttons or card fields */
+}
+{
+  isPayPal(selectedPaymentMethod) && !paypalLoading && (
+    <MedusaNextPayPalAdapter
+      cartId={cart.id}
+      selectedProviderId={selectedPaymentMethod}
+      baseUrl={process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!}
+      publishableApiKey={process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY}
+      onSuccess={async () => {
+        await placeOrder(cart.id)
+      }}
+      onError={(message) => setError(message)}
+    />
+  )
+}
 ```
 
 ---
@@ -299,7 +321,7 @@ PayPal handles its own checkout action, so the "Continue to review" button must
   disabled={
     (isStripeLike(selectedPaymentMethod) && !cardComplete) ||
     (!selectedPaymentMethod && !paidByGiftcard) ||
-    isPayPal(selectedPaymentMethod)   // 👈 add this line
+    isPayPal(selectedPaymentMethod) // 👈 add this line
   }
   data-testid="submit-payment-button"
 >
@@ -325,9 +347,9 @@ This shows the admin-configured title instead of a hardcoded or missing label.
   {activeSession?.provider_id === "pp_paypal_paypal"
     ? paypalTitle
     : activeSession?.provider_id === "pp_paypal_card_paypal_card"
-    ? cardTitle
-    : paymentInfoMap[activeSession?.provider_id]?.title ||
-      activeSession?.provider_id}
+      ? cardTitle
+      : paymentInfoMap[activeSession?.provider_id]?.title ||
+        activeSession?.provider_id}
 </Text>
 ```
 
@@ -368,7 +390,7 @@ const Payment = ({
   availablePaymentMethods: any[]
 }) => {
   const activeSession = cart.payment_collection?.payment_sessions?.find(
-    (paymentSession: any) => paymentSession.status === "pending",
+    (paymentSession: any) => paymentSession.status === "pending"
   )
 
   const [isLoading, setIsLoading] = useState(false)
@@ -376,7 +398,7 @@ const Payment = ({
   const [cardBrand, setCardBrand] = useState<string | null>(null)
   const [cardComplete, setCardComplete] = useState(false)
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
-    activeSession?.provider_id ?? "",
+    activeSession?.provider_id ?? ""
   )
   const [paypalEnabled, setPaypalEnabled] = useState(true)
   const [paypalTitle, setPaypalTitle] = useState("PayPal")
@@ -397,7 +419,7 @@ const Payment = ({
         if (paymentMethod.id === PAYPAL_CARD_PROVIDER_ID) return cardEnabled
         return true
       }),
-    [availablePaymentMethods, cardEnabled, paypalEnabled],
+    [availablePaymentMethods, cardEnabled, paypalEnabled]
   )
 
   const setPaymentMethod = async (method: string) => {
@@ -427,7 +449,7 @@ const Payment = ({
       params.set(name, value)
       return params.toString()
     },
-    [searchParams],
+    [searchParams]
   )
 
   const handleEdit = () => {
@@ -454,7 +476,7 @@ const Payment = ({
       if (!shouldInputCard) {
         return router.push(
           pathname + "?" + createQueryString("step", "review"),
-          { scroll: false },
+          { scroll: false }
         )
       }
     } catch (err: any) {
@@ -494,10 +516,14 @@ const Payment = ({
 
         const config = await response.json()
 
-        if (typeof config?.paypal_enabled === "boolean") setPaypalEnabled(config.paypal_enabled)
-        if (typeof config?.paypal_title === "string" && config.paypal_title) setPaypalTitle(config.paypal_title)
-        if (typeof config?.card_enabled === "boolean") setCardEnabled(config.card_enabled)
-        if (typeof config?.card_title === "string" && config.card_title) setCardTitle(config.card_title)
+        if (typeof config?.paypal_enabled === "boolean")
+          setPaypalEnabled(config.paypal_enabled)
+        if (typeof config?.paypal_title === "string" && config.paypal_title)
+          setPaypalTitle(config.paypal_title)
+        if (typeof config?.card_enabled === "boolean")
+          setCardEnabled(config.card_enabled)
+        if (typeof config?.card_title === "string" && config.card_title)
+          setCardTitle(config.card_title)
       } catch (err) {
         if ((err as Error).name !== "AbortError") setPaypalLoading(false)
       }
@@ -517,7 +543,7 @@ const Payment = ({
             {
               "opacity-50 pointer-events-none select-none":
                 !isOpen && !paymentReady,
-            },
+            }
           )}
         >
           Payment
@@ -542,7 +568,9 @@ const Payment = ({
             filteredPaymentMethods.length > 0 &&
             (paypalEnabled ||
               cardEnabled ||
-              availablePaymentMethods.some((method) => !isPayPal(method.id))) && (
+              availablePaymentMethods.some(
+                (method) => !isPayPal(method.id)
+              )) && (
               <>
                 <RadioGroup
                   value={selectedPaymentMethod}
@@ -630,7 +658,9 @@ const Payment = ({
                     cartId={cart.id}
                     selectedProviderId={selectedPaymentMethod}
                     baseUrl={process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!}
-                    publishableApiKey={process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY}
+                    publishableApiKey={
+                      process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY
+                    }
                     onSuccess={async () => {
                       await placeOrder(cart.id)
                     }}
@@ -690,7 +720,8 @@ const Payment = ({
                 >
                   {activeSession?.provider_id === "pp_paypal_paypal"
                     ? paypalTitle
-                    : activeSession?.provider_id === "pp_paypal_card_paypal_card"
+                    : activeSession?.provider_id ===
+                        "pp_paypal_card_paypal_card"
                       ? cardTitle
                       : paymentInfoMap[activeSession?.provider_id]?.title ||
                         activeSession?.provider_id}
@@ -705,7 +736,9 @@ const Payment = ({
                   data-testid="payment-details-summary"
                 >
                   <Container className="flex items-center h-7 w-fit p-2 bg-ui-button-neutral-hover">
-                    {paymentInfoMap[selectedPaymentMethod]?.icon || <CreditCard />}
+                    {paymentInfoMap[selectedPaymentMethod]?.icon || (
+                      <CreditCard />
+                    )}
                   </Container>
                   <Text>
                     {isStripeLike(selectedPaymentMethod) && cardBrand
@@ -744,7 +777,7 @@ export default Payment
 
 You don't need to do anything for these — they're automatic:
 
-- **No double charges.** Once a customer has paid, the checkout only ever offers a *"Retry — finish placing my order"* button — even if the page is reloaded or the browser crashes mid-checkout.
+- **No double charges.** Once a customer has paid, the checkout only ever offers a _"Retry — finish placing my order"_ button — even if the page is reloaded or the browser crashes mid-checkout.
 - **Always the right amount.** If the customer changes their cart during checkout, a fresh PayPal order is created at the new total.
 - **Clear messages.** Customers see friendly, actionable messages instead of technical errors, and a payment method you've disabled in Medusa Admin shows a polite "currently unavailable" note.
 
@@ -779,4 +812,4 @@ CVV           Any 3 digits
 
 ## 📄 License
 
-MIT © [Easy Payment](https://www.npmjs.com/package/@easypayment/medusa-paypal-ui)
+MIT © [Easy Payment](https://www.npmjs.com/package/@easypayment/medusa-paypal-ui)

package/dist/index.cjs

@@ -1554,9 +1554,7 @@ var PAYPAL_PROVIDER_IDS = [
 ];
 function isPayPalProviderId(providerId) {
   if (!providerId) return false;
-  return PAYPAL_PROVIDER_IDS.includes(
-    providerId
-  );
+  return PAYPAL_PROVIDER_IDS.includes(providerId);
 }
 
 // src/adapters/MedusaNextPayPalAdapter.tsx