Live demo

Affiliate Portal
Referral links, commissions, payouts.

A single-merchant affiliate platform: affiliates share a referral link, customers buy on the public shop, and every paid order pays a commission that the owner approves and settles as a payout. This is the real frontend running as a fully static demo — every API response is generated in your browser from seeded data, so the three apps share one dataset and an order placed in the shop shows up in the portal and the console.

🛡️

Admin panel

Dashboard (GMV, commission liability, payouts due), affiliate approval and suspension, products, orders, the commission ledger, the payout queue and the business-rule settings.

Open as Sari (admin) → 🔗

Affiliate portal

Referral link and link builder, clicks-per-day chart, referred orders with masked customers, the commission ledger, balance and payout requests.

Open as Rina (affiliate) → 🛍️

Public shop

Catalogue and product pages, guest checkout, the mock payment gateway and order tracking. (/r/<code> is a server route — see the script below.)

Open as Budi (customer) →

Each app starts signed in. To see the login and registration flows, sign out — the seeded accounts are admin@affiliate.test, affiliate@affiliate.test and budi.santoso@affiliate.test, password Password1! (in the demo any password works). Everything you change stays on your device; use the ribbon’s Reset data to start over.

What to try — the money loop in five minutes

  1. Open the affiliate portal and copy Rina’s referral link (RINA2026). On a real deployment /r/<code> is a server route that records the click and sets the ref cookie for 30 days; this static demo has no server, so use the button below to drop the same cookie and land in the shop.

  2. In the shop, add a product to the cart and check out as a guest — name, email, phone, QRIS or card. Checkout reads that ref cookie and attributes the order to Rina.
  3. Pay on the mock gateway page. That is the webhook: the order flips to paid, stock drops, and a pending commission is created at the resolved rate (product override → affiliate override → 10% platform default).
  4. Back in the affiliate portal, the new order and its commission are on the dashboard. Once the 7-day hold passes the commission becomes approved and joins the available balance — the admin can also approve it early.
  5. In the admin panel, work the payout queue: mark the open request processing, then paid with a transfer reference. The affiliate’s commissions flip to paid and the balance drops. Rejecting instead releases them back to approved.

Also worth a click: approve the pending affiliate registration, suspend the active one and watch their link stop attributing, refund a paid order and watch its commission reverse, and change Settings → commission rate / hold days / minimum payout and re-run the loop.