// NO PROD JSON API (bucket B — feed is a DataTables render payload or // {"html":...}, not data) — mock until backend (see PROD_API_INVENTORY.md) // Represents: GET /payments/methods/ · AdminPaymentsController::show('methods') → methodsData() — see docs/ISYSTEM_REFERENCE.md §Batch 10.1 /* Traced Aug 2026 (architecture item 2). Saves through POST /payments/methods/config (methodConfigSave), which diffs the submitted values and records only what changed. The PSP directory this screen reads from is Payments/ProvidersController — settingsData() builds it, and the per-provider fee columns are what /payments/fees models. */ /* Payment Methods — per-brand × per-method configurations. Each config exposes: general, multi-currency list, fees, limits, and auto-approval rules (moved inside the method). */ const Methods = ({ brand }) => { window.useLocale && window.useLocale(); const T = window.T || ((k, fb) => fb || k); const { METHODS, BRANDS } = window.MOCK; const [brandFilter, setBrandFilter] = useState(brand && brand.isAll ? "all" : (brand?.id || "all")); useEffect(()=>{ setBrandFilter(brand && brand.isAll ? "all" : (brand?.id || "all")); }, [brand?.id]); const [expanded, setExpanded] = useState(null); const [editing, setEditing] = useState(null); // Top-level filters for the brand × method grid const [methodQuery, setMethodQuery] = useState(""); const [kindFilter, setKindFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const [currencyFilter, setCurrencyFilter] = useState("all"); const [providerFilter, setProviderFilter] = useState("all"); /* Column visibility — persisted to localStorage so each operator's layout sticks across sessions. Brand, Method and the row toggle remain mandatory (not hideable). */ const METHOD_COLUMNS = [ { key:"provider", label:"Provider" }, { key:"status", label:"Status" }, { key:"currencies", label:"Currencies" }, { key:"min_max", label:"Min / Max" }, { key:"dep_fee", label:"Deposit fee" }, { key:"with_fee", label:"Withdraw fee" }, { key:"auto_approve", label:"Auto-approve ≤" }, ]; const [methodColsVisible, setMethodColsVisible] = useState(() => { try { const stored = pbStore.get("pb-methods-columns", null); if (stored && typeof stored === "object") return stored; } catch (_e) {} return Object.fromEntries(METHOD_COLUMNS.map(c => [c.key, true])); }); useEffect(() => { pbStore.set("pb-methods-columns", methodColsVisible); }, [methodColsVisible]); const [colsPopoverOpen, setColsPopoverOpen] = useState(false); const isColOn = (k) => methodColsVisible[k] !== false; const toggleCol = (k) => setMethodColsVisible(s => ({ ...s, [k]: !isColOn(k) })); const providers = (window.getAllProviders && window.getAllProviders()) || []; const rowProvider = (r) => window.lookupMethodProvider?.({ brand: r.brand, methodId: r.method.id, methodName: r.method.name }) || null; /* Role-access state — per brand × method row, which network roles are BLOCKED from using this method. Seeds from MOCK.METHOD_ROLE_BLOCKS (global per method) the first time a row is toggled. */ const ROLES = window.MOCK.ROLES || []; const defaultBlocksFor = (methodId) => window.MOCK.METHOD_ROLE_BLOCKS?.[methodId] || []; const [roleBlocks, setRoleBlocks] = useState({}); const getBlocks = (row) => roleBlocks[row.id] ?? defaultBlocksFor(row.method.id); const setRowBlocks = (row, next) => setRoleBlocks(prev => ({ ...prev, [row.id]: next })); const toggleRoleBlock = (row, roleId) => { const r = ROLES.find(r => r.id === roleId); if (r && r.forced_on) return; // Admin is the only tier locked on const cur = getBlocks(row); const next = cur.includes(roleId) ? cur.filter(x => x !== roleId) : [...cur, roleId]; setRowBlocks(row, next); }; const bulkSetAllRoles = (row, block) => { const next = block ? ROLES.filter(r => !r.forced_on).map(r => r.id) : []; setRowBlocks(row, next); }; const ALL_CURRENCIES = [ { code:"EUR", symbol:"€", label:"Euro" }, { code:"USD", symbol:"$", label:"US Dollar" }, { code:"GBP", symbol:"£", label:"British Pound" }, { code:"BRL", symbol:"R$", label:"Brazilian Real" }, { code:"TRY", symbol:"₺", label:"Turkish Lira" }, { code:"CAD", symbol:"C$", label:"Canadian Dollar" }, { code:"MXN", symbol:"$", label:"Mexican Peso" }, { code:"INR", symbol:"₹", label:"Indian Rupee" }, { code:"ARS", symbol:"$", label:"Argentine Peso" }, { code:"LBP", symbol:"ل.ل", label:"Lebanese Pound" }, { code:"BOB", symbol:"Bs", label:"Bolivian Boliviano" }, { code:"PYG", symbol:"₲", label:"Paraguayan Guaraní" }, ]; // Seed per-brand × per-method config (deterministic) const methodRows = []; BRANDS.forEach((b, bi) => { METHODS.forEach((m, mi) => { // Each skin is configured with exactly one currency (CMS → Skins), so // a method defaults to accepting only that currency. The Currencies // tab still lets an operator manually enable more for skins that // genuinely go multi-currency later. const currencies = [b.currency]; methodRows.push({ id: `${b.id}-${m.id}`, brand: b, method: m, enabled: !(bi === 2 && mi === 3), currencies, min: 10 + mi*5, max: 50000 + mi*5000, deposit_fee: (1 + mi*0.2).toFixed(2), withdraw_fee: (1.5 + mi*0.25).toFixed(2), success_rate: 98.4 - mi*0.8 - bi*0.2, volume_30d: Math.round(80000 + mi*25000 + bi*10000), auto_approve_under: 1500 - mi*100, auto_decline_under_kyc: true, review_threshold: 3000 + mi*500, rules_active: 3, }); }); }); const mq = methodQuery.trim().toLowerCase(); const filtered = methodRows.filter(r => { if (brandFilter !== "all" && r.brand.id !== brandFilter) return false; if (kindFilter !== "all" && r.method.kind !== kindFilter) return false; if (statusFilter === "enabled" && !r.enabled) return false; if (statusFilter === "disabled" && r.enabled) return false; if (currencyFilter !== "all" && !r.currencies.includes(currencyFilter)) return false; if (providerFilter !== "all") { const prov = rowProvider(r); if (!prov || !prov.chain.some(p => p.id === providerFilter)) return false; } if (mq) { const hay = [r.method.name, r.method.kind, r.brand.name, r.brand.short].join(" ").toLowerCase(); if (!hay.includes(mq)) return false; } return true; }); const anyMethodFilter = brandFilter !== "all" || kindFilter !== "all" || statusFilter !== "all" || currencyFilter !== "all" || providerFilter !== "all" || methodQuery !== ""; const clearMethodFilters = () => { // Don't unlock the brand when the top-right selector is forcing the // page to a single brand — that's an auto-login, not a filter. if (brand && brand.isAll) setBrandFilter("all"); setKindFilter("all"); setStatusFilter("all"); setCurrencyFilter("all"); setProviderFilter("all"); setMethodQuery(""); }; const METHOD_KINDS = Array.from(new Set(METHODS.map(m => m.kind))); const ALL_METHOD_CURRENCIES = Array.from(new Set(methodRows.flatMap(r => r.currencies))).sort(); const getSymbol = (code) => (ALL_CURRENCIES.find(c=>c.code===code)?.symbol) || code; const fmtM = (n, cur) => `${getSymbol(cur)}${n.toLocaleString()}`; return (
{T("page.methods","Payment methods")} The catalog of every payment method offered to players, per brand. Each row is a unique brand × method configuration with its own currencies, fees, limits, auto-approval rules and role access. Expand a row to see the inline summary, or click Edit to open the full editor (General · Currencies · Fees · Limits · Roles · Auto-approval rules · PSP route).
Per-brand method configs · currencies, fees, limits and auto-approval rules
Method — the payment instrument shown to the player (Visa, Mastercard, Apple Pay, Bank wire, Skrill, Crypto…)., <>Provider — the PSP chain (Stripe → Adyen → Worldpay…) that processes a transaction of this method. Edited centrally in Settings → Routes & cascading., <>Currencies — every accepted currency. Each one has its own Min / Max limits and its own fee overrides., <>Limits — money caps per period (Daily / Weekly / Monthly · Min / Max) and count caps (Number of deposits, failed deposits, withdrawals, failed withdrawals)., <>Auto-approval — transactions at or below the threshold skip the manual review queue., ]}> The master catalog of every payment method offered to players, per brand. Each row is a unique brand × method configuration; click Edit to open the full editor (General · Currencies · Fees · Limits · Roles · Auto-approval rules · PSP route). {/* Unified filter row — search / brand / kind / status / currency / provider / column visibility. The dedicated Brand chip row was removed: a single dropdown is consistent with the rest of the backoffice and works in the same auto-login pattern (locked when the top-right brand selector picks a single tenant). */}
setMethodQuery(e.target.value)} placeholder={T("lbl.search","Search") + "…"} style={{width:"100%", border:"none", outline:"none", padding:"8px 12px 8px 34px", fontSize:12.5, background:"transparent", fontFamily:"inherit", borderRadius:10}}/>
{/* Brand filter — same dropdown shape as every other filter. When the top-right selector locks a brand we show a locked chip instead so the operator understands they're in auto-login mode. */}
Brand Show only the methods configured for one brand. Hidden / locked when the top-right brand selector already picks a single tenant (it auto-logs you in to that tenant and overrides every per-page brand filter). {brand && !brand.isAll ? ( {brand.name} ) : ( )}
{T("lbl.kind","Kind")} Filter by the method family: Card, Wallet, Bank, Voucher, Crypto. Each kind has its own typical fees and settlement speed.
{T("lbl.status","Status")} Enabled rows accept new transactions. Disabled rows reject every new attempt but stay on file so you can re-enable later without losing the configuration.
{T("lbl.currency","Currency")} Shows only methods that accept the selected currency. A single method can support several currencies — each tab in the editor sets its own limits / fees.
Provider Limit to methods whose routing chain (Settings → Routes & cascading) contains the selected PSP at any position. Useful to spot which methods rely on a degraded or paused PSP.
{anyMethodFilter && ( )} {/* Column-visibility popover — gear icon on the right edge of the filter row, matching the Transactions page pattern. */}
Hide columns you don't need to free up table width. Brand, Method and Actions stay mandatory. Your layout is saved per operator (localStorage) so it sticks across sessions. {colsPopoverOpen && ( <>
setColsPopoverOpen(false)}/>
Show columns
{METHOD_COLUMNS.map(c => ( ))}
)}
{/* Table */}
{isColOn("provider") && } {isColOn("status") && } {isColOn("currencies") && } {isColOn("min_max") && } {isColOn("dep_fee") && } {isColOn("with_fee") && } {isColOn("auto_approve") && } {filtered.map(row => ( setExpanded(expanded===row.id?null:row.id)} style={{cursor:"pointer"}} className={expanded===row.id?"selected":""}> {isColOn("provider") && (() => { const prov = window.lookupMethodProvider?.({ brand: row.brand, methodId: row.method.id, methodName: row.method.name }); return ( ); })()} {isColOn("status") && ( )} {isColOn("currencies") && ( )} {isColOn("min_max") && } {isColOn("dep_fee") && } {isColOn("with_fee") && } {isColOn("auto_approve")&& } {expanded === row.id && ( )} ))}
Brand MethodProviderStatusCurrenciesMin / MaxDep feeWith feeAuto-approve ≤
{row.brand.short} {row.brand.name} {row.method.name} {row.method.kind} {prov ? ( {prov.chain.slice(0,3).map((p, i) => ( {p.name} {i < Math.min(prov.chain.length, 3) - 1 && →} ))} {prov.chain.length > 3 && +{prov.chain.length - 3}} ) : —} {row.enabled ? Enabled : Disabled}
{row.currencies.map(c => ( {c} ))}
{fmtM(row.min, row.brand.currency)} — {fmtM(row.max, row.brand.currency)}{row.deposit_fee}%{row.withdraw_fee}%{fmtM(row.auto_approve_under, row.brand.currency)}e.stopPropagation()}>
isColOn(c.key)).length + 1} style={{padding:0, background:"var(--n-25)"}}>
{/* General limits summary — read-only preview. Click "Edit method" to adjust D/W/M min/max. */}
General limits — {row.brand.name} · {row.method.name} ({row.brand.currency})
{[10, 10, 10].map((v, j) => ( ))} {[2000, 10000, 30000].map((v, j) => ( ))} {[20, 20, 20].map((v, j) => ( ))} {[3000, 15000, 45000].map((v, j) => ( ))}
Minimum Maximum
Daily Weekly Monthly Daily Weekly Monthly
Deposit {fmtM(v, row.brand.currency)}{fmtM(v, row.brand.currency)}
Withdrawal {fmtM(v, row.brand.currency)}{fmtM(v, row.brand.currency)}
{/* Auto-approval quick view */}
Auto-approval rules
Auto-approve when amount ≤ {fmtM(row.auto_approve_under, row.brand.currency)}
Manual review above {fmtM(row.review_threshold, row.brand.currency)}
Auto-decline if KYC pending ON
Custom rules {row.rules_active} active
{/* Role access — bulk toggle which network tiers can use this method. Only Admin is forced-on (platform-level operators always see every method); every other tier can be turned off. */} {(() => { const blocks = getBlocks(row); const blockedCount = blocks.length; const togglableCount = ROLES.filter(r => !r.forced_on).length; return (
Role access — who can use {row.method.name} on {row.brand.short}
{blockedCount === 0 ? "Available to every role in the network" : `${blockedCount} of ${togglableCount} roles blocked`}
{ROLES.map(r => { const blocked = blocks.includes(r.id); const forced = r.forced_on; const on = forced || !blocked; return (
!forced && toggleRoleBlock(row, r.id)}> {r.label} {forced && locked}
); })}
); })()}
{/* Edit modal */} {editing && }
); }; /* ------------ Edit modal component ------------ */ const EditMethodModal = ({ editing, setEditing, ALL_CURRENCIES, getSymbol, fmtM }) => { const [tab, setTab] = useState(editing._tab || "general"); const [currencies, setCurrencies] = useState(editing.currencies); const [activeCur, setActiveCur] = useState(editing.currencies[0]); /* Role access — local state seeded from METHOD_ROLE_BLOCKS (global per- method default); "blocked" means the role cannot use this method. */ const MROLES = window.MOCK?.ROLES || []; const defaultRoleBlocks = window.MOCK?.METHOD_ROLE_BLOCKS?.[editing.method.id] || []; const [blockedRoles, setBlockedRoles] = useState(defaultRoleBlocks); const toggleRole = (roleId) => { const r = MROLES.find(x => x.id === roleId); if (r && r.forced_on) return; // Admin is the only tier locked on setBlockedRoles(prev => prev.includes(roleId) ? prev.filter(x => x !== roleId) : [...prev, roleId]); }; const roleAllOn = () => setBlockedRoles([]); const roleAllOff = () => setBlockedRoles(MROLES.filter(r => !r.forced_on).map(r => r.id)); const toggleCur = (code) => { setCurrencies(curs => { const next = curs.includes(code) ? curs.filter(c=>c!==code) : [...curs, code]; if (!next.includes(activeCur) && next.length) setActiveCur(next[0]); return next; }); }; // editing.min/max/auto_approve_under are stored in the method's own brand // currency, not EUR — convert from that base into whichever currency chip // is active, rather than always pivoting off a raw EUR-per-unit table // (that treated every base value as if it were EUR, blowing up ARS/LBP/ // BOB/PYG amounts by 3-5 orders of magnitude). const scale = (v) => Math.round(window.fxConvert(v, editing.brand.currency, activeCur)); return (
setEditing(null)}>
e.stopPropagation()}> {/* Header */}
{editing.brand.short}
Edit method · {editing.brand.name}
{editing.method.name} {editing.method.kind}
{/* Tabs */}
{[ ["general","General","Status of the method, base-currency min / max, and whether it accepts deposits and / or withdrawals."], ["currencies",`Currencies · ${currencies.length}`,"Which currencies this method accepts on this brand. Each currency carries its own min / max overrides (fee overrides live in the Fees tab)."], ["fees","Fees","Deposit fee, withdrawal fee, and per-currency fee overrides charged by the operator on top of the PSP fee."], ["limits","Limits","Money limits per period (Daily / Weekly / Monthly · Min / Max) and count limits (Number of deposits, failed deposits, withdrawals, failed withdrawals) per period."], ["roles","Roles","Which network tiers (Master / Promoter / Agent / Player) are allowed to use this method. Admin is always on."], ["rules","Auto-approval rules","Conditions under which a deposit / withdrawal is auto-approved without operator review (e.g. amount ≤ €X, player is Gold, KYC complete)."], ["psp_route","PSP route","Which PSP chain is used to route transactions of this method, read-only — edited in Settings → Routes & cascading."], ].map(([k,label,hint])=>( ))}
{/* ========= GENERAL ========= */} {tab === "general" && (
The {editing.method.name} method on {editing.brand.name}. This is the per-brand × per-method record the routing engine reads at transaction time. Set the display name shown to the player, toggle Status to enable / disable instantly, set base-currency Min / Max to clamp every transaction (per-currency caps live in the Currencies tab); pick whether Deposit and / or Withdrawal are allowed; decide whether players can apply a Promo code when paying with this method.
Identity
Status & amounts (base: {editing.brand.currency})
Availability
Promotions
)} {/* ========= CURRENCIES ========= */} {tab === "currencies" && (
Pick which currencies this method accepts on this brand. Each enabled currency exposes its own Min / Max (here) and its own deposit / withdrawal fee (in the Fees tab). Disabling a currency stops the method from appearing on the player frontend for that currency.
Enabled currencies
This method can accept transactions in any of the selected currencies. Each currency gets its own min/max overrides — fee overrides live in the Fees tab.
{ALL_CURRENCIES.map(c => { const on = currencies.includes(c.code); return ( ); })}
{currencies.length > 0 && (
Per-currency overrides
{currencies.map(code => ( ))}
Per-currency fee overrides live in the Fees tab.
)}
)} {/* ========= FEES ========= */} {tab === "fees" && (
The fee the operator charges on top of the PSP fee. Two parts: a percentage of the amount + a fixed flat charge per transaction. Effective fee = pct × amount + fixed. The Charged to dropdown decides whether the fee comes out of the player's balance (Player) or the operator's revenue (Operator).
Base fees — applied unless per-currency override exists
Fee recipient
)} {/* ========= LIMITS ========= Global per-method D/W/M min/max for deposit and withdrawal. */} {tab === "limits" && (
General limits — money caps in this currency per period. Daily / Weekly / Monthly windows reset at 00:00 UTC. Max blocks transactions above the cap; Min blocks transactions below., <>Count limits — how many transactions a player can make per period. Failed-count windows are useful for cards: a player whose Visa fails 5 times a day is usually doing fraud, not making a mistake., ]}> Both money limits and count limits live here. Money limits are per currency (switch with the chips below); count limits are global per method. Crossing a limit blocks the next transaction on that method.
Limits in
Switch the active currency tab to view / edit limits for that currency. Each currency keeps its own min / max per period.
{currencies.map(code => ( ))}
{/* General D/W/M min/max — applies to every account on this method. */}
General limits — {editing.method.name} on {editing.brand.name} · {activeCur}
{[10, 10, 10].map((v, j) => ( ))} {[2000, 10000, 30000].map((v, j) => ( ))} {[20, 20, 20].map((v, j) => ( ))} {[3000, 15000, 45000].map((v, j) => ( ))}
Minimum Maximum
Daily Weekly Monthly Daily Weekly Monthly
Deposit
Withdrawal
Values shown in {activeCur}. Switch currency above to edit per-currency limits.
{/* Count limits — per period (daily / weekly / monthly). Includes both successful and FAILED counts so the engine can throttle a player who keeps retrying a busted card. */}
Count limits — number of transactions per period
{[ { id:"n_deposits", label:"Number of deposits", icon:"arrow_down", color:"var(--ok-600)", def:[20, 60, 200] }, { id:"n_failed_deposits", label:"Number of failed deposits", icon:"x", color:"var(--err-600)", def:[5, 15, 40] }, { id:"n_withdrawals", label:"Number of withdrawals", icon:"arrow_up", color:"var(--purple-500)", def:[5, 15, 50] }, { id:"n_failed_withdrawals",label:"Number of failed withdrawals",icon:"x", color:"var(--err-600)", def:[3, 10, 25] }, ].map(row => ( {row.def.map((v, j) => ( ))} ))}
Daily Weekly Monthly
{row.label}
Failed-count windows are useful for cards: a player whose Visa fails 5 times in a day is usually doing fraud, not making a mistake. Crossing a count limit blocks the next transaction on that method.
)} {/* ========= ROLES ========= Per-method bulk toggle: which network tiers can use this method. Only Admin is forced-on. Master, Promoter, Agent, through Player each flip independently. */} {tab === "roles" && (
Which network tiers can use this method on this brand. The White Label pyramid is Admin → Master → Promoter → Agent → Player. Admin is always on; every other tier can be toggled. Blocking a tier also blocks every tier under it (e.g. blocking Agent also blocks Player accounts under that Agent).
Role access — {editing.method.name} on {editing.brand.short}
Turn the method on or off for each tier of the White Label pyramid. Admin is always on — every other tier can be toggled.
{MROLES.map(r => { const blocked = blockedRoles.includes(r.id); const forced = r.forced_on; const on = forced || !blocked; return (
!forced && toggleRole(r.id)}>
{r.label} {forced && locked on}
{r.desc}
); })}
{blockedRoles.length === 0 ? "Available to every role in the network." : `${blockedRoles.length} of ${MROLES.filter(r => !r.forced_on).length} togglable roles blocked.`}
)} {/* ========= RULES ========= */} {tab === "rules" && (
Conditions under which a transaction skips the manual-review queue and gets approved automatically. The simplest rule is an amount threshold: everything at or below the threshold auto-approves; everything above it lands in To-Confirm for an operator to look at. Stricter rules (KYC complete, player Gold-tier, country allowlist) can be layered on the same record in v2. On a multi-currency method each enabled currency keeps its own threshold — switch the chip below to set it per currency, same as Limits. {currencies.length > 1 && (
Threshold in
{currencies.map(code => ( ))}
)}
General auto-approve thresholdTransactions whose amount is at or below this value skip the manual-review queue entirely and are recorded as Balanced (deposits) or sent to the PSP (withdrawals) immediately. Above the threshold the transaction lands in To-Confirm for an operator to approve or reject.
Transactions at or below this amount skip manual review.
{activeCur}
)} {/* ========= PSP ROUTE ========= */} {tab === "psp_route" && (() => { const all = window.MOCK_ROUTES || []; const matches = all.filter(r => (r.method === editing.method.name || r.method === "any") && (r.brand === editing.brand.name || r.brand === "any") ); return (
Read-only view of which PSP chain processes this method on this brand. The chain (1st PSP → 2nd → 3rd) is the operator's ranking; on failure the engine cascades to the next position. Routes are edited centrally in Settings → Routes & cascading — same record, just surfaced here so you can audit it from inside the method.
PSP route
Read-only view of the provider chains that apply to {editing.method.name} on {editing.brand.name}. Edit these in Settings → Routes & cascading.
{matches.length === 0 ? (
No routes configured for this method on this brand yet. Add one in Settings → Routes & cascading.
) : ( {matches.map(r => ( ))}
Scope Currency Amount band Provider chain Cascade triggers Mode Status
{r.brand === "any" ? "All brands" : r.brand} {r.currency === "any" ? "Any" : r.currency} {r.amount}
{r.chain.map((p, i) => ( {p}{r.weighted && r.weights[i] != null ? ` · ${r.weights[i]}%` : ""} {i < r.chain.length - 1 && →} ))}
{r.triggers.join(", ")} {r.mode} {r.status === "active" ? Active : Paused}
)}
); })()}
{/* Footer */}
{T("btn.deleteMethod","Delete method")}
); }; window.Methods = Methods;