62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T4de0,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type ExpressMethod = "wallet" | "card" | "later" | "bank"; export interface ExpressLine { name: string; price: number; qty: number; image: string; } export interface ExpressCheckoutButtonsProps { title?: string; /** Which express options to offer, in order. */ methods?: ExpressMethod[]; lines?: ExpressLine[]; /** Shipping options shown in the payment sheet. */ shipping?: { id: string; label: string; eta: string; price: number }[]; currency?: string; /** Called after the shopper confirms; resolve to finish, reject to show an error. */ onPay?: (method: ExpressMethod, total: number) => Promise | void; onEmail?: (email: string) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", sheet: "#1A1A1A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", scrim: "rgba(0,0,0,0.55)", field: "#0F0F0F", }, light: { bg: "#FFFFFF", card: "#F7F7F7", sheet: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", scrim: "rgba(0,0,0,0.3)", field: "#FFFFFF", }, }; const LINES: ExpressLine[] = [ { name: "Wireless Earbuds", price: 129, qty: 1, image: "/demo/wireless-earbuds.webp" }, { name: "Insulated Bottle", price: 39, qty: 2, image: "/demo/insulated-water-bottle.webp" }, ]; const SHIPPING = [ { id: "std", label: "Standard", eta: "Arrives Thu, Nov 12", price: 0 }, { id: "exp", label: "Express", eta: "Arrives tomorrow", price: 12 }, ]; const BANKS = ["North Bank", "Harbor Credit Union", "Pine Savings", "Meridian"]; // Neutral icons; swap in real wallet marks where your payment provider's brand rules allow it. function MethodIcon({ m }: { m: ExpressMethod }) { const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, "aria-hidden": true }; if (m === "wallet") return ( ); if (m === "card") return ( ); if (m === "later") return ( ); return ( ); } const LABELS: Record = { wallet: "Wallet", card: "Saved card", later: "Pay in 4", bank: "Bank" }; const money = (n: number, c: string) => `${c}${n.toFixed(2)}`; export function ExpressCheckoutButtons({ title = "Express checkout", methods = ["wallet", "card", "later", "bank"], lines = LINES, shipping = SHIPPING, currency = "$", onPay, onEmail, theme = "dark", className }: ExpressCheckoutButtonsProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [method, setMethod] = React.useState(null); const [ship, setShip] = React.useState(shipping[0]?.id ?? ""); const [bank, setBank] = React.useState(null); const [state, setState] = React.useState<"review" | "busy" | "done" | "error">("review"); const [email, setEmail] = React.useState(""); const [emailSent, setEmailSent] = React.useState(false); const sheetRef = React.useRef(null); const openerRef = React.useRef(null); const subtotal = lines.reduce((t, l) => t + l.price * l.qty, 0); const shipCost = shipping.find((s) => s.id === ship)?.price ?? 0; const total = subtotal + shipCost; const quarter = Math.round((total / 4) * 100) / 100; const close = React.useCallback(() => { setMethod(null); setTimeout(() => openerRef.current?.focus(), 0); }, []); React.useEffect(() => { if (!method) return; const t = setTimeout(() => sheetRef.current?.querySelector("[data-autofocus]")?.focus(), 40); const onKey = (e: KeyboardEvent) => e.key === "Escape" && state !== "busy" && close(); window.addEventListener("keydown", onKey); return () => { clearTimeout(t); window.removeEventListener("keydown", onKey); }; }, [method, state, close]); const start = (m: ExpressMethod, el: HTMLButtonElement) => { openerRef.current = el; setMethod(m); setState("review"); setBank(null); }; const confirm = async () => { if (!method) return; setState("busy"); try { await Promise.all([onPay?.(method, total), new Promise((r) => setTimeout(r, 1300))]); setState("done"); } catch { setState("error"); } }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const ready = method !== "bank" || !!bank; return (

{title}

{money(subtotal, currency)}

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */} {l.qty > 1 && ( ×{l.qty} )}

= 4 ? "grid-cols-2" : methods.length === 3 ? "grid-cols-3" : "grid-cols-1")}> {methods.map((m, i) => ( ))}

Address and payment come from your account. Review before you pay.

{emailSent ? (

Continuing as {email.trim()}…

) : ( )}

{/* Payment sheet */} {method && ( e.target === e.currentTarget && state !== "busy" && close()} > )}

); } function Row({ label, value, p }: { label: string; value: string; p: (typeof PALETTES)["dark"] }) { return (

{label} {value}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/express-checkout-buttons/express-checkout-buttons.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]