Next.js integration

Use the React component inside the App Router. Because checkout runs in the browser, render it from a client component.

Client component

tsx

"use client";
import { TixCoreCheckout } from "@tixcore/react";

export function BuyButton({ eventId }: { eventId: string }) {
  return (
    <TixCoreCheckout
      apiKey={process.env.NEXT_PUBLIC_TIXCORE_KEY!}
      eventId={eventId}
      onSuccess={(t) => console.log(t.ticketNumber)}
    />
  );
}

Only ever expose a public API key via NEXT_PUBLIC_…. Never put a secret key in client code or in aNEXT_PUBLIC_ variable.

Use it in a page

tsx

import { BuyButton } from "./buy-button";

export default function EventPage() {
  return (
    <main>
      <h1>Champions League — Final</h1>
      <BuyButton eventId="evt_champions_final" />
    </main>
  );
}

Server-side: create orders yourself

If you’d rather drive the flow from your own backend (e.g. to attach custom metadata), call the REST API from a route handler using your secret key, then hand the returned order to the gateway on the client.

// app/api/buy/route.ts
export async function POST(req: Request) {
  const body = await req.json();
  const res = await fetch(
    "https://your-app.netlify.app/api/v1/orders/create",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-tixcore-key": process.env.TIXCORE_SECRET_KEY!,
      },
      body: JSON.stringify(body),
    }
  );
  return Response.json(await res.json());
}