// --- your backend (holds the KnoxCall credential) ---
// GET /v1/encrypt/sealing-bundle?key=payments  ->  { public_key_raw, key_ref }
import { KnoxCall } from '@knoxcall/sdk';

const knox = new KnoxCall(); // credentials from `knoxcall login` or KNOXCALL_CLIENT_ID / KNOXCALL_CLIENT_SECRET
app.get('/checkout/sealing-bundle', async (req, res) => {
  res.json(await knox.crypto.getSealingBundle({ key: 'payments' }));
});

// --- the browser ---
import { KnoxEncryptor } from '@knoxcall/browser';

const bundle = await fetch('/checkout/sealing-bundle').then((r) => r.json());
const enc = new KnoxEncryptor(bundle, { purpose: 'pci' });

const ciphertext = await enc.encrypt(cardNumber); // "kc:1:s:…:$"
// send `ciphertext` to your backend / KnoxCall — the PAN never left the page.

import { KnoxClient } from '@knoxcall/browser';

const knox = new KnoxClient();
const pan = await knox.reveal(capabilityToken, ciphertext);   // one-time
// or, for a vault token:
const value = await knox.detokenize(capabilityToken, 'tok_…');

import { CardCollect } from '@knoxcall/react';

<CardCollect
  bundle={bundle}
  purpose="pci"
  onChange={(complete) => setReady(complete)}
  onToken={(ciphertext, { last4, brand }) => {
    // store the ciphertext; show `•••• last4` to the user.
  }}
/>