Paying for reservations online

Early Access

This functionality is available under early access. Its behavior or response format may change before general availability and it may require additional configuration by the Spektrix team to access it. Contact us if you plan to use it in a production integration.

The Spektrix Reservations managed component provides a checkout page where customers can review and pay for reserved tickets.

Initialising the component

The URL of the page hosting the component can include the reservation token as the token query parameter. For example: https://www.thetheatre.org/reservations?token={tokenId}.

Add an empty element to the page where you want the component to appear. The element must have a unique id.

<div id="reservation-payment"></div>

Import and call initManagedComponent, passing the ID of the element and the required Spektrix configuration:

import { initManagedComponent } from "spektrix-reservations";

await initManagedComponent({
    containerId: "reservation-payment",
    clientName: "thetheatre",
    apiHost: "https://tickets.thetheatre.org",
    token: "<tokenId>",
    topLevelDomain: "thetheatre.org",
});

Required configuration

Parameter	Type	Description
containerId	string	The id of the HTML element where the component will be rendered.
clientName	string	The client's Spektrix system name. For example, thetheatre.
apiHost	string	The Spektrix API host. For example, https://tickets.thetheatre.org.
token	string	The reservation token used to load the customer's reservation.
topLevelDomain	string	The top-level domain of the website hosting the component. For example, thetheatre.org. This value is passed to the Spektrix Payments component.

All configuration values are required. initManagedComponent returns a Promise<void> that resolves when initialisation is complete.

Styling

The component inherits the font from the page where it is embedded, including for form controls.

The component uses a primary colour for buttons, links, selected controls, and focus indicators. It resolves this colour in the following order:

1. The --managed-component-primary-color CSS custom property on the component container or one of its ancestors.
2. The computed colour of the host page's primary button.
3. The default colour, #0b1633.

Set the CSS custom property to use the website's primary colour:

#reservation-payment {
    --managed-component-primary-color: #6b2d84;
}