@paytree/medusa-payment-paytree 0.1.0

package/storefront/components/paytree-method-icon.tsx

@@ -0,0 +1,106 @@
+import React from "react"
+
+/**
+ * SVG icons for each Paytree method shown in the storefront method picker.
+ * Generic rails (card, bank transfer, crypto) use line glyphs that inherit the
+ * surrounding text color; brand methods use a small colored badge so the set
+ * stays consistent and recognizable.
+ */
+
+type Badge = { bg: string; fg: string; text: string; size?: number }
+
+const BADGES: Record<string, Badge> = {
+  paypal: { bg: "#003087", fg: "#ffffff", text: "PP" },
+  klarna: { bg: "#FFB3C7", fg: "#0A0A0A", text: "K." },
+  ideal: { bg: "#CD0067", fg: "#ffffff", text: "iD" },
+  bancontact: { bg: "#005498", fg: "#FFD800", text: "BC" },
+  trustly: { bg: "#0EE06E", fg: "#0A0A0A", text: "T" },
+  kakaopay: { bg: "#FFCD00", fg: "#3C1E1E", text: "pay", size: 7 },
+  p24: { bg: "#D3132B", fg: "#ffffff", text: "P24", size: 7 },
+  blik: { bg: "#000000", fg: "#E61E2A", text: "blik", size: 6 },
+}
+
+const BadgeIcon = ({ bg, fg, text, size = 9 }: Badge) => (
+  <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
+    <rect x="1" y="4" width="22" height="16" rx="3" fill={bg} />
+    <text
+      x="12"
+      y="12.5"
+      fill={fg}
+      fontSize={size}
+      fontWeight="700"
+      fontFamily="Inter, system-ui, sans-serif"
+      textAnchor="middle"
+      dominantBaseline="central"
+    >
+      {text}
+    </text>
+  </svg>
+)
+
+const CardIcon = () => (
+  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <rect
+      x="2"
+      y="5"
+      width="20"
+      height="14"
+      rx="2.5"
+      stroke="currentColor"
+      strokeWidth="1.6"
+    />
+    <path d="M2 9.5h20" stroke="currentColor" strokeWidth="1.6" />
+    <path
+      d="M5.5 15.5h4"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+const BankIcon = () => (
+  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M12 3 3 7.5h18L12 3Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 10v6M9.3 10v6M14.7 10v6M19 10v6M3 19.5h18"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+const CryptoIcon = () => (
+  <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
+    <circle cx="12" cy="12" r="9.2" fill="#F7931A" />
+    <text
+      x="12"
+      y="12.5"
+      fill="#ffffff"
+      fontSize="11"
+      fontWeight="700"
+      fontFamily="Inter, system-ui, sans-serif"
+      textAnchor="middle"
+      dominantBaseline="central"
+    >
+      ₿
+    </text>
+  </svg>
+)
+
+const PaytreeMethodIcon = ({ method }: { method: string }) => {
+  if (method === "card") return <CardIcon />
+  if (method === "wire") return <BankIcon />
+  if (method === "crypto") return <CryptoIcon />
+  const badge = BADGES[method]
+  if (badge) return <BadgeIcon {...badge} />
+  return <CardIcon />
+}
+
+export default PaytreeMethodIcon

package/storefront/lib/paytree.ts

@@ -0,0 +1,23 @@
+"use server"
+
+import { sdk } from "@lib/config"
+
+type PaytreeMethod = {
+  method: string
+  label: string
+}
+
+/**
+ * Fetch the Paytree methods the admin has enabled, with their (possibly
+ * overridden) labels. Returns [] if Paytree isn't configured or the request
+ * fails, so the checkout can degrade gracefully.
+ */
+export async function listPaytreeMethods(): Promise<PaytreeMethod[]> {
+  return sdk.client
+    .fetch<{ methods: PaytreeMethod[] }>("/store/paytree/methods", {
+      method: "GET",
+      next: { tags: ["paytree-methods"], revalidate: 60 },
+    })
+    .then((res) => res.methods ?? [])
+    .catch(() => [])
+}