Put a crypto checkout on your site.

// Your backend (Express, Node 18+). The listener runs next to it.
app.post('/api/checkout', async (req, res) => {
  const order = await loadOrder(req.body.orderId);        // your own code

  const r = await fetch('http://localhost:8787/invoice', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-zettapay-api-key': process.env.ZETTAPAY_API_KEY,
    },
    body: JSON.stringify({ chain: 'base', amount_usd: order.totalUsd }),
  });
  if (!r.ok) return res.status(502).json({ error: 'could not create invoice' });
  const inv = await r.json();

  await saveInvoiceId(order.id, inv.invoice_id);              // your own code

  // Hand the browser only what it needs to show.
  res.json({
    invoice_id: inv.invoice_id,
    asset: inv.asset,
    receive_address: inv.receive_address,
    amount: inv.amount_usdc ?? inv.amount_btc,
    qr_uri: inv.qr_uri,
    expires_at: inv.expires_at,
  });
});

// Same request, Cloud base URL. ZETTAPAY_URL is the origin of the ZettaPay site.
const r = await fetch(`${process.env.ZETTAPAY_URL}/api/v1/invoice`, {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    'x-zettapay-api-key': process.env.ZETTAPAY_API_KEY,
  },
  body: JSON.stringify({ chain: 'base', amount_usd: order.totalUsd }),
});
const inv = await r.json();

// inv.checkout_url is present when hosted checkout is enabled.

// in the server route from step 1
if (inv.checkout_url) return res.redirect(303, inv.checkout_url);

<a href="{{ checkout_url }}" rel="noopener">Pay with crypto</a>

<div id="zp-checkout">
  <p>Send exactly <strong id="zp-amount"></strong> <span id="zp-asset"></span> to:</p>
  <code id="zp-address"></code>
  <div id="zp-qr"></div>
  <a id="zp-open">Open in wallet</a>
  <p id="zp-status">Waiting for payment…</p>
</div>

const inv = await (await fetch('/api/checkout', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ orderId }),
})).json();

document.getElementById('zp-amount').textContent  = inv.amount;
document.getElementById('zp-asset').textContent   = inv.asset;
document.getElementById('zp-address').textContent = inv.receive_address;
document.getElementById('zp-open').href           = inv.qr_uri;

// Encode inv.qr_uri with the QR library you already use,
// and draw the result into #zp-qr.
renderQr(document.getElementById('zp-qr'), inv.qr_uri);

// Self-hosted: forward status lookups to the listener.
app.get('/api/checkout/:id', async (req, res) => {
  const r = await fetch(
    `http://localhost:8787/invoice/${encodeURIComponent(req.params.id)}`,
  );
  if (!r.ok) return res.status(r.status).end();
  const inv = await r.json();
  res.json({ status: inv.status, tx_hash: inv.tx_hash });
});

// Self-hosted: your own route.  Cloud: `${ZETTAPAY_URL}/api/v1/checkout/${id}`
const statusUrl = `/api/checkout/${inv.invoice_id}`;
const el = document.getElementById('zp-status');

const timer = setInterval(async () => {
  if (Date.now() > Date.parse(inv.expires_at)) {
    clearInterval(timer);
    el.textContent = 'This invoice expired. Start again.';
    return;
  }
  const s = await (await fetch(statusUrl)).json();
  if (s.status === 'confirmed') {
    clearInterval(timer);
    el.textContent = 'Payment confirmed. Thank you!';
  } else if (s.status === 'expired' || s.status === 'failed') {
    clearInterval(timer);
    el.textContent = 'This invoice is no longer payable.';
  }
}, 5000);