React / Next.js

'use client';

import { useEffect, useRef, useState } from 'react';
import type {
  BillingAddress,
  HighWire,
  HighWireError,
  Checkout,
  HighWireInstance,
} from '@highwirepayments/payment-sdk';

type SDKNamespace = {
  default: typeof HighWire;
  HighWireError: typeof HighWireError;
  SDK_VERSION: string;
};

declare global {
  interface Window {
    HighWire?: SDKNamespace;
  }
}

let sdkPromise: Promise<SDKNamespace> | null = null;

const retryableRequestCodes = new Set([
  'HW_NETWORK',
  'HW_TIMEOUT',
  'HW_SERVICE_UNAVAILABLE',
]);

function loadSDK(): Promise<SDKNamespace> {
  if (window.HighWire?.SDK_VERSION === '0.7.0') {
    return Promise.resolve(window.HighWire);
  }
  sdkPromise ??= new Promise<SDKNamespace>((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.highwirepayments.com/sdk/0.7.0/highwire.js';
    script.integrity = 'sha384-NZVoZbDdfN3Ix90/7E+1ojIBysBz1Cwhizp9zPhjUxaOVkMdHBk9RSSxMSAO44LU';
    script.crossOrigin = 'anonymous';
    script.onload = () => {
      if (window.HighWire?.SDK_VERSION === '0.7.0') resolve(window.HighWire);
      else {
        script.remove();
        reject(new Error('Payment SDK unavailable'));
      }
    };
    script.onerror = () => {
      script.remove();
      reject(new Error('Payment SDK could not load'));
    };
    document.head.appendChild(script);
  }).catch((error) => {
    sdkPromise = null;
    throw error;
  });
  return sdkPromise;
}

function sdkError(error: unknown) {
  const ErrorClass = window.HighWire?.HighWireError;
  return ErrorClass && error instanceof ErrorClass ? error : null;
}

type Order = {
  id: string;
  amount: number;
  currency: 'usd';
  customerEmail: string;
  canStartPayment: boolean;
};

export function PaymentStep({ order }: { order: Order }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const billingRef = useRef<HTMLFormElement>(null);
  const instanceRef = useRef<Promise<HighWireInstance> | null>(null);
  const checkoutRef = useRef<Checkout | null>(null);
  const aliveRef = useRef(false);
  const startingRef = useRef(false);
  const busyRef = useRef(false);
  const mountingRef = useRef(false);
  const formFailedRef = useRef(false);
  const lastErrorRef = useRef<unknown>(null);
  const [starting, setStarting] = useState(false);
  const [bound, setBound] = useState(false);
  const [formReady, setFormReady] = useState(false);
  const [busy, setBusy] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [closed, setClosed] = useState(false);
  const [requiresSubmit, setRequiresSubmit] = useState(false);
  const [message, setMessage] = useState('');

  useEffect(() => {
    aliveRef.current = true;
    return () => {
      aliveRef.current = false;
      checkoutRef.current?.unmount();
    };
  }, []);

  function reportError(error: unknown) {
    if (!aliveRef.current || error === lastErrorRef.current) return;
    lastErrorRef.current = error;
    const failure = sdkError(error);
    const code = failure?.code ?? null;
    const recovery = failure?.recovery ?? (code === 'HW_INCOMPLETE' ? 'correct' : undefined);
    if (recovery === 'wait') return;
    if (recovery === 'correct' || recovery === 'retry' || recovery === 'recheck') {
      setConfirming(recovery === 'recheck');
      if (recovery !== 'recheck') {
        busyRef.current = false;
        setBusy(false);
      }
      setMessage(recovery === 'correct'
        ? 'Check your email, payment details and billing address, then try again.'
        : recovery === 'retry'
          ? 'Payment could not start. Try again.'
          : 'We are confirming your payment. Check your order status before paying again.');
      return;
    }
    const retryableSubmit = busyRef.current && code !== null
      && retryableRequestCodes.has(code);
    const formFailed = code === 'HW_IFRAME_UNRECOVERABLE'
      || code === 'HW_PROTOCOL_MISMATCH'
      || (code === 'HW_TIMEOUT' && !busyRef.current && !mountingRef.current);
    if (formFailed) {
      formFailedRef.current = true;
      setFormReady(false);
      setClosed(true);
      checkoutRef.current?.unmount();
    } else if (!retryableSubmit) {
      setFormReady(false);
      setClosed(true);
      checkoutRef.current?.unmount();
    }
    busyRef.current = false;
    setBusy(false);
    setMessage(formFailed
      ? 'Payment form unavailable. Check your order status before reloading.'
      : code === 'HW_RATE_LIMITED'
      ? 'Too many attempts. Wait, then check your order status before trying again.'
      : !retryableSubmit
      ? 'Payment has stopped. Check your order before trying again.'
      : 'Payment could not complete. Try again.');
  }

  async function startPayment() {
    if (startingRef.current || !containerRef.current) return;
    startingRef.current = true;
    setStarting(true);
    if (!order.canStartPayment) {
      setClosed(true);
      setMessage('Check the existing order payment before starting again.');
      return;
    }
    setMessage('Preparing payment…');
    try {
      const sdk = await loadSDK();
      if (!aliveRef.current || !containerRef.current) return;
      instanceRef.current ??= sdk.default.init({
        publishableKey: 'REPLACE_WITH_YOUR_TEST_PUBLISHABLE_KEY',
        apiBase: 'https://api-payments-staging.highwirepayments.com',
      }).catch((error) => {
        instanceRef.current = null;
        throw error;
      });
      const hw = await instanceRef.current;
      if (!aliveRef.current || !containerRef.current) return;
      mountingRef.current = true;
      const checkout = await hw.mount({
        container: containerRef.current,
        amount: order.amount,
        currency: order.currency,
        onReady: () => {
          if (aliveRef.current && !formFailedRef.current) {
            setMessage('Enter your payment details.');
          }
        },
        onAvailabilityChange: (available) => {
          if (aliveRef.current) setFormReady(available);
        },
        onChange: (card) => {
          if (aliveRef.current) setFormReady(card.complete);
        },
        onProcessing: () => {
          busyRef.current = true;
          if (!aliveRef.current) return;
          setBusy(true);
          setMessage('Processing your payment…');
        },
        onResult: (result) => {
          if (!aliveRef.current) return;
          busyRef.current = false;
          setBusy(false);
          if (result.status === 'declined' && result.retryable) {
            setMessage('Declined. Try another card or method.');
            return;
          }
          setClosed(true);
          checkoutRef.current?.unmount();
          setMessage(result.status === 'pending'
            ? 'We are confirming your payment. Check your order status.'
            : result.status === 'succeeded'
              ? 'Payment submitted. Your server will confirm the order.'
              : 'This checkout has ended. Check your order before starting again.');
        },
        onError: reportError,
      });
      mountingRef.current = false;
      checkoutRef.current = checkout;
      if (!aliveRef.current) {
        checkout.unmount();
        return;
      }
      if (formFailedRef.current) checkout.unmount();
      const response = await fetch(`/api/orders/${encodeURIComponent(order.id)}/payment`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ paymentId: checkout.paymentId }),
      });
      if (!response.ok) throw new Error('Payment could not be bound to the order');
      if (!aliveRef.current) return;
      setRequiresSubmit(checkout.requiresSubmit);
      setBound(true);
    } catch (error) {
      mountingRef.current = false;
      if (checkoutRef.current) {
        checkoutRef.current.unmount();
        if (aliveRef.current) {
          setClosed(true);
          setMessage('Payment unavailable. Check your order before trying again.');
        }
      } else if (aliveRef.current) {
        const code = sdkError(error)?.code ?? null;
        if (!formFailedRef.current && code !== null
            && retryableRequestCodes.has(code)) {
          startingRef.current = false;
          setStarting(false);
          formFailedRef.current = false;
          setClosed(false);
          setFormReady(false);
          setMessage('Payment unavailable. Try entering payment again.');
        } else {
          setFormReady(false);
          setClosed(true);
          setMessage(formFailedRef.current
            ? 'Payment form unavailable. Check your order status before reloading.'
            : code === 'HW_RATE_LIMITED'
              ? 'Too many attempts. Wait, then reload to check your order before trying again.'
              : 'Payment could not start. Check your order status before trying again.');
        }
      }
    }
  }

  async function pay() {
    const checkout = checkoutRef.current;
    const billing = billingRef.current;
    if (!checkout || !billing || !bound || !formReady || busyRef.current || confirming
        || closed || !billing.reportValidity()) return;
    const { customerEmail, ...billingAddress } = Object.fromEntries(new FormData(billing)) as
      BillingAddress & { customerEmail?: string };
    busyRef.current = true;
    setBusy(true);
    try {
      await checkout.submit({ customerEmail, billingAddress });
    } catch (error) {
      reportError(error);
    } finally {
      busyRef.current = false;
      if (aliveRef.current) setBusy(false);
    }
  }

  return (
    <section aria-label="Payment">
      {!bound && !closed && (
        <button type="button" disabled={starting} onClick={startPayment}>
          Continue to payment
        </button>
      )}
      <div inert={!bound || closed}>
        <form ref={billingRef} aria-label="Contact and billing details">
          <input name="customerEmail" type="email" autoComplete="email" aria-label="Email"
            defaultValue={order.customerEmail} required />
          <input name="name" autoComplete="billing name" aria-label="Name" required />
          <input name="country" autoComplete="billing country" aria-label="Country code"
            pattern="[A-Za-z]{2}" required />
          <input name="line1" autoComplete="billing address-line1" aria-label="Address" />
          <input name="line2" autoComplete="billing address-line2" aria-label="Apartment, suite" />
          <input name="city" autoComplete="billing address-level2" aria-label="City" />
          <input name="state" autoComplete="billing address-level1" aria-label="State" />
          <input name="postalCode" autoComplete="billing postal-code" aria-label="Postal code"
            required />
        </form>
        <div ref={containerRef} />
        {requiresSubmit && !closed && (
          <button type="button" disabled={!formReady || busy || confirming} onClick={pay}>
            Pay
          </button>
        )}
      </div>
      <p role="status">{message}</p>
    </section>
  );
}