Server rendering (Next.js)

Load the campaign once on the server, render the page, then rebuild the campaign in the browser without a second request.

// app/page.tsx (server component)
import { Loranj } from "@loranj/sdk";
import { EntryForm } from "./entry-form";

export default async function Page() {
  const promo = await Loranj.load({
    campaignKey: process.env.LORANJ_CAMPAIGN_KEY!,
    baseUrl: process.env.LORANJ_API_URL!,
    headers: { origin: process.env.SITE_ORIGIN! }, // must be an allowed domain
  });
  return <EntryForm config={promo.config} />;
}

// app/entry-form.tsx
"use client";
import { Loranj } from "@loranj/sdk";

export function EntryForm({ config }) {
  const campaign = Loranj.fromConfig(config, {
    campaignKey: process.env.NEXT_PUBLIC_LORANJ_CAMPAIGN_KEY!,
    baseUrl: process.env.NEXT_PUBLIC_LORANJ_API_URL!,
  });
  // render config.fields, then campaign.submitEntry(input, { turnstileToken })
}

Submit from the browser, not the server. Loranj uses the shopper's own origin and IP for its checks and rate limits.

From Node, browsers' automatic Origin header is missing, so add one from the campaign's allowed domains, as above. You can also pass your own fetch, a timeoutMs (default 10 seconds) and an AbortSignal.