@easypayment/medusa-paypal-ui 1.0.50 → 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