The Developer Console: Tabs, Status Checker, and Widget Preview

json// BEFORE: GET /v1/checkout/:id/status
{
  "status": "completed"
}

json// AFTER: GET /v1/checkout/:id/status
{
  "status": "completed",
  "session_id": "cs_abc123def456",
  "amount": 5000,
  "currency": "XOF",
  "customer": {
    "phone": "+2250709757296",
    "email": null,
    "name": null
  },
  "payment_reference": "ORDER-42",
  "invoice_reference": "INV-2025-0001",
  "checkout_url": "https://pay.0fee.dev/checkout/cs_abc123def456",
  "success_url": "https://merchant.com/success",
  "cancel_url": "https://merchant.com/cancel",
  "expires_at": "2025-12-27T15:30:00Z",
  "created_at": "2025-12-27T14:30:00Z"
}

json// AFTER: GET /v1/payments/public/:id/status
{
  "status": "completed",
  "source_amount": 5000,
  "source_currency": "XOF",
  "destination_amount": 5000,
  "destination_currency": "XOF",
  "payment_method": "PAYIN_ORANGE_CI",
  "payment_reference": "ORDER-42",
  "invoice_reference": "INV-2025-0001",
  "customer": {
    "phone": "+2250709757296"
  }
}

python# backend/routes/checkout_hosted.py
@router.get("/v1/checkout/{session_id}/status")
async def get_checkout_status(session_id: str, db: AsyncSession = Depends(get_db)):
    """Return rich status data for a checkout session."""
    session = await db.execute(
        select(CheckoutSession).where(CheckoutSession.id == session_id)
    )
    session = session.scalar_one_or_none()

    if not session:
        raise HTTPException(status_code=404, detail="Session not found")

    return {
        "status": session.status,
        "session_id": session.id,
        "amount": session.amount,
        "currency": session.currency,
        "customer": {
            "phone": session.customer_phone,
            "email": session.customer_email,
            "name": session.customer_name,
        },
        "payment_reference": session.payment_reference,
        "invoice_reference": session.invoice_reference,
        "checkout_url": f"https://pay.0fee.dev/checkout/{session.id}",
        "success_url": session.success_url,
        "cancel_url": session.cancel_url,
        "expires_at": session.expires_at.isoformat() if session.expires_at else None,
        "created_at": session.created_at.isoformat(),
    }

typescript// State for the status checker
const [sessionIdInput, setSessionIdInput] = createSignal("");
const [transactionIdInput, setTransactionIdInput] = createSignal("");
const [sessionStatus, setSessionStatus] = createSignal<any>(null);
const [transactionStatus, setTransactionStatus] = createSignal<any>(null);
const [statusLoading, setStatusLoading] = createSignal(false);

async function checkSessionStatus() {
  const id = sessionIdInput();
  if (!id) return;

  setStatusLoading(true);
  try {
    const response = await fetch(`/api/v1/checkout/${id}/status`);
    const data = await response.json();
    setSessionStatus(data);
  } catch (error) {
    setSessionStatus({ error: "Failed to fetch status" });
  } finally {
    setStatusLoading(false);
  }
}

async function checkTransactionStatus() {
  const id = transactionIdInput();
  if (!id) return;

  setStatusLoading(true);
  try {
    const response = await fetch(`/api/v1/payments/public/${id}/status`);
    const data = await response.json();
    setTransactionStatus(data);
  } catch (error) {
    setTransactionStatus({ error: "Failed to fetch status" });
  } finally {
    setStatusLoading(false);
  }
}

+----------------------------------+  +----------------------------------+
| Session Status Checker           |  | Transaction Status Checker       |
|                                  |  |                                  |
| Session ID: [cs_____________]    |  | Transaction ID: [txn__________]  |
|                [Check Status]    |  |                   [Check Status] |
|                                  |  |                                  |
| {                                |  | {                                |
|   "status": "completed",        |  |   "status": "completed",        |
|   "session_id": "cs_abc123",    |  |   "source_amount": 5000,        |
|   "amount": 5000,               |  |   "source_currency": "XOF",     |
|   "currency": "XOF",            |  |   "payment_method": "ORANGE_CI",|
|   ...                            |  |   ...                            |
| }                                |  | }                                |
+----------------------------------+  +----------------------------------+

+-------------------+     +-------------------+     +-------------------+
|                   |     |                   |     |                   |
|   1. Create       |     |   2. Customer     |     |   3. Webhook      |
|   Payment         | --> |   Pays            | --> |   Notification    |
|                   |     |                   |     |                   |
|   POST /v1/       |     |   Redirect to     |     |   POST to your    |
|   payments        |     |   checkout URL    |     |   webhook URL     |
|                   |     |                   |     |                   |
+-------------------+     +-------------------+     +-------------------+

typescriptconst [widgetAmount, setWidgetAmount] = createSignal(5000);
const [widgetCurrency, setWidgetCurrency] = createSignal("XOF");
const [widgetReference, setWidgetReference] = createSignal("TEST-001");
const [widgetScriptLoaded, setWidgetScriptLoaded] = createSignal(false);
const [activeFramework, setActiveFramework] = createSignal("vanilla");
const [widgetResult, setWidgetResult] = createSignal<any>(null);

Widget Configuration
+--------------------------------------------------+
| Amount:     [5000        ]                       |
| Currency:   [XOF  v]                             |
| Reference:  [TEST-001    ]                       |
|                                                  |
| [Try Widget Live]                                |
+--------------------------------------------------+

typescriptasync function loadWidgetScript(): Promise<void> {
  if (widgetScriptLoaded()) return;

  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = "https://pay.0fee.dev/checkout.js";
    script.onload = () => {
      setWidgetScriptLoaded(true);
      resolve();
    };
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

async function tryWidgetLive(): Promise<void> {
  await loadWidgetScript();

  // @ts-ignore -- ZeroFeeCheckout is loaded dynamically
  const checkout = new ZeroFeeCheckout({
    apiKey: sandboxKey(),
    amount: widgetAmount(),
    currency: widgetCurrency(),
    reference: widgetReference(),
    onSuccess: (result: any) => {
      setWidgetResult({ type: "success", data: result });
    },
    onError: (error: any) => {
      setWidgetResult({ type: "error", data: error });
    },
    onClose: () => {
      setWidgetResult({ type: "closed" });
    },
  });

  checkout.open();
}

html<script src="https://pay.0fee.dev/checkout.js"></script>
<script>
  const checkout = new ZeroFeeCheckout({
    apiKey: "sk_test_your_key_here",
    amount: 5000,
    currency: "XOF",
    reference: "ORDER-42",
    onSuccess: function(result) {
      console.log("Payment succeeded:", result);
      window.location.href = "/success";
    },
    onError: function(error) {
      console.error("Payment failed:", error);
    },
    onClose: function() {
      console.log("Widget closed");
    }
  });

  document.getElementById("pay-btn").onclick = function() {
    checkout.open();
  };
</script>

jsximport { useEffect, useRef } from "react";

function CheckoutButton({ amount, currency, reference }) {
  const checkoutRef = useRef(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://pay.0fee.dev/checkout.js";
    script.onload = () => {
      checkoutRef.current = new ZeroFeeCheckout({
        apiKey: "sk_test_your_key_here",
        amount,
        currency,
        reference,
        onSuccess: (result) => console.log("Success:", result),
        onError: (error) => console.error("Error:", error),
      });
    };
    document.head.appendChild(script);
  }, []);

  return (
    <button onClick={() => checkoutRef.current?.open()}>
      Pay {amount} {currency}
    </button>
  );
}

typescriptfunction getVanillaCode(): string {
  return `<script src="https://pay.0fee.dev/checkout.js"></script>
<script>
  const checkout = new ZeroFeeCheckout({
    apiKey: "${sandboxKey()}",
    amount: ${widgetAmount()},
    currency: "${widgetCurrency()}",
    reference: "${widgetReference()}",
    onSuccess: function(result) {
      console.log("Payment succeeded:", result);
    },
    onError: function(error) {
      console.error("Payment failed:", error);
    }
  });
</script>`;
}

typescript// frontend/src/utils/checkoutTemplate.ts
export function generateCheckoutTemplate(apiKey: string): string {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkout - Powered by 0fee.dev</title>
  <style>
    /* Complete embedded CSS -- no external dependencies */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
    /* ... ~200 lines of styles */
  </style>
</head>
<body>
  <div id="checkout">
    <!-- Step 1: Amount and method selection -->
    <!-- Step 2: Customer details -->
    <!-- Step 3: Processing -->
    <!-- Step 4: Result -->
  </div>
  <script>
    const API_KEY = "${apiKey}";
    const API_URL = "https://api.0fee.dev/v1";
    /* ... ~400 lines of checkout logic */
  </script>
</body>
</html>`;
}

python# backend/routes/checkout.py
@router.get("/v1/checkout/demo-key")
async def get_demo_key():
    """Return a sandbox API key for demo purposes."""
    return {"key": config.PLATFORM_DEMO_SANDBOX_KEY}

typescriptinterface WidgetCallbacks {
  onSuccess: (result: {
    transactionId: string;
    status: "completed";
    amount: number;
    currency: string;
    reference: string;
  }) => void;

  onError: (error: {
    code: string;
    message: string;
    transactionId?: string;
  }) => void;

  onClose: () => void;
}