Events Reference

interface QariybEventDetail<T> {
  timestamp: number;      // Unix timestamp (ms)
  component: string;      // Component that emitted
  action: string;         // Action that occurred
  data: T;                // Event-specific payload
}

element.addEventListener('qariyb:checkout:success', (e) => {
  console.log(e.detail.timestamp);   // 1706745600000
  console.log(e.detail.component);   // 'checkout'
  console.log(e.detail.action);      // 'success'
  console.log(e.detail.data);        // { order, tickets, ... }
});

{ eventId: string }

{ event: QariybEvent }

{ error: string, eventId: string }

{
  from: CheckoutStep,
  to: CheckoutStep,
  eventId: string
}

// CheckoutStep = 'loading' | 'tickets' | 'details' | 'payment' | 'processing' | 'success' | 'error'

{
  cart: Cart,
  action: 'add' | 'remove' | 'clear',
  ticketId?: string,
  ticketName?: string
}

{
  email: string,
  name: string,
  phone?: string
}

{
  cartId: string,
  amount: number,    // cents
  currency: string
}

{ paymentIntentId?: string }

{
  discount: DiscountApplication,
  previousTotal: number
}

{
  code: string,
  error: string
}

{
  order: Order,
  tickets: OrderTicket[],
  requiresApproval: boolean
}

{
  error: string,
  code?: string,
  step?: CheckoutStep
}

{ eventId: string }

{
  tickets: TicketType[],
  event: QariybEvent
}

{
  ticketId: string,
  ticketName: string,
  quantity: number,
  previousQuantity: number,
  price: number,       // cents
  currency: string
}

{
  cart: Cart,
  eventId: string
}

{
  error: string,
  eventId: string
}

{ eventId: string }

{ eventId: string }

{
  eventId: string,
  reason: 'success' | 'cancel' | 'escape' | 'overlay'
}

{ eventId: string }

{ event: QariybEvent }

{
  event: QariybEvent,
  action: 'view' | 'tickets'
}

{
  error: string,
  eventId: string
}

{ organizationId: string }

{
  events: QariybEvent[],
  total: number,
  hasMore: boolean
}

{
  error: string,
  organizationId: string
}

{
  version: string,
  config: QariybConfig | undefined
}

window.addEventListener('qariyb:initialized', (e) => {
  console.log('SDK loaded:', e.detail.data.version);
});

const checkout = document.querySelector('qariyb-checkout');
checkout.addEventListener('qariyb:checkout:success', handler);

window.addEventListener('qariyb:checkout:success', handler);

<qariyb-checkout on-success="handleSuccess"></qariyb-checkout>
<script>
  function handleSuccess(data) {
    // data = e.detail.data (unwrapped)
  }
</script>

import type { QariybCustomEvent, CheckoutSuccessDetail } from '@qariyb/js';

const handler = (e: QariybCustomEvent<CheckoutSuccessDetail>) => {
  const { order, tickets } = e.detail.data;
  // Fully typed!
};

document.addEventListener('qariyb:checkout:success', handler as EventListener);