// NekoShop — pages: Cart, Checkout, Success const { useState: useStateC, useEffect: useEffectC, useMemo: useMemoC, useRef: useRefC } = React; // ────────────────────────────────────────────────────────────────── // Helper: build a synthetic price for a total in any currency // ────────────────────────────────────────────────────────────────── function totalAs(total, currency) { if (currency === "USD") return { idr: 0, usd: total, robux: 0 }; if (currency === "Robux") return { idr: 0, usd: 0, robux: total }; return { idr: total, usd: 0, robux: 0 }; } // ────────────────────────────────────────────────────────────────── // CART // ────────────────────────────────────────────────────────────────── function CartPage() { const { go } = useRouter(); const { currency } = useCurrency(); const { items, setQty, remove, clear } = useCart(); const data = window.NEKO_DATA; const lines = items.map(it => { const p = data.products.find(x => x.id === it.id); return p ? { ...it, product: p } : null; }).filter(Boolean); const key = priceKey(currency); const subtotal = lines.reduce((a, l) => a + effectivePrice(l.product, currency).price[key] * l.qty, 0); const total = subtotal; return (
{e.preventDefault();go("/");}}>NekoShop / Cart

Your cart

{lines.length === 0 ? "Empty" : `${lines.length} ${lines.length === 1 ? "system" : "systems"}`}
{lines.length === 0 ? (
Nothing here yet
Your cart is empty.
Pick something out — there are 24 systems to choose from.
go("/browse")}>Browse the catalog →
) : (
{lines.map(l => ( ))}
)}
); } function Row({ label, value, muted }) { return (
{label} {value}
); } function CartLine({ line, setQty, remove, currency, go }) { const data = window.NEKO_DATA; const cat = data.cats[line.product.cat]; const hue = data.hue[line.product.cat]; const key = priceKey(currency); return (
go(`/p/${line.product.id}`)} style={{ cursor: "pointer" }}> {line.product.video && line.product.video.kind === "youtube" ? (
) : ( )}
{cat.label}
go(`/p/${line.product.id}`)} style={{ fontSize: 16, fontWeight: 600, cursor: "pointer", letterSpacing: "-0.01em" }}> {line.product.name}
v{line.product.version} · {line.product.creator}
setQty(line.id, q)} />
{formatPrice(totalAs(effectivePrice(line.product, currency).price[key] * line.qty, currency), currency)}
{line.qty > 1 ? (
× {line.qty}
) : ( effectivePrice(line.product, currency).isEvent && (
{formatPrice(line.product.price, currency)}
) )}
); } function QtyStepper({ qty, setQty }) { return (
{qty}
); } // ────────────────────────────────────────────────────────────────── // CHECKOUT // ────────────────────────────────────────────────────────────────── function CheckoutPage() { const { go } = useRouter(); const { currency } = useCurrency(); const { items, clear } = useCart(); const data = window.NEKO_DATA; const cfg = window.NEKO_CONFIG; const [step, setStep] = useStateC(1); // 1: details, 2: payment const [name, setName] = useStateC(""); const [robloxUser, setRobloxUser] = useStateC(""); const [discord, setDiscord] = useStateC(""); const [payment, setPayment] = useStateC(currency === "USD" ? "paypal" : currency === "Robux" ? "robux" : "qris"); const [processing, setProcessing] = useStateC(false); // Cloudflare Turnstile refs + effect. These MUST be declared before any early // return so the hook count stays constant across renders (e.g. when the cart // empties after completing an order). const turnstileRef = useRefC(null); // DOM container const widgetIdRef = useRefC(null); // widget handle const tokenRef = useRefC(null); // most recent solved token useEffectC(() => { const cfg = window.NEKO_CONFIG; if (!cfg.turnstileSiteKey || cfg.turnstileSiteKey.includes("REPLACE")) return; if (step !== 2) return; let cancelled = false; const tryRender = () => { if (cancelled) return; if (!window.turnstile || !turnstileRef.current) { setTimeout(tryRender, 200); return; } if (widgetIdRef.current !== null) return; try { widgetIdRef.current = window.turnstile.render(turnstileRef.current, { sitekey: cfg.turnstileSiteKey, // Managed mode — renders a normal widget that auto-solves and shows a // checkbox only to borderline visitors. Token arrives via callback. retry: "auto", callback: (token) => { tokenRef.current = token; }, "expired-callback": () => { tokenRef.current = null; }, "error-callback": () => { tokenRef.current = null; }, }); } catch (err) { console.warn("Turnstile render failed:", err); } }; tryRender(); return () => { cancelled = true; }; }, [step]); // Payment method determines the displayed currency. const paymentCurrency = payment === "qris" ? "IDR" : payment === "paypal" ? "USD" : "Robux"; const payKey = priceKey(paymentCurrency); const lines = items.map(it => ({ ...it, product: data.products.find(x => x.id === it.id) })).filter(l => l.product); const subtotal = lines.reduce((a, l) => a + effectivePrice(l.product, paymentCurrency).price[payKey] * l.qty, 0); const total = subtotal; if (lines.length === 0) { return (

Nothing to check out.

Add a system first.

go("/browse")}>← Browse
); } const canContinue = name.trim() && robloxUser.trim(); // Stable per-browser fingerprint sent to the proxy Worker for spam detection. const getFingerprint = () => { try { let fp = localStorage.getItem("neko.fp"); if (!fp) { fp = (crypto.randomUUID && crypto.randomUUID()) || (Math.random().toString(36).slice(2) + Date.now().toString(36)); localStorage.setItem("neko.fp", fp); } return fp; } catch { return "unknown"; } }; // Returns the current Turnstile token. In Managed mode the widget solves // automatically and stores the token via callback; we wait up to ~10s for it // to be ready (in case the buyer clicks "I've paid" before it resolves). const getTurnstileToken = () => new Promise((resolve) => { const cfg = window.NEKO_CONFIG; if (!cfg.turnstileSiteKey || cfg.turnstileSiteKey.includes("REPLACE")) { resolve(null); return; } if (tokenRef.current) { resolve(tokenRef.current); return; } // Poll for the token for up to 10 seconds let waited = 0; const iv = setInterval(() => { if (tokenRef.current) { clearInterval(iv); resolve(tokenRef.current); return; } waited += 250; if (waited >= 10000) { clearInterval(iv); resolve(null); } }, 250); }); // Sends the order to the proxy Worker. The Worker holds the Discord webhook // URLs as encrypted secrets and verifies the Turnstile token before forwarding. const fireOrder = async (orderId) => { const cfg = window.NEKO_CONFIG; if (!cfg.apiBase) return; const turnstileToken = await getTurnstileToken(); const payload = { orderId, customer: { name, robloxUser: robloxUser.replace(/^@/, ""), discord }, payment: { method: payment, currency: paymentCurrency, total }, lines: lines.map(l => ({ id: l.product.id, name: l.product.name, qty: l.qty })), }; try { await fetch(cfg.apiBase.replace(/\/$/, "") + "/order", { method: "POST", headers: { "Content-Type": "application/json", "X-Neko-Client": getFingerprint(), "X-Turnstile-Token": turnstileToken || "", }, body: JSON.stringify(payload), }); } catch (err) { console.warn("Order proxy failed:", err); } // Turnstile tokens are single-use — clear + reset so a later order re-solves. tokenRef.current = null; try { if (window.turnstile && widgetIdRef.current !== null) window.turnstile.reset(widgetIdRef.current); } catch {} }; const completeOrder = () => { setProcessing(true); const orderId = "NK-" + Math.random().toString(36).slice(2, 7).toUpperCase() + "-" + Math.floor(Math.random() * 9000 + 1000); fireOrder(orderId); setTimeout(() => { try { localStorage.setItem("neko.lastOrder", JSON.stringify({ orderId, name, robloxUser, discord, payment, paymentCurrency, total, lines: lines.map(l => ({ id: l.product.id, name: l.product.name, qty: l.qty, price: l.product.price })), date: new Date().toISOString(), })); } catch {} clear(); go(`/success/${orderId}`); }, 1400); }; return (
{e.preventDefault();go("/");}}>NekoShop / {e.preventDefault();go("/cart");}}>Cart / Checkout
= 1} done={step > 1} />
1 ? "var(--ink)" : "var(--border)" }} /> = 2} done={false} />

Checkout

{step === 1 ? (

The system is delivered directly to your Roblox toolbox. We need your Roblox username so we can send it. Discord is recommended so you can open a ticket with your receipt.

* Required for delivery. Seller will add Neko_0men to your Roblox friends and send the package to your toolbox.

go("/cart")}>← Back to cart setStep(2)} disabled={!canContinue}>Continue to payment →
) : (
setPayment("qris")} title="QRIS" subtitle="GoPay · OVO · DANA · ShopeePay" icon={} note="For Indonesia · IDR" /> setPayment("paypal")} title="PayPal" subtitle="Friends & Family" icon={} note="International · USD" /> setPayment("robux")} title="Robux" subtitle="Buy gamepass in-game" icon={} note="In-game · R$" />
{payment === "qris" && } {payment === "paypal" && } {payment === "robux" && }
setStep(1)}>← Edit details {processing ? "Processing…" : "I've paid — confirm"}
{/* Cloudflare Turnstile — verifies the buyer is human before the order sends */}

After confirming, you'll get delivery instructions (Discord ticket + Roblox handoff).

)}
); } function StepDot({ n, label, active, done }) { return (
{done ? "✓" : n}
{label}
); } function Field({ label, value, onChange, placeholder, type = "text", prefix }) { return ( ); } function PayOpt({ active, onClick, title, subtitle, icon, note }) { return ( ); } // ────────────────────────────────────────────────────────────────── // QRIS panel — uses the real merchant QR image // ────────────────────────────────────────────────────────────────── function QrisPanel({ total }) { const cfg = window.NEKO_CONFIG; return (
QRIS — HOLLOWXNEKO_OMEN, GAMING
Step 1 — Scan

Scan with any e-wallet

Buka aplikasi GoPay, OVO, DANA, ShopeePay, LinkAja, atau mobile banking yang mendukung QRIS, lalu scan kode di samping.

Merchant
{cfg.qris.merchant}
Amount
{formatPrice(totalAs(total, "IDR"), "IDR")}
NMID
{cfg.qris.nmid}
Type
{cfg.qris.code} · Static

Penting: simpan screenshot bukti pembayaran. Kamu butuh untuk klaim di Discord ticket setelah ini.

); } // ────────────────────────────────────────────────────────────────── // PayPal panel — always shows USD // ────────────────────────────────────────────────────────────────── function PaypalPanel({ total }) { const cfg = window.NEKO_CONFIG; return (
Send to
{cfg.paypal.email}
{cfg.paypal.name} · {cfg.paypal.handle}
Amount
{formatPrice(totalAs(total, "USD"), "USD")}
Type
Friends & Family
Reference / note
NekoShop order

How to pay

  1. Open the PayPal app or paypal.com.
  2. Send ${total} USD to {cfg.paypal.email}.
  3. Choose Friends & Family if you can.
  4. Screenshot the receipt.
  5. Click I've paid — you'll get Discord steps to claim it.
); } // ────────────────────────────────────────────────────────────────── // Robux panel — always shows R$ amount // ────────────────────────────────────────────────────────────────── function RobuxPanel({ total }) { const cfg = window.NEKO_CONFIG; return (
Pay in-game
R$ {Number(total).toLocaleString("en-US")}
via gamepasses on the NekoShop store
Open store on Roblox ↗
Tip: the seller ({cfg.robloxSeller}) will verify the gamepass purchase by Roblox username, so make sure yours matches the one you typed in step 1.

How to pay

  1. Click Open store on Roblox →
  2. Find the gamepass that matches R$ {Number(total).toLocaleString("en-US")}.
  3. Purchase it on your Roblox account.
  4. Screenshot the receipt.
  5. Click I've paid below.
); } function QrisIcon() { return ( {[[0,0,3,3],[11,0,3,3],[0,11,3,3],[5,5,1,1],[7,5,2,2],[5,8,2,2],[8,8,1,1],[10,8,1,1],[10,10,1,1]].map((r,i) => )} {[[1,1,1,1],[12,1,1,1],[1,12,1,1]].map((r,i) => )} ); } function PaypalIcon() { return ( ); } function RobuxIcon({ inverted }) { const fg = inverted ? "var(--bg)" : "var(--ink)"; return ( R$ ); } // ────────────────────────────────────────────────────────────────── // SUCCESS — Discord delivery instructions + install guide // ────────────────────────────────────────────────────────────────── function SuccessPage({ id }) { const { go } = useRouter(); const cfg = window.NEKO_CONFIG; const data = window.NEKO_DATA; const order = useMemoC(() => { try { return JSON.parse(localStorage.getItem("neko.lastOrder") || "null"); } catch { return null; } }, [id]); const paymentLabel = order?.payment === "paypal" ? "PayPal" : order?.payment === "robux" ? "Robux" : "QRIS"; const totalDisplay = order ? formatPrice(totalAs(order.total, order.paymentCurrency || "IDR"), order.paymentCurrency || "IDR") : "—"; return (
{/* Hero */}
Payment marked as sent

Thanks{order?.name ? `, ${order.name.split(" ")[0]}` : ""}.

One more step — claim your package on Discord and we'll send it straight to your Roblox toolbox.

{/* Order receipt */}
Order ID
{id || order?.orderId || "NK-—"}
Paid via
{paymentLabel}
Total
{totalDisplay}
{order?.lines?.length > 0 && (
{order.lines.map(l => { const p = data.products.find(x => x.id === l.id); const hue = p ? data.hue[p.cat] : 22; return (
{p && p.video && p.video.kind === "youtube" ? (
) : ( )}
{l.name}
Qty {l.qty} · Pending delivery
Awaiting claim
); })}
)}
{/* Delivery flow */}
Click below to join nomenfams. We coordinate every delivery from there.} cta={ Open Discord invite ↗} /> In the #ticket channel, open a new ticket so a staff member can verify your order.} cta={ Open ticket channel ↗} /> In the ticket, paste your payment receipt screenshot and your Roblox username{order?.robloxUser ? <> (@{order.robloxUser.replace(/^@/, "")}) : ""}.} /> Add {cfg.robloxSeller} on Roblox} body={Send the seller a friend request on Roblox. The package will be delivered to your toolbox.} />
{/* Install guide */}
Open Game Settings → Security. Enable HTTP Requests and API Services. Most systems require this.} />
Watch the configuration tutorial
Each system has a step-by-step video on the Neko_Omen YouTube channel.
Open YouTube ↗
go("/")}>← Home go("/browse")}>Keep shopping
); } const discordBtn = { display: "inline-flex", alignItems: "center", gap: 10, marginTop: 14, padding: "10px 16px", borderRadius: 999, background: "var(--accent)", color: "white", textDecoration: "none", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 500, }; function DeliveryStep({ n, title, body, cta }) { return (
{n}
{title}
{body}
{cta && cta}
); } function InstallStep({ n, title, body }) { return (
Step {n}
{title}
{body}
); } function DiscordIcon() { return ( ); } function YoutubeIcon() { return (
); } Object.assign(window, { CartPage, CheckoutPage, SuccessPage });