@easypayment/medusa-paypal-ui 1.0.37 → 1.0.39

package/src/components/PayPalAdvancedCard.tsx

@@ -15,52 +15,53 @@ import type { PayPalConfig } from "../client/types"
 // ─── Spinner keyframes ────────────────────────────────────────────────────────
 const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
 
+// ─── PayPal hosted-field iframe styles ───────────────────────────────────────
 const cardStyle = {
   input: {
-    "font-size": "16px",
-    "font-family": "Helvetica, Arial, sans-serif",
+    "font-size": "15px",
+    "font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
     "font-weight": "400",
-    color: "#2f2f2f",
+    color: "#111827",
     padding: "0 14px",
-    height: "44px",
-    "border-radius": "4px",
-    border: "1px solid #c7c7c7",
+    height: "42px",
+    "border-radius": "8px",
+    border: "1px solid #d1d5db",
     background: "#ffffff",
     "box-shadow": "none",
+    transition: "border-color 0.15s ease",
   },
-
   "::placeholder": {
-    color: "#a0aec0",
+    color: "#9ca3af",
   },
-
   ".invalid": {
-    color: "#b42318",
-    border: "1px solid #d92d20",
+    color: "#dc2626",
+    border: "1px solid #fca5a5",
+    background: "#fff7f7",
     "box-shadow": "none",
   },
-
   ".valid": {
-    color: "#2f2f2f",
-    border: "1px solid #c7c7c7",
+    color: "#111827",
+    border: "1px solid #d1d5db",
     "box-shadow": "none",
   },
-
   "input:focus": {
     outline: "none",
-    border: "1px solid #c7c7c7",
-    "box-shadow": "none",
+    border: "1px solid #2563eb",
+    "box-shadow": "0 0 0 3px rgba(37,99,235,0.12)",
   },
 }
 
+// ─── Label style ─────────────────────────────────────────────────────────────
 const labelStyle: React.CSSProperties = {
   display: "block",
-  fontSize: 15,
-  lineHeight: "22px",
-  fontWeight: 700,
-  color: "#4a4a4a",
-  marginBottom: 10,
+  fontSize: 13,
+  fontWeight: 500,
+  color: "#374151",
+  marginBottom: 6,
+  letterSpacing: "0.01em",
 }
 
+// ─── Submit button ────────────────────────────────────────────────────────────
 function SubmitButton({
   disabled,
   label,
@@ -71,29 +72,51 @@ function SubmitButton({
   onSubmit: () => void
 }) {
   const { cardFieldsForm } = usePayPalCardFields()
+  const isDisabled = disabled || !cardFieldsForm
 
   return (
     <button
       type="button"
-      disabled={disabled || !cardFieldsForm}
+      disabled={isDisabled}
       onClick={() => {
         onSubmit()
         cardFieldsForm?.submit()
       }}
       style={{
         width: "100%",
-        height: 52,
-        padding: "0 16px",
-        borderRadius: 4,
-        border: "1px solid #c7c7c7",
-        background: "#f5f5f5",
-        color: "#2f363d",
-        fontSize: 16,
-        fontWeight: 700,
-        fontFamily: "Helvetica, Arial, sans-serif",
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.7 : 1,
-        boxShadow: "none",
+        height: 48,
+        padding: "0 20px",
+        borderRadius: 8,
+        border: "none",
+        background: isDisabled
+          ? "#e5e7eb"
+          : "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)",
+        color: isDisabled ? "#9ca3af" : "#ffffff",
+        fontSize: 15,
+        fontWeight: 600,
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        letterSpacing: "0.01em",
+        boxShadow: isDisabled
+          ? "none"
+          : "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)",
+        transition: "all 0.15s ease",
+      }}
+      onMouseEnter={(e) => {
+        if (!isDisabled) {
+          ;(e.target as HTMLButtonElement).style.background =
+            "linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%)"
+          ;(e.target as HTMLButtonElement).style.boxShadow =
+            "0 4px 6px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.06)"
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isDisabled) {
+          ;(e.target as HTMLButtonElement).style.background =
+            "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)"
+          ;(e.target as HTMLButtonElement).style.boxShadow =
+            "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)"
+        }
       }}
     >
       {label}
@@ -101,6 +124,7 @@ function SubmitButton({
   )
 }
 
+// ─── Main component ───────────────────────────────────────────────────────────
 export function PayPalAdvancedCard(props: {
   baseUrl: string
   publishableApiKey?: string
@@ -125,14 +149,15 @@ export function PayPalAdvancedCard(props: {
     return (
       <div
         style={{
-          padding: 12,
-          border: "1px solid #ddd",
-          borderRadius: 4,
+          padding: "12px 16px",
+          background: "#fefce8",
+          border: "1px solid #fde68a",
+          borderRadius: 8,
           fontSize: 13,
-          color: "#3c434a",
+          color: "#92400e",
         }}
       >
-        CardFields unavailable: missing client_token from backend.
+        Card fields unavailable — missing client token from backend.
       </div>
     )
   }
@@ -140,49 +165,47 @@ export function PayPalAdvancedCard(props: {
   const isSandbox = config.environment === "sandbox"
 
   return (
-    // ── ADDED: wrapper div with position relative so overlay works ────────────
     <div style={{ position: "relative" }}>
       <style>{SPIN_STYLE}</style>
 
-      {/* ── ADDED: full overlay shown while card payment processes ─────────── */}
+      {/* ── Processing overlay ──────────────────────────────────────────────── */}
       {submitting && (
         <div
           style={{
             position: "absolute",
             inset: 0,
             zIndex: 20,
-            background: "rgba(255,255,255,0.90)",
-            borderRadius: 8,
+            background: "rgba(255,255,255,0.92)",
+            borderRadius: 12,
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            gap: 12,
-            minHeight: 120,
+            gap: 14,
+            minHeight: 180,
           }}
         >
           <div
             style={{
-              width: 32,
-              height: 32,
+              width: 36,
+              height: 36,
               borderRadius: "50%",
-              border: "2.5px solid #e5e7eb",
-              borderTopColor: "#1877f2",
-              animation: "_pp_spin .7s linear infinite",
+              border: "3px solid #dbeafe",
+              borderTopColor: "#2563eb",
+              animation: "_pp_spin .75s linear infinite",
             }}
           />
           <div style={{ textAlign: "center" }}>
-            <div style={{ fontSize: 14, fontWeight: 500, color: "#111827" }}>
+            <div style={{ fontSize: 15, fontWeight: 600, color: "#111827" }}>
               Processing your payment…
             </div>
-            <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
+            <div style={{ fontSize: 13, color: "#6b7280", marginTop: 4 }}>
               Please do not close or refresh this page
             </div>
           </div>
         </div>
       )}
 
-      {/* ── UNCHANGED: PayPalCardFieldsProvider and all its children are exactly as before ── */}
       <PayPalCardFieldsProvider
         style={cardStyle}
         createOrder={async () => {
@@ -193,10 +216,8 @@ export function PayPalAdvancedCard(props: {
         onApprove={async (data: { orderID?: string }) => {
           try {
             setError(null)
-
             const orderId = String(data?.orderID || "")
             const result = await api.captureOrder(cartId, orderId)
-
             onPaid?.(result)
           } catch (e: unknown) {
             const msg = e instanceof Error ? e.message : "Card payment failed"
@@ -209,9 +230,7 @@ export function PayPalAdvancedCard(props: {
           setSubmitting(false)
         }}
         onError={(e: Error | { message?: string }) => {
-          const msg =
-            e instanceof Error ? e.message : e?.message || "CardFields error"
-
+          const msg = e instanceof Error ? e.message : e?.message || "CardFields error"
           setError(msg)
           onError?.(msg)
           setSubmitting(false)
@@ -219,80 +238,120 @@ export function PayPalAdvancedCard(props: {
       >
         <div
           style={{
-            display: "grid",
-            gap: 18,
+            display: "flex",
+            flexDirection: "column",
+            gap: 16,
             width: "100%",
-            maxWidth: 516,
           }}
         >
+          {/* ── Sandbox notice ──────────────────────────────────────────────── */}
           {isSandbox && (
             <div
               style={{
-                fontSize: 15,
-                lineHeight: 1.5,
-                color: "#4a4a4a",
-                marginBottom: 2,
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                padding: "10px 14px",
+                background: "#eff6ff",
+                border: "1px solid #bfdbfe",
+                borderRadius: 8,
+                fontSize: 13,
+                color: "#1e40af",
+                lineHeight: 1.55,
               }}
             >
-              Sandbox Mode Enabled.
-              <br />
-              Use test card <strong>4111 1111 1111 1111</strong> with any future
-              expiration date and any CVV.
+              <span style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}>🧪</span>
+              <span>
+                Sandbox mode — use test card{" "}
+                <strong style={{ fontFamily: "monospace", letterSpacing: "0.05em" }}>
+                  4111 1111 1111 1111
+                </strong>{" "}
+                with any future date and any CVV.
+              </span>
             </div>
           )}
 
-          <div style={{ width: "100%" }}>
+          {/* ── Card number ─────────────────────────────────────────────────── */}
+          <div>
             <label style={labelStyle}>Card number</label>
             <PayPalNumberField />
           </div>
 
+          {/* ── Expiry + CVV ────────────────────────────────────────────────── */}
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
-              columnGap: 18,
-              alignItems: "start",
+              gridTemplateColumns: "1fr 1fr",
+              gap: 16,
             }}
           >
             <div>
               <label style={labelStyle}>Expiration date</label>
               <PayPalExpiryField />
             </div>
-
             <div>
               <label style={labelStyle}>Security code</label>
               <PayPalCVVField />
             </div>
           </div>
 
-          <div style={{ marginTop: 2 }}>
-            <SubmitButton
-              disabled={submitting}
-              label={submitting ? "Processing..." : "Pay by Card"}
-              onSubmit={() => {
-                setError(null)
-                setSubmitting(true)
-              }}
-            />
+          {/* ── Security badge ──────────────────────────────────────────────── */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 12,
+              color: "#6b7280",
+            }}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#10b981"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+            <span>Your payment is secured with 256-bit SSL encryption</span>
           </div>
 
-          {/* ── CHANGED: styled error box instead of plain colored text ──── */}
-          {error ? (
+          {/* ── Submit button ────────────────────────────────────────────────── */}
+          <SubmitButton
+            disabled={submitting}
+            label={submitting ? "Processing…" : "Pay by Card"}
+            onSubmit={() => {
+              setError(null)
+              setSubmitting(true)
+            }}
+          />
+
+          {/* ── Error box ───────────────────────────────────────────────────── */}
+          {error && (
             <div
               style={{
-                padding: "8px 12px",
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                padding: "10px 14px",
                 background: "#fef2f2",
                 border: "1px solid #fecaca",
-                borderRadius: 6,
+                borderRadius: 8,
                 fontSize: 13,
                 color: "#b91c1c",
+                lineHeight: 1.5,
               }}
             >
-              {error}
+              <span style={{ flexShrink: 0, marginTop: 1 }}>⚠️</span>
+              <span>{error}</span>
             </div>
-          ) : null}
+          )}
         </div>
       </PayPalCardFieldsProvider>
     </div>
   )
-}
+}

package/src/components/PayPalSmartButtons.tsx

@@ -79,6 +79,43 @@ export function PayPalSmartButtons(props: {
         </div>
       )}
 
+      {/* ── Sandbox notice ─────────────────────────────────────────────────── */}
+      {config.environment === "sandbox" && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "10px 14px",
+            background: "#eff6ff",
+            border: "1px solid #bfdbfe",
+            borderRadius: 8,
+            fontSize: 13,
+            color: "#1e40af",
+            lineHeight: 1.5,
+            marginBottom: 10,
+          }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#1e40af"
+            strokeWidth="2"
+            strokeLinecap="round"
+            style={{ flexShrink: 0, marginTop: 1 }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4M12 16h.01" />
+          </svg>
+          <span>
+            Sandbox mode — you will not be charged. Use your PayPal sandbox
+            account to complete the payment.
+          </span>
+        </div>
+      )}
+
       <PayPalButtons
         style={{
           layout: "vertical",
@@ -122,15 +159,20 @@ export function PayPalSmartButtons(props: {
         <div
           style={{
             marginTop: 10,
-            padding: "8px 12px",
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "10px 14px",
             background: "#fef2f2",
             border: "1px solid #fecaca",
-            borderRadius: 6,
+            borderRadius: 8,
             fontSize: 13,
             color: "#b91c1c",
+            lineHeight: 1.5,
           }}
         >
-          {error}
+          <span style={{ flexShrink: 0, fontSize: 15 }}>⚠️</span>
+          <span>{error}</span>
         </div>
       ) : null}
     </div>