import express from "express";

const app = express();
app.use(express.json());

const PILOT = "https://pilotstatus.com.br";
const headers = {
  "Content-Type": "application/json",
  "x-api-key": process.env.PILOT_STATUS_KEY, // ps_workspace_… or ps_account_…
  // "x-workspace-id": customer.workspaceId, // only with an account key
};

app.post("/billing/topup", async (req, res) => {
  const r = await fetch(`${PILOT}/v1/billing/payment-intents`, {
    method: "POST",
    headers: { ...headers, "Idempotency-Key": req.body.attemptId }, // one id per click
    body: JSON.stringify({ purpose: "wallet_topup", amount: req.body.amount, saveCard: true }),
  });
  const body = await r.json();
  if (!r.ok) return res.status(r.status).json({ code: body.code });
  // Send the browser only what it needs. Never the API key.
  res.json({
    clientSecret: body.clientSecret,
    publishableKey: body.publishableKey,
    paymentIntentId: body.paymentIntentId,
  });
});

app.post("/billing/topup/:id/sync", async (req, res) => {
  const r = await fetch(`${PILOT}/v1/billing/payment-intents/${req.params.id}/sync`, {
    method: "POST",
    headers,
  });
  res.status(r.status).json(await r.json());
});

app.listen(3000);

<form id="checkout">
  <div id="payment-element"></div>
  <button id="pay" type="submit">Pay</button>
  <p id="message"></p>
</form>

<script src="https://js.stripe.com/v3/"></script>
<script type="module">
  const attemptId = crypto.randomUUID();
  const r = await fetch("/billing/topup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ amount: 150, attemptId }),
  });
  const { clientSecret, publishableKey, paymentIntentId } = await r.json();

  const stripe = Stripe(publishableKey);
  const elements = stripe.elements({ clientSecret });
  elements.create("payment").mount("#payment-element");

  document.getElementById("checkout").addEventListener("submit", async (event) => {
    event.preventDefault();
    const { error } = await stripe.confirmPayment({
      elements,
      redirect: "if_required", // 3-D Secure opens in a modal; no page change for cards
    });
    if (error) {
      document.getElementById("message").textContent = error.message;
      return;
    }
    const sync = await fetch(`/billing/topup/${paymentIntentId}/sync`, { method: "POST" });
    const result = await sync.json();
    document.getElementById("message").textContent =
      result.orderStatus === "COMPLETED" ? `Paid. New balance: ${result.balance ?? "updated"}` : "Processing…";
  });
</script>