JavaScript and events

You don't need JavaScript for the blocks. It helps if you want to react to a purchase or build a part entirely yourself. The script provides window.TickySmart for this.

Events

Every step announces itself as an event on document. Here's how to count purchases in your own analytics tool:

document.addEventListener("tickysmart:purchase", (event) => {
  const { transactionId, value, currency, items } = event.detail;
  gtag("event", "purchase", { transaction_id: transactionId, value, currency, items });
});

Event	When
tickysmart:view_item_list	The event list is there
tickysmart:view_item	A ticket selection is there
tickysmart:checkout	Tickets are reserved, the checkout opens
tickysmart:add_to_cart, tickysmart:begin_checkout	The checkout is shown
tickysmart:add_payment_info	The buyer submits the form
tickysmart:purchase	Paid. Fires only once per order and device
tickysmart:locale	The language changed

The data in event.detail follows Google Analytics 4's e-commerce schema: currency, value, items, plus transactionId for a purchase.

Settings at startup

Instead of attributes on the script, you can set everything here too:

await TickySmart("ts_pk_live_…", {
  locale: "en",
  urls: { event: "/programme/{slug}", order: "/checkout?ts_order={id}" },
  partner: "city-utilities",
  messages: { "shop.checkout": "Buy now" },
  stripeAppearance: { theme: "flat" },
});

Reading data

const shop = await TickySmart("ts_pk_live_…");
const info = await shop.info.load();
const events = await shop.events.load();
const calendar = await shop.calendar("2027-03-01", "2027-03-31", null).load();

const event = shop.event("summer-fest");
await event.data.load();
// view() needs shop and event, hence shop.info.load() above
console.log(event.view().title, event.view().tickets);

Building the ticket selection yourself

The selection runs through the same object as the blocks. So you can build your own interface and still use ts-cart-total or ts-cart-button:

const event = shop.event("summer-fest");
await Promise.all([shop.info.load(), event.data.load()]);
event.subscribe(() => {
  const selection = event.selection();
  document.querySelector("#total").textContent = selection.total;
});

event.setDate(dateId);
event.setQuantity(ticketId, 2);
await event.applyCode("SUMMER");
const order = await event.reserve(); // leads to the checkout, errors are in event.state.error

Amounts are whole numbers in the currency's smallest unit, so cents for euros and whole yen for yen.

Building the checkout yourself

const order = shop.order(orderId);
await order.load();
order.setValues({ email, firstName, lastName, acceptTerms: true });
await order.applyVoucher("7YQ9-C6V5-MACA");
await order.submit();
console.log(order.state.order, order.state.invalid, order.state.code);

ts-payment then shows the payment. Card details may only go into the provider's fields, so you can't replace this part.

Texts

The names of the texts are the same as in TickySmart's interface. The most common:

Name	Text
shop.checkout	Checkout
shop.total	Total
shop.soldOut	Sold out
shop.freePrice	Free
shop.priceFrom	from

All names of a language are in the file https://embed.tickysmart.io/elements/v1/en.js.