React integration

Drop in the <TixCoreCheckout /> component. It renders the Buy button and owns the entire payment-to-ticket flow.

Install

bash

npm install @tixcore/react

Usage

tsx

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

export default function BuyTicket() {
  return (
    <TixCoreCheckout
      apiKey="tix_live_•••••"
      eventId="evt_champions_final"
      onSuccess={(ticket) => {
        console.log("Issued", ticket.ticketNumber);
      }}
    />
  );
}

Props

apiKey: string — public API key. Required.
eventId: string — event to sell. Required.
ticketTypeId?: string — pre-select a type.
theme?: "dark" | "light" — color scheme.
buttonLabel?: string — custom button text.
onSuccess?: (ticket) => void — issued-ticket callback.
onError?: (err) => void — failure callback.

The component loads the gateway’s checkout script on demand and cleans it up on unmount, so it’s safe to render conditionally inside modals or routes.

Styling

The default button inherits your theme prop. To fully customize, pass render to supply your own trigger:

tsx

<TixCoreCheckout
  apiKey="tix_live_•••••"
  eventId="evt_champions_final"
  render={({ open, loading }) => (
    <button onClick={open} disabled={loading}>
      {loading ? "Loading…" : "Get tickets"}
    </button>
  )}
/>