Checkout widget

<script src="https://cdn.jsdelivr.net/npm/@radokpay/js@0"></script>

npm  install @radokpay/react
pnpm add     @radokpay/react
yarn add     @radokpay/react
bun  add     @radokpay/react

npm  install @radokpay/js
pnpm add     @radokpay/js
yarn add     @radokpay/js
bun  add     @radokpay/js

import { RadokCheckoutButton } from "@radokpay/react";

<RadokCheckoutButton
  slug={slug}
  className="btn-primary"
  onSuccess={() => router.push("/thank-you")}
>
  Pay ₦5,000
</RadokCheckoutButton>

import { Radok } from "@radokpay/js";

Radok().checkout({ slug, onSuccess: () => {} });

import { getSession } from "@/lib/auth";
import { getOrder } from "@/lib/orders";

export async function POST(request) {
  const session = await getSession();
  if (!session) return Response.json({ error: "Unauthorized" }, { status: 401 });

  const { orderId } = await request.json();
  const order = await getOrder(orderId, session.userId);
  if (!order) return Response.json({ error: "Not found" }, { status: 404 });

  const res = await fetch("https://api.radokpay.com/v1/payment-links", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.RADOK_SECRET_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title: `Order #${order.id}`,
      amountType: "fixed",
      amount: { value: order.totalKobo, currency: "NGN" },
      linkType: "one_time",
      customer: { name: session.user.name, email: session.user.email },
      successRedirectUrl: `https://shop.example.com/orders/${order.id}`,
    }),
  });

  const { data, error } = await res.json();
  if (error) return Response.json({ error: error.message }, { status: 502 });

  // Store the slug against the order so the webhook can find it again.
  await order.update({ radokSlug: data.slug });

  return Response.json({ slug: data.slug });
}

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useRadokCheckout } from "@radokpay/react";

export function PayButton({ orderId }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const { open } = useRadokCheckout({
    // The order is not paid yet — the webhook decides that. This only moves the UI on.
    onSuccess: () => router.push(`/orders/${orderId}?pending=1`),
    onError: (error) => alert(error.message),
  });

  async function startCheckout() {
    setLoading(true);
    const res = await fetch("/api/checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ orderId }),
    });
    const { slug, error } = await res.json();
    setLoading(false);

    if (error) return alert(error);
    open(slug);
  }

  return (
    <button onClick={startCheckout} disabled={loading}>
      {loading ? "Preparing…" : "Pay now"}
    </button>
  );
}

import crypto from "node:crypto";
import { getOrderBySlug, markPaid } from "@/lib/orders";

export async function POST(request) {
  // The RAW body — JSON.parse and re-stringify will not reproduce the signed bytes.
  const raw = await request.text();
  const header = request.headers.get("x-radok-signature") ?? "";

  const parts = Object.fromEntries(header.split(",").map((p) => p.split("=")));
  const expected = crypto
    .createHmac("sha256", process.env.RADOK_WEBHOOK_SECRET)
    .update(`${parts.t}.${raw}`)
    .digest("hex");

  const valid = ["v1", "v1_prev"].some(
    (field) =>
      parts[field] &&
      crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(parts[field])),
  );
  if (!valid) return new Response("bad signature", { status: 400 });
  if (Math.abs(Date.now() / 1000 - Number(parts.t)) > 300) {
    return new Response("stale", { status: 400 });
  }

  const event = JSON.parse(raw);
  if (event.type !== "collection.success") return new Response("ok");

  const order = await getOrderBySlug(event.data.slug);
  if (!order) return new Response("ok"); // not ours, or already cleaned up

  // Check the money against YOUR record, not the event alone.
  if (event.data.amount.value !== order.totalKobo) {
    console.error("amount mismatch", order.id, event.data.amount);
    return new Response("ok");
  }

  // Idempotent: Radok retries, so this will run more than once for one payment.
  await markPaid(order.id, { reference: event.data.reference });

  return new Response("ok");
}