Payment widget

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* afterInteractive: nothing on the first paint needs it, and the
            customer cannot click Pay before the page is interactive anyway. */}
        <Script src="https://xendlypay.com/v1/widget.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}


// app/api/checkout/route.ts
//
// THE SERVER HALF. This is where the amount is decided and where your key
// lives. Never NEXT_PUBLIC_ anything: a key with that prefix is compiled into
// the browser bundle and is public the moment you deploy.
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { orderId } = await req.json();
  const order = await db.order.findUniqueOrThrow({ where: { id: orderId } });

  const res = await fetch("https://api.xendlypay.com/v1/checkouts", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.XENDLY_KEY!}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      amount: order.totalMinor,   // from YOUR database, not from the browser
      description: `Order #${order.number}`,
      reference: order.id,
    }),
  });

  if (!res.ok) {
    return NextResponse.json({ error: "Could not start payment" }, { status: 502 });
  }
  const { payload } = await res.json();
  // The token, and nothing else. The browser has no use for the rest.
  return NextResponse.json({ token: payload.token });
}


// app/checkout/PayButton.tsx
"use client";

import { useState } from "react";
import { useXendlyPay } from "@/lib/use-xendly-pay";

export function PayButton({ orderId }: { orderId: string }) {
  const pay = useXendlyPay();
  const [state, setState] = useState<"idle" | "opening" | "waiting" | "paid">("idle");

  async function start() {
    setState("opening");
    const res = await fetch("/api/checkout", {
      method: "POST",
      body: JSON.stringify({ orderId }),
    });
    const { token } = await res.json();

    pay(token, {
      onProcessing: () => setState("waiting"),
      // Move the spinner. Do NOT ship the order here — see below.
      onPaid: () => setState("paid"),
      onFailed: () => setState("idle"),
      onCancelled: () => setState("idle"),
    });
  }

  if (state === "paid") return <p>Thanks. Your order is confirmed.</p>;

  return (
    <button onClick={start} disabled={state !== "idle"}>
      {state === "waiting" ? "Check your phone…" : "Pay with Mobile Money"}
    </button>
  );
}