React and Next.js | High Wire Developers

highwire.js is browser-only, so use it in a client component. Place the ES build inside your source tree (not public/) so your bundler can resolve the import, wire observeField in an effect, and clean up with the function it returns:

'use client';

import { useEffect, useMemo, useRef } from 'react';
import { HighWire } from '../vendor/highwire/highwire-v0.1.0.es.js';

export function CheckoutForm() {
  const hw = useMemo(() => HighWire(), []);
  const cardNumber = useRef(null);

  useEffect(() => {
    if (!cardNumber.current) return;
    const unobserve = hw.observeField(cardNumber.current, 'cardNumber');
    return unobserve;
  }, [hw]);

  async function handleSubmit(event) {
    event.preventDefault();
    const { blob } = await hw.collect();
    // Send blob as `deviceData` with your checkout payload.
  }

  // <input ref={cardNumber} ... /> inside the form
}