Browser & React Elements

npm install /path/to/KnoxCall/sdk/knoxcall-browser /path/to/KnoxCall/sdk/knoxcall-react

// Your backend (Node management SDK), e.g. GET /api/sealing-bundle
import { KnoxCall } from '@knoxcall/sdk';

const knox = new KnoxCall(); // credentials from `knoxcall login` or KNOXCALL_CLIENT_ID / KNOXCALL_CLIENT_SECRET
app.get('/api/sealing-bundle', async (_req, res) => {
  res.json(await knox.crypto.getSealingBundle()); // GET /v1/encrypt/sealing-bundle
});

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

const bundle = await fetch('/api/sealing-bundle').then((r) => r.json());
const encryptor = createEncryptor(bundle, { purpose: 'pci' });

const ciphertext = await encryptor.encrypt('4242424242424242');
// -> "kc:1:s:<key_ref>:<eph_pubkey>:<iv>:<ct||tag>:$"

// Send the ciphertext to your backend and store it as-is. Your servers only
// ever see the kc: string; decryption happens via POST /v1/decrypt with your
// server-side credentials (or never, if you proxy it onward with the Ephemeral Proxy).

import { useEffect, useState } from 'react';
import { CardCollect } from '@knoxcall/react';
import type { SealingBundle } from '@knoxcall/browser';

function CheckoutForm() {
  const [bundle, setBundle] = useState<SealingBundle | null>(null);
  const [complete, setComplete] = useState(false);

  useEffect(() => {
    fetch('/api/sealing-bundle').then((r) => r.json()).then(setBundle);
  }, []);

  if (!bundle) return null;
  return (
    <CardCollect
      bundle={bundle}
      purpose="pci"
      onChange={setComplete}
      onToken={(ciphertext, { last4, brand }) => {
        // ciphertext is a kc: string — safe to send to and store on your
        // backend as-is. The PAN itself never left the KnoxCall iframe.
        fetch('/api/cards', { method: 'POST', body: JSON.stringify({ ciphertext, last4, brand }) });
      }}
      onError={(msg) => console.error('card element error:', msg)}
    />
  );
}

// Your backend: mint a capability token bound to one ciphertext.
app.post('/api/reveal-token', async (req, res) => {
  // POST /v1/client-tokens -> { token: "kct_…", expires_at, action }
  res.json(await knox.crypto.mintClientToken({ action: 'decrypt', data: storedCiphertext }));
});

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

const { token } = await fetch('/api/reveal-token', { method: 'POST' }).then((r) => r.json());
const knox = new KnoxClient(); // optionally { baseUrl, fetchImpl }

const pan = await knox.reveal(token, storedCiphertext);        // POST /v1/client/decrypt
const raw = await knox.detokenize(token, 'tok_visa_abc123');   // POST /v1/client/detokenize

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

<Reveal
  capabilityToken={token}        // kct_… from your backend, single-use
  ciphertext={storedCiphertext}  // the kc: value bound into that token
  action="decrypt"               // or "detokenize" for vault tokens
  onError={(msg) => setError(msg)}
/>