highwire.js

What highwire.js does

highwire.js is a small browser library for merchants that accept payments through HighWire's direct API. It collects a fixed set of device and page context signals, plus paste events for checkout fields that you choose to observe, and returns that context as deviceData.

The library is a context collector. Your checkout remains responsible for its existing payment form and payment request.

Who this is for

Use highwire.js when your checkout runs in the cardholder's browser, sends payment details to your own backend, and your backend submits the payment to HighWire.

It is designed to add browser context to that existing direct-API flow without changing where card data is collected or how your backend authenticates to HighWire.

How it fits into a payment

The integration has three observable stages:

1. Browser collection. Your checkout loads highwire.js, creates an instance, optionally observes supported checkout fields for paste events, and calls collect() when the cardholder submits the form.
2. Merchant-backend forwarding. Your checkout sends the returned deviceData to your own backend with its existing payment request. Your backend passes that object through unchanged. If collection is unavailable, omit the field.
3. HighWire consumption. Your backend submits the payment to HighWire's direct API. HighWire consumes deviceData server-side as additional payment context.

The browser library does not submit the payment to HighWire on its own.

What it does not do

highwire.js does not collect card data or read any checkout input value. Field observation records only that a paste event occurred for a field you explicitly selected.

It also does not fingerprint the device, request geolocation, set cookies, or use browser storage. It is browser-only and does not replace your merchant backend.

Next steps

• Get started with the delivered build and make a first collection.
• Follow the complete integration flow from checkout submission through your backend.
• Review the collected context and forwarding rules in Device data.
• Check exact signatures, types, and returns in the API reference.
• Plan CSP and data handling with Security and privacy.
• Diagnose loading, collection, observation, and gateway responses in Troubleshooting.

Guides

• Use Plain HTML and JavaScript for a complete UMD script-tag and form-submit example.
• Use React and Next.js for client-component lifecycle, field observation, and cleanup.