Mobile Money checkout

npx shadcn@latest add @mpui-kit/momo-checkout

import { MomoCheckout } from "@/components/mpui-kit/momo-checkout"

// Inside <MpuiKitProvider country={cm}>
<MomoCheckout
  amount={25000}
  summary="Studio in Bastos, 1 night"
  onPay={async ({ methodId, phone, amount, currency, attempt, signal }) => {
    // Call YOUR backend. MPUI-KIT never talks to a payment provider.
    const res = await fetch("/api/pay", {
      method: "POST",
      headers: { "Idempotency-Key": crypto.randomUUID() },
      body: JSON.stringify({ methodId, phone, amount, currency, attempt }),
      signal,
    })
    if (!res.ok) return { status: "failed", reason: "gateway_error" }
    const { reference, ussdCode } = await res.json()
    return { status: "pending", reference, ussdCode }
  }}
  onCheckStatus={async (reference, { signal }) => {
    const res = await fetch(`/api/pay/${reference}`, { signal })
    return res.json() // { status: "pending" | "success" | "failed", reason? }
  }}
  onSuccess={(receipt) => console.log("paid", receipt.reference)}
  failureMessages={{ insufficient_funds: "Your balance is too low." }}
/>

// What onPay receives
interface PaymentRequest {
  methodId: string       // "mtn", "orange", "card", "cash"...
  phone?: string         // E.164, for Mobile Money
  payload?: unknown      // an opaque token from a method panel: a card token, a PayPal order id
  amount: number
  currency: "XAF" | "XOF"
  attempt: number        // 1, then 2, 3... after each retry
  signal: AbortSignal    // aborted on cancel, timeout or unmount
}

// What onPay returns
type PayResult =
  | { status: "success"; reference: string }                    // done already (cash, or a backend that waits)
  | { status: "pending"; reference: string; ussdCode?: string } // now polling onCheckStatus
  | { status: "failed"; reason?: string }

// What onCheckStatus returns
type StatusResult =
  | { status: "pending" }
  | { status: "success"; reference?: string }
  | { status: "failed"; reason?: string }

import { useMomoCheckout } from "@/hooks/mpui-kit/use-momo-checkout"

const { state, pay, retry, cancel, reset } = useMomoCheckout({
  amount: 25000,
  currency: "XAF",
  onPay,
  onCheckStatus,
  timeoutMs: 120_000,     // default 2 minutes
  pollIntervalMs: 3_000,  // default 3 seconds
})

pay({ methodId: "mtn", phone: "+237651234567" })
// state.status: "idle" | "awaiting_approval" | "success" | "failed" | "timeout"