
<!-- ========================= -->
<!-- FRONTEND UI -->
<!-- ========================= -->

<!DOCTYPE html>
<html>
<head>
  <title>GP / Konek Sandbox Checkout</title>
  <style>
    body { font-family: Arial; background:#f4f5f7; padding:40px; }
    .card { max-width:420px; margin:auto; background:#fff; padding:20px; border-radius:12px; }
    button { width:100%; padding:14px; background:#111; color:#fff; border:0; border-radius:8px; }
    pre { background:#eee; padding:10px; font-size:12px; white-space:pre-wrap; }
  </style>
</head>

<body>

<div class="card">
  <h2>GP / Konek Sandbox Checkout</h2>

  <button onclick="startCheckout()">Pay $75 CAD</button>

  <pre id="log"></pre>
</div>

<script>

async function log(msg) {
  document.getElementById("log").innerText += msg + "\n";
}

async function startCheckout() {
  document.getElementById("log").innerText = "";

  try {

    // STEP 1: TOKEN
    log("Requesting access token...");

    let t = await fetch("?action=token");
    let tokenData = await t.json();

    if (!tokenData.success) throw new Error("Token failed");

    log(JSON.stringify(tokenData, null, 2));

    // STEP 2: CONSENT
    log("\nCreating consent...");

    let c = await fetch("?action=consent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: tokenData.token })
    });

    let consentData = await c.json();

    log(JSON.stringify(consentData, null, 2));

    log("\n✔ COMPLETE");

  } catch (e) {
    log("ERROR: " + e.message);
  }
}

</script>

</body>
</html>