Resyevents Ticketing

resyevents.js sells tickets to live events on your own site: browse a venue's events, reserve tickets, take payment, and confirm the order. Everything the Resyevents storefront does, on your domain.

Quick Start

<script src="https://js.resytech.com/latest/resyevents.js"></script>

<resyevents-ticket-picker
  event-slug="summer-block-party"
  checkout-url="/tickets/checkout">
</resyevents-ticket-picker>

<script>
  const events = new ResyeventsApi();
  events.registerComponents();
</script>

There is no initialize() call and no access token. Every endpoint on the ticketing API is anonymous — the event slug is all you need.

Events Are Not Bookings

Live events are a different product on a different host, and nothing from ResytechApi applies:

You can load both libraries on one page. They define separate globals and share no symbols.

The Buying Flow

1. Browse — list a venue's events, or fetch one event with its ticket tiers, add-ons, and live availability.
2. Reserve — the buyer's picks become server-side holds that take that inventory out of circulation for about 10 minutes, so two buyers racing for the last tickets can never both win.
3. Check out — the holds are priced into an order and paid by card in the browser.
4. Confirm — fulfillment happens on a payment webhook, so the order becomes Paid a moment after the card clears. Poll for it. The tickets themselves are emailed to the buyer.

Web Components

The fastest path. Three pages, or all on one — the cart survives navigation via sessionStorage.

<!-- A venue's upcoming events -->
<resyevents-list
  venue-slug="the-warehouse"
  limit="12"
  href-pattern="/tickets/{slug}">
</resyevents-list>

<!-- Pick tickets, then send the buyer to your checkout page -->
<resyevents-ticket-picker
  event-slug="summer-block-party"
  checkout-url="/tickets/checkout">
</resyevents-ticket-picker>

<!-- Buyer details, payment, order creation -->
<resyevents-checkout
  return-url="/tickets/confirmed"
  back-url="/tickets/summer-block-party">
</resyevents-checkout>

<!-- Polls until the order settles, then shows the confirmation -->
<resyevents-order></resyevents-order>

<resyevents-order> reads ?order= from the URL, which is exactly what <resyevents-checkout return-url="…"> appends — so those two need no wiring between them.

Components

Attributes

href-pattern takes {slug} and {uuid} placeholders and turns each card into a real link. Leave it off and the card emits event-select instead.

Events

document.addEventListener('tickets-reserved', (e) => {
  console.log('Held until', e.detail.holds[0].expiresAt);
});

Theming

Components use the event's own theme when the organizer set one, falling back to a neutral light palette — so an unthemed event does not drop a dark panel onto your page. Override with CSS custom properties:

<resyevents-ticket-picker
  event-slug="summer-block-party"
  style="--re-accent: #e11d48; --re-radius: 8px;">
</resyevents-ticket-picker>

Each component also exposes part names (container, card, row, summary, cta, totals, tickets) for ::part() styling.

Building Your Own UI

events.cart holds the session and hold protocol so you do not have to reimplement it.

const events = new ResyeventsApi();

const { event } = await events.event.getEvent('summer-block-party');
events.cart.begin(event.uuid, event.slug);

// All-or-nothing: if any hold fails, the ones already taken are released for you.
const result = await events.cart.reserve([
  { kind: 'ticket', uuid: tier.uuid,  name: tier.name,  price: tier.price,  quantity: 2 },
  { kind: 'addon',  uuid: addon.uuid, name: addon.name, price: addon.price, quantity: 1 },
]);

if (!result.success) {
  showError(result.message);   // already readable: 'Only 2 left for "VIP".'
  return;
}

const quote = await events.cart.quote();   // real fees and taxes

const checkout = await events.cart.checkout({
  buyerName: 'Alex Chen',
  buyerEmail: 'alex@example.com',
});

Taking Payment

Event charges are direct charges on the organizer's connected Stripe account, so Stripe.js must be scoped to it:

if (checkout.success && checkout.status === 'paid') {
  // A free order — already fulfilled, no payment step.
} else if (checkout.success) {
  const stripe = Stripe(publishableKey, { stripeAccount: checkout.stripeAccountId });
  const elements = stripe.elements({ clientSecret: checkout.clientSecret });
  // …mount the Payment Element and confirm
}

Rules the API Enforces

Each of these fails quietly if you ignore it. events.cart handles all of them — you only need them when calling events.holds directly.

Mint a session before holding anything. events.holds.createSession(). The server does not create one implicitly; a request without a token used to get a brand-new session every time, which defeated the per-session hold limit.

Store the sessionToken from every response that returns one. The server refreshes it once it is past half its life, to keep an active buyer from lapsing. Ignoring the refreshed value works right up until the original expires — at which point the cart dies mid-checkout with live holds still holding inventory.

Drop a rejected session, do not retry it. INVALID_SESSION_TOKEN is reported separately from INVALID_REQUEST precisely so you can tell "the session is dead" from "the email is malformed".

Turnstile tokens are single use. Reset the widget after every submit attempt. A challenge only applies to events with a free tier; the site key arrives on the event as captchaSiteKey, and can also arrive later on a CAPTCHA_FAILED response if the gate armed mid-session.

Quantity Rules

The picker enforces the same limits as the Resyevents storefront, so an embedded picker and the public page behave identically for the same event:

• A tier with a minimum per order must be bought at or above that minimum.
• The stepper is capped by whichever is lower: the organizer's per-order maximum, or what is actually left. With no maximum set, one order tops out at 10 of that tier.
• At 8 or fewer remaining, an "Only N left" line appears.
• Add-on steppers stay disabled until at least one ticket is selected — nobody can buy a drink package with no admission.

Availability is a snapshot: another buyer can take the last ticket between the page load and the hold. Show available as guidance and let reserve() settle it — on failure the picker re-reads the event so the buyer sees what is truly left.

Failure Codes

Failures come back with a machine-readable code and readable text already in message. describeHoldFailure() and describeCheckoutFailure() are exported if you want your own wording.

Dates and Time Zones

Timestamps are ISO strings, not Date objects, and every event carries its own timeZone — which is not the browser's. A doors-open time must read as the local time at the venue no matter where the buyer is sitting.

import { formatRange, formatDay, formatTime, asUtcDate } from 'resytech-client-lib/resyevents';

formatRange(event.startAt, event.endAt, event.timeZone);
// "Sat, Sep 12, 2026 · 7:00 PM – 11:00 PM EDT"

Formatting with plain new Date(...).toLocaleString() shifts every event by the viewer's offset.

API Reference

// Discovery
await events.event.getEvent(slug);
await events.venue.getVenue(slug);
await events.venue.getEvents(slug, { past: false, limit: 12, offset: 0 });

// Cart — the intended entry point
events.cart.begin(eventUuid, eventSlug);
await events.cart.reserve(selections);
await events.cart.quote();
await events.cart.checkout({ buyerEmail, buyerName, attendeeNames, captchaToken });
await events.cart.releaseAll();

// Raw endpoints — escape hatch
await events.holds.createSession();
await events.holds.holdTickets({ ticketTypeUuid, quantity, sessionToken });
await events.holds.holdAddon({ addonUuid, quantity, sessionToken });
await events.holds.releaseHold(holdUuid, sessionToken);
await events.checkout.quote({ eventUuid, sessionToken });
await events.checkout.checkout({ eventUuid, sessionToken, buyerEmail });

// Order
await events.order.getOrder(orderUuid);
await events.order.pollUntilSettled(orderUuid, { intervalMs, maxAttempts, onUpdate, signal });

Every response carries the same envelope as the booking client — success, message, statusCode, action, isNetworkError — plus its payload. Nothing throws: a network failure comes back as success: false with isNetworkError: true. See Error Handling.

Configuration

const events = new ResyeventsApi({
  debug: true,
  timeout: 30000,
  cartStorageKey: 'resyevents_cart',
});

Auto-Initialization

<script src="https://js.resytech.com/latest/resyevents.js" data-resyevents-auto="true"></script>

Creates the client, registers the components, and exposes it as window.resyevents. Without the attribute nothing is created and no request is made.

Security Notes

• An order UUID is a bearer credential. It grants access to that order — buyer details and the admission tokens. Keep it out of anything indexable, cacheable, or shareable, and off analytics query strings.
• Admission QR codes are emailed, never rendered by these components. That is deliberate; a confirmation page is a far easier thing to screenshot and forward than an inbox.
• chargesEnabled: false means the organizer has not finished Stripe onboarding. Hide the buy flow rather than letting the buyer fail at the last step — the ticket picker does this for you.

Next Steps

• Live Events (operator guide) — creating events, tiers, venues, payouts
• The Storefront — what the public page does, which these components mirror
• Error Handling — the response envelope