Next.js (App Router)

app/checkout/[id]/page.tsx

'use client';

import Script from 'next/script';
import { useEffect, useRef } from 'react';

export default function CheckoutPage({ params }: { params: { id: string } }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      // @ts-ignore — SDK attaches to window.HelaMesh
      if (!window.HelaMesh || !ref.current) return;
      clearInterval(interval);

      // @ts-ignore
      const instance = window.HelaMesh.mount(ref.current, {
        invoiceId: params.id,
        publishableKey: process.env.NEXT_PUBLIC_HELAMESH_PK!,
        onPaid: () => {
          window.location.href = '/order/success';
        },
      });

      return () => instance.destroy();
    }, 100);

    return () => clearInterval(interval);
  }, [params.id]);

  return (
    <>
      <Script
        src="https://pay.helamesh.com/sdk/v1.js"
        strategy="afterInteractive"
      />
      <div ref={ref} />
    </>
  );
}

NEXT_PUBLIC_ prefix required

NEXT_PUBLIC_HELAMESH_PK must be set in your env and must start with NEXT_PUBLIC_ for Next.js to expose it to the browser bundle. The publishable key is safe to ship there. Never use the secret hm_* key in any NEXT_PUBLIC_* variable.