CutLuy API

curl https://cutluy.com/v1/payments/PUETcMUOKStjZsCb6zAl8kg9fMRGM85x \
  -H "Authorization: Bearer ck_live_..."

{
  "id": "PUETcMUOKStjZsCb6zAl8kg9fMRGM85x",
  "status": "pending",
  "amount": "1.50",
  "currency": "USD",
  "reference_id": "order_1024",
  "qr_string": "00020101021229...6304AB12",
  "checkout_url": "https://cutluy.com/pay/PUETcMUOKStjZsCb6zAl8kg9fMRGM85x",
  "approved_at": null,
  "created_at": "2026-07-09T12:00:00.000Z",
  "expires_at": "2026-07-09T12:05:00.000Z"
}

curl https://cutluy.com/v1/payments/PUETcMUOKStjZsCb6zAl8kg9fMRGM85x \
  -H "Authorization: Bearer ck_live_..."

curl "https://cutluy.com/v1/payments?status=paid&limit=20" \
  -H "Authorization: Bearer ck_live_..."

// npm i uqr
import { renderSVG } from "uqr"

// payment.qr_string is the raw KHQR payload from POST /v1/payments.
// Render it at error-correction level H — the riel medallion covers the
// middle of the code, and only H survives that much occlusion.
const qrSvg = renderSVG(payment.qr_string, { ecc: "H" })

// The QR is a raw <svg> string, so it is injected and stretched to fill
// its square container. Everything else is plain markup + Tailwind.
export function BakongCard({ qrSvg, amount, currency, merchantName, logoUrl }) {
  return (
    <div className="mx-auto w-full max-w-sm">
      <div className="overflow-hidden rounded-2xl bg-white shadow-xl">
        {/* 1. Red KHQR header with the Bakong wordmark */}
        <div className="flex items-center justify-center bg-red-500 px-4 py-3.5">
          <BakongWordmark />
        </div>

        {/* 2. Merchant + amount, split off by a dashed "tear" line,
              with the folded corner drawn as a CSS border triangle */}
        <div className="relative border-b border-dashed border-gray-300 px-6 py-4 pb-2.5">
          <div className="absolute -top-px right-0 h-0 w-0 border-t-[24px] border-l-[24px] border-t-red-500 border-l-transparent" />
          <div className="flex items-center gap-2">
            {logoUrl && <img src={logoUrl} alt="" className="size-5 rounded-sm object-contain" />}
            <h3 className="text-sm text-slate-700">{merchantName}</h3>
          </div>
          <div className="flex items-end gap-2">
            <h2 className="text-2xl font-bold text-gray-800">{amount}</h2>
            <span className="mb-1 text-sm font-medium text-slate-600">{currency}</span>
          </div>
        </div>

        {/* 3. Square QR + the riel medallion centred on top */}
        <div className="relative flex items-center justify-center">
          <div className="aspect-square w-full p-6">
            <div className="[&_svg]:h-full [&_svg]:w-full"
                 dangerouslySetInnerHTML={{ __html: qrSvg }} />
          </div>
          <RielMedallion className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
        </div>
      </div>

      <p className="mt-4 text-center text-sm text-slate-600">
        Scan with any KHQR-enabled banking app
      </p>
    </div>
  )
}

// Swap the QR out for a state panel once the payment is terminal —
// never leave a live QR on screen after it is paid or expired.
const done = status === "paid"
const scanned = status === "scanned"
const isExpired = status === "expired" || status === "failed"
const showQr = !done && !scanned && !isExpired

{done ? (
  <Panel icon={<CheckCircle2 className="size-8 text-green-600" />}
         title="Payment received" hint="You can close this page." />
) : isExpired ? (
  <Panel icon={<Clock className="size-8 text-orange-500" />}
         title="Payment expired" hint="This QR code is no longer valid." />
) : scanned ? (
  <Panel icon={<CheckCircle2 className="size-8 text-green-600" />}
         title="QR scanned" hint="Confirm the payment in your banking app." />
) : (
  <QrWithMedallion svg={qrSvg} />
)}

// The medallion must only render while the QR does — overlaying it on a
// state panel looks broken.
{showQr && <RielMedallion className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />}

// Keep the card live: poll your own endpoint (which reads the payment
// via GET /v1/payments/:id) and stop as soon as the status is terminal.
const TERMINAL = new Set(["paid", "expired", "failed"])

useEffect(() => {
  if (TERMINAL.has(status)) return
  const t = setInterval(async () => {
    const res = await fetch(`/orders/${orderId}/status`)
    const { status: next } = await res.json()
    setStatus(next)
  }, 3000)
  return () => clearInterval(t)
}, [status, orderId])

// Any valid KHQR string works — here, the one from POST /v1/payments.
const src =
  `https://cutluy.com/api/render/khqr/${encodeURIComponent(payment.qr_string)}.svg`

<!-- Drop it anywhere an image goes: HTML, Markdown, invoices, chat -->
<img
  src="https://cutluy.com/api/render/khqr/00020101021229330016cutluy_demo%40bkrt010900000000052045999530384054041.505802KH5911CutLuy%20Demo6010Phnom%20Penh62140110order_102463045F4B.svg"
  alt="Scan to pay 1.50 USD"
  width="360"
/>

curl -sS "https://cutluy.com/api/render/khqr/00020101021229330016cutluy_demo%40bkrt010900000000052045999530384054041.505802KH5911CutLuy%20Demo6010Phnom%20Penh62140110order_102463045F4B.svg" -o khqr.svg

{
  "id": "b3f1c2a0-9e2d-4a1b-8c7f-1e2d3c4b5a6f",
  "type": "payment.completed",
  "created": "2026-07-09T12:03:11.000Z",
  "data": {
    "payment": {
      "id": "PUETcMUOKStjZsCb6zAl8kg9fMRGM85x",
      "status": "paid",
      "amount": "1.50",
      "currency": "USD",
      "reference_id": "order_1024",
      "metadata": null,
      "approved_at": "2026-07-09T12:03:10.000Z"
    }
  }
}

{ "error": "amount_too_low", "message": "Minimum amount is 0.01" }