Quickstart | High Wire Developers

Collect checkout context in the browser and forward the resulting blob with a payment request.

Create one instance per page, mark your card inputs for paste detection once they are in the DOM, and collect on submit:

const hw = HighWire();

// After your card inputs exist in the DOM.
// Field names are your choice — these are the conventional ones.
hw.observeField(document.querySelector('#card-number'), 'cardNumber');
hw.observeField(document.querySelector('#card-cvv'), 'cvv');
hw.observeField(document.querySelector('#card-exp'), 'expiration');

document.getElementById('checkout').addEventListener('submit', async (event) => {
  event.preventDefault();

  const { blob } = await hw.collect();

  await fetch('/checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      // ...your card fields, amount, etc.
      deviceData: blob,
    }),
  });
});

Your server then forwards deviceData unchanged on the payment request:

{
  "amount": 7200,
  "cardNumber": "5555555555554444",
  "deviceData": "eyJ2IjoxLCJjbGllbnQiOiIwLjEuMCIsIn..."
}

No API key is involved on the page. The library makes no network requests; your existing gateway credentials on the server remain the only authentication.