Paying for reservations online

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 must include the reservation token as the  token  query parameter. For example:  https://www.thetheatre.org/reservations?token={TokenId} . Spektrix generates the reservation token and adds it to the link it sends to the customer, so you don't need to create it. Read the token value from the page URL and pass it to the component.

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 initManagedComponent from the Spektrix package URL in a module script, then call it, passing the ID of the element and the required Spektrix configuration:

<script type="module">
import { initManagedComponent } from "https://system.spektrix.com/managed-components/spektrix-reservations/stable/package.js";

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

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;
}