@easypayment/medusa-payment-paypal 0.7.4

package/src/admin/routes/settings/paypal/page.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { Navigate } from "react-router-dom"
+
+export const config = defineRouteConfig({
+  label: "PayPal",
+})
+
+const PayPalSettingsIndexRoute = () => {
+  return <Navigate to="connection" replace />
+}
+
+export default PayPalSettingsIndexRoute

package/src/admin/routes/settings/paypal/pay-later-messaging/page.tsx

@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom"
+
+export default function PayPalPayLaterMessagingPage() {
+  return <Navigate to="/settings/paypal/connection" replace />
+}

package/src/admin/routes/settings/paypal/paypal-settings/page.tsx

@@ -0,0 +1,351 @@
+import React, { useEffect, useRef, useState } from "react"
+import PayPalTabs from "../_components/Tabs"
+
+type AdminFetchOptions = {
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
+  body?: Record<string, unknown>
+  query?: Record<string, string>
+}
+
+async function adminFetch<T = unknown>(path: string, opts: AdminFetchOptions = {}): Promise<T> {
+  const { method = "GET", body, query } = opts
+  let url = path
+  if (query && Object.keys(query).length > 0) {
+    const params = new URLSearchParams(query)
+    url = `${path}?${params.toString()}`
+  }
+  const headers: Record<string, string> = { Accept: "application/json" }
+  if (body !== undefined) headers["Content-Type"] = "application/json"
+  if (typeof window !== "undefined") {
+    const token = (window as any).__medusa__?.token
+    if (token) headers["Authorization"] = `Bearer ${token}`
+  }
+  const res = await fetch(url, {
+    method, headers, credentials: "include",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  })
+  const text = await res.text().catch(() => "")
+  if (!res.ok) {
+    if (res.status === 401) throw new Error("Unauthorized (401) - session may have expired. Please reload and log in again.")
+    if (res.status === 403) throw new Error("Forbidden (403) - you do not have permission to perform this action.")
+    throw new Error(text || `Request failed with status ${res.status}`)
+  }
+  if (!text) return {} as T
+  try { return JSON.parse(text) as T } catch { return {} as T }
+}
+
+type ButtonColor = "gold" | "blue" | "silver" | "black" | "white"
+type ButtonShape = "rect" | "pill"
+type ButtonWidth = "small" | "medium" | "large" | "responsive"
+type ButtonLabel = "paypal" | "checkout" | "buynow" | "pay"
+
+type PayPalSettingsForm = {
+  enabled: boolean
+  title: string
+  description: string
+  buttonColor: ButtonColor
+  buttonShape: ButtonShape
+  buttonWidth: ButtonWidth
+  buttonHeight: number
+  buttonLabel: ButtonLabel
+}
+
+const COLOR_OPTIONS: { value: ButtonColor; label: string }[] = [
+  { value: "gold", label: "Gold (Recommended)" },
+  { value: "blue", label: "Blue" },
+  { value: "silver", label: "Silver" },
+  { value: "black", label: "Black" },
+  { value: "white", label: "White" },
+]
+
+const SHAPE_OPTIONS: { value: ButtonShape; label: string }[] = [
+  { value: "rect", label: "Rect (Recommended)" },
+  { value: "pill", label: "Pill" },
+]
+
+const WIDTH_OPTIONS: { value: ButtonWidth; label: string }[] = [
+  { value: "small", label: "Small" },
+  { value: "medium", label: "Medium" },
+  { value: "large", label: "Large" },
+  { value: "responsive", label: "Responsive" },
+]
+
+const HEIGHT_OPTIONS: number[] = [32, 36, 40, 44, 48, 52, 56]
+
+const LABEL_OPTIONS: { value: ButtonLabel; label: string }[] = [
+  { value: "paypal", label: "PayPal" },
+  { value: "checkout", label: "Checkout" },
+  { value: "buynow", label: "Buy Now" },
+  { value: "pay", label: "Pay" },
+]
+
+function SectionCard({
+  title,
+  description,
+  children,
+  right,
+}: {
+  title: string
+  description?: string
+  children: React.ReactNode
+  right?: React.ReactNode
+}) {
+  return (
+    <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
+      <div className="flex items-start justify-between gap-4 border-b border-ui-border-base p-4">
+        <div>
+          <div className="text-base font-semibold text-ui-fg-base">{title}</div>
+          {description ? <div className="mt-1 text-sm text-ui-fg-subtle">{description}</div> : null}
+        </div>
+        {right}
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  )
+}
+
+function FieldRow({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className="grid grid-cols-12 items-start gap-4 py-3">
+      <div className="col-span-12 md:col-span-4">
+        <div className="text-sm font-medium text-ui-fg-base">{label}</div>
+        {hint ? <div className="mt-1 text-xs text-ui-fg-subtle">{hint}</div> : null}
+      </div>
+      <div className="col-span-12 md:col-span-8">{children}</div>
+    </div>
+  )
+}
+
+export default function PayPalSettingsTab() {
+  const [form, setForm] = useState<PayPalSettingsForm>({
+    enabled: true,
+    title: "PayPal",
+    description: "Pay via PayPal; you can pay with your credit card if you don't have a PayPal account",
+    buttonColor: "gold",
+    buttonShape: "rect",
+    buttonWidth: "medium",
+    buttonHeight: 48,
+    buttonLabel: "paypal",
+  })
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null)
+  const didInit = useRef(false)
+
+  useEffect(() => {
+    if (didInit.current) return
+    didInit.current = true
+
+    ;(async () => {
+      try {
+        setLoading(true)
+        const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
+          "/admin/paypal/settings"
+        )
+        const payload = (json?.data ?? json) as any
+        const saved = payload?.paypal_settings
+        if (saved && typeof saved === "object") {
+          setForm((prev) => ({
+            ...prev,
+            ...saved,
+          }))
+        }
+      } catch {
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  async function onSave() {
+    try {
+      setSaving(true)
+      const cleaned = { ...form }
+      const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
+        "/admin/paypal/settings",
+        {
+          method: "POST",
+          body: { paypal_settings: cleaned as unknown as Record<string, unknown> },
+        }
+      )
+      const payload = (json?.data ?? json) as any
+      const saved = payload?.paypal_settings
+      if (saved && typeof saved === "object") {
+        setForm((prev) => ({
+          ...prev,
+          ...saved,
+        }))
+      }
+      setToast({ type: "success", message: "Settings saved" })
+      window.setTimeout(() => setToast(null), 2500)
+    } catch (e: unknown) {
+      setToast({
+        type: "error",
+        message:
+          (e instanceof Error ? e.message : "") ||
+          "Failed to save settings.",
+      })
+      window.setTimeout(() => setToast(null), 3500)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Gateway By Easy Payment</h1>
+          </div>
+          <div className="flex items-center gap-2">
+          </div>
+        </div>
+
+        <PayPalTabs />
+
+        {toast ? (
+          <div
+            className="fixed right-6 top-6 z-50 rounded-md border border-ui-border-base bg-ui-bg-base px-4 py-3 text-sm shadow-lg"
+            role="status"
+            aria-live="polite"
+          >
+            <span className={toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error"}>
+              {toast.message}
+            </span>
+          </div>
+        ) : null}
+
+        <SectionCard
+          title="PayPal Settings"
+          description="Enable PayPal and configure checkout title."
+          right={(
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={onSave}
+                disabled={saving || loading}
+                className="transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:transition-fg after:absolute after:inset-0 after:content-[''] after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus-visible:shadow-buttons-neutral-focus disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden txt-compact-small-plus px-3 py-1.5"
+              >
+                {saving ? "Saving..." : "Save settings"}
+              </button>
+              {loading ? <span className="text-sm text-ui-fg-subtle">Loading…</span> : null}
+            </div>
+          )}
+        >
+          <div className="divide-y divide-ui-border-base">
+            <FieldRow label="Enable/Disable">
+              <label className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={form.enabled}
+                  onChange={(e) => setForm((p) => ({ ...p, enabled: e.target.checked }))}
+                  className="h-4 w-4 rounded border-ui-border-base"
+                />
+                <span className="text-sm text-ui-fg-base">Enable PayPal</span>
+              </label>
+            </FieldRow>
+
+            <FieldRow label="Title">
+              <input
+                value={form.title}
+                onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+                placeholder="PayPal"
+              />
+            </FieldRow>
+
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title="Button Appearance"
+          description="Control PayPal Smart Button styling (color/shape/size/label)."
+        >
+          <div className="divide-y divide-ui-border-base">
+
+            <FieldRow label="Button Color">
+              <select
+                value={form.buttonColor}
+                onChange={(e) => setForm((p) => ({ ...p, buttonColor: e.target.value as ButtonColor }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+              >
+                {COLOR_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Shape">
+              <select
+                value={form.buttonShape}
+                onChange={(e) => setForm((p) => ({ ...p, buttonShape: e.target.value as ButtonShape }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+              >
+                {SHAPE_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Width">
+              <select
+                value={form.buttonWidth}
+                onChange={(e) => setForm((p) => ({ ...p, buttonWidth: e.target.value as ButtonWidth }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+              >
+                {WIDTH_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Height">
+              <select
+                value={String(form.buttonHeight)}
+                onChange={(e) => setForm((p) => ({ ...p, buttonHeight: Number(e.target.value) }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+              >
+                {HEIGHT_OPTIONS.map((h) => (
+                  <option key={h} value={h}>
+                    {h} px
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Label">
+              <select
+                value={form.buttonLabel}
+                onChange={(e) => setForm((p) => ({ ...p, buttonLabel: e.target.value as ButtonLabel }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+              >
+                {LABEL_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+          </div>
+        </SectionCard>
+
+      </div>
+    </div>
+  )
+}

package/src/api/admin/payment-collections/[id]/payment-sessions/route.ts

@@ -0,0 +1,24 @@
+import { createPaymentSessionsWorkflow } from "@medusajs/core-flows"
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+
+type CreatePaymentSessionBody = {
+  provider_id: string
+  data?: Record<string, unknown>
+  customer_id?: string
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  const collectionId = req.params.id
+  const { provider_id, data, customer_id } = req.body as CreatePaymentSessionBody
+
+  const { result } = await createPaymentSessionsWorkflow(req.scope).run({
+    input: {
+      payment_collection_id: collectionId,
+      provider_id,
+      customer_id,
+      data,
+    },
+  })
+
+  res.status(200).json({ payment_session: result })
+}

package/src/api/admin/paypal/disconnect/route.ts

@@ -0,0 +1,8 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+  await paypal.disconnect()
+  return res.json({ ok: true })
+}

package/src/api/admin/paypal/environment/route.ts

@@ -0,0 +1,25 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+type Body = {
+  environment?: "sandbox" | "live"
+}
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+  const status = await paypal.getStatus()
+  return res.json({ environment: status.environment })
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  try {
+    const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+    const body = (req.body || {}) as Body
+    const env = body.environment === "sandbox" ? "sandbox" : "live"
+    await paypal.setEnvironment(env)
+    const status = await paypal.getStatus()
+    return res.json(status)
+  } catch (e: any) {
+    return res.status(500).json({ message: e?.message || "Unknown error" })
+  }
+}

package/src/api/admin/paypal/onboard-complete/route.ts

@@ -0,0 +1,34 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function GET(_req: MedusaRequest, res: MedusaResponse) {
+  return res.status(405).json({
+    message:
+      "Method Not Allowed. Use POST with JSON: { authCode, sharedId, env }. This endpoint is called by the PayPal onboarding callback.",
+  })
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+  const body = req.body as { authCode?: string; sharedId?: string; env?: "sandbox" | "live" }
+
+  if (!body?.authCode || !body?.sharedId) {
+    return res.status(400).json({ message: "Missing authCode/sharedId" })
+  }
+
+  try {
+
+    await paypal.exchangeAndSaveSellerCredentials({
+      authCode: body.authCode,
+      sharedId: body.sharedId,
+      env: body.env,
+    })
+
+    return res.json({ ok: true })
+  } catch (e: any) {
+    console.error("[PayPal] onboard-complete failed", e)
+    return res.status(500).json({
+      message: e?.message || "Failed to exchange and save PayPal credentials",
+    })
+  }
+}

package/src/api/admin/paypal/onboarding-link/route.ts

@@ -0,0 +1,45 @@
+import type {
+  AuthenticatedMedusaRequest,
+  MedusaRequest,
+  MedusaResponse,
+} from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+type Body = {
+  email?: string
+  products?: string[]
+}
+
+export async function POST(req: AuthenticatedMedusaRequest, res: MedusaResponse) {
+  try {
+    const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+    const body = (req.body || {}) as Body
+    const authEmail =
+      typeof req.auth_context?.user_metadata?.email === "string"
+        ? String(req.auth_context.user_metadata.email)
+        : undefined
+    const email = authEmail ?? body.email ?? "admin@paypal.com"
+
+    const link = await paypal.createOnboardingLink({
+      email,
+      products: body.products,
+    })
+
+    return res.json({
+      status: "pending",
+      onboarding_url: link.onboarding_url,
+      return_url: link.return_url,
+    })
+  } catch (e: any) {
+    console.error("[paypal_onboarding] onboarding-link error:", e?.message || e, e?.stack)
+    return res.status(500).json({
+      message: e?.message || "Unknown error",
+    })
+  }
+}
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  return res.status(405).json({
+    message: "Use POST /admin/paypal/onboarding-link",
+  })
+}

package/src/api/admin/paypal/onboarding-status/route.ts

@@ -0,0 +1,17 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  try {
+    const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+    const status = await paypal.getStatus()
+    return res.json(status)
+  } catch (e: any) {
+    console.error("[paypal_onboarding] onboarding-status error:", e?.message || e, e?.stack)
+    return res.json({
+      environment: "live",
+      status: "disconnected",
+      error: e?.message || "Unknown error",
+    })
+  }
+}

package/src/api/admin/paypal/save-credentials/route.ts

@@ -0,0 +1,22 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+  const body = req.body as {
+    clientId?: string
+    clientSecret?: string
+    environment?: "sandbox" | "live"
+  }
+
+  if (!body?.clientId || !body?.clientSecret) {
+    return res.status(400).json({ message: "Missing clientId/clientSecret" })
+  }
+
+  await paypal.saveAndHydrateSellerCredentials({
+    clientId: body.clientId,
+    clientSecret: body.clientSecret,
+    environment: body.environment,
+  })
+  return res.json({ ok: true })
+}

package/src/api/admin/paypal/settings/route.ts

@@ -0,0 +1,14 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+  return res.json(await paypal.getSettings())
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+
+  const patch = (req.body && typeof req.body === "object") ? (req.body as Record<string, any>) : {}
+  return res.json(await paypal.saveSettings(patch))
+}

package/src/api/admin/paypal/status/route.ts

@@ -0,0 +1,12 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import type PayPalModuleService from "../../../../modules/paypal/service"
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const paypal = req.scope.resolve<PayPalModuleService>("paypal_onboarding")
+
+  const q = (req.query || {}) as Record<string, any>
+  const envParam = (q.environment || q.env) as string | undefined
+  const env = envParam === "live" ? "live" : envParam === "sandbox" ? "sandbox" : undefined
+
+  return res.json(await paypal.getStatus(env))
+}

package/src/api/middlewares.ts

@@ -0,0 +1,14 @@
+import { defineMiddlewares } from "@medusajs/framework/http"
+
+export default defineMiddlewares({
+  routes: [
+    {
+      matcher: "/store/paypal-complete",
+      middlewares: [],
+    },
+    {
+      matcher: "/store/paypal/:path*",
+      middlewares: [],
+    },
+  ],
+})

package/src/api/store/payment-collections/[id]/payment-sessions/route.ts

@@ -0,0 +1,56 @@
+import { createPaymentSessionsWorkflow } from "@medusajs/core-flows"
+import { MedusaResponse, MedusaStoreRequest, refetchEntity } from "@medusajs/framework/http"
+import { MedusaError } from "@medusajs/framework/utils"
+
+type CreatePaymentSessionBody = {
+  provider_id: string
+  data?: Record<string, unknown>
+}
+
+const defaultPaymentCollectionFields = [
+  "id",
+  "currency_code",
+  "amount",
+  "*payment_sessions",
+]
+
+export async function POST(req: MedusaStoreRequest, res: MedusaResponse) {
+  const collectionId = req.params.id
+
+  const { provider_id, data } = req.body as CreatePaymentSessionBody
+
+  if (!provider_id || typeof provider_id !== "string") {
+    throw new MedusaError(
+      MedusaError.Types.INVALID_DATA,
+      "provider_id is required to create a payment session"
+    )
+  }
+
+  try {
+    await createPaymentSessionsWorkflow(req.scope).run({
+      input: {
+        payment_collection_id: collectionId,
+        provider_id,
+        customer_id: req.auth_context?.actor_id,
+        data,
+      },
+    })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw new MedusaError(
+      MedusaError.Types.UNEXPECTED_STATE,
+      `Failed to create payment session for provider '${provider_id}': ${message}`
+    )
+  }
+
+  const paymentCollection = await refetchEntity({
+    entity: "payment_collection",
+    idOrFilter: collectionId,
+    scope: req.scope,
+    fields: req.queryConfig?.fields ?? defaultPaymentCollectionFields,
+  })
+
+  res.status(200).json({
+    payment_collection: paymentCollection,
+  })
+}