Checkout Embed

The checkout embed puts Jetron's full buying flow inside your page: ticket selection, quantities, promo codes, contact details, and payment. You supply one iframe and Jetron handles the rest, so there is no API key, no backend, and no checkout code on your side.

Get your embed code

Open the event in your Jetron Ticket dashboard and go to Integrations → Website Embed. The snippet is generated for you, already filled in with the event's slug and the theme you configured, so you can press Copy and paste it straight into your page.

The Website Embed page in the Jetron Ticket dashboard, showing the generated iframe snippet and a Copy button

Write it yourself

If you would rather build the URL in code, point an iframe at the checkout host followed by your event's slug:

<iframe
  width="100%"
  height="760"
  src="https://checkout.jetronticket.com/my-event"
  title="My Event checkout"
  referrerpolicy="no-referrer"
  allowfullscreen
></iframe>

That is the entire integration. The slug is the same slug the API returns for the event, so a page that already lists events can build the URL from data it has.

Set a real height

The dashboard snippet uses height="100%", which only fills the space if the element around it has a height of its own. In a normal page flow that collapses to nothing, so give the iframe a real height instead. See Sizing.

Theming

Two query parameters control the look:

Parameter	Values	Description
`theme`	`light` or `dark`	Colour mode for the checkout.
`colorScheme`	6-digit hex	Accent colour, applied as the checkout's primary colour.

<iframe
  src="https://checkout.jetronticket.com/my-event?theme=light&colorScheme=e0995a"
  width="100%"
  height="760"
  title="My Event checkout"
  referrerpolicy="no-referrer"
  allowfullscreen
></iframe>

colorScheme accepts the hex with or without a leading #. If you include the #, URL-encode it as %23, since a raw # would start a URL fragment:

const accent = '#e0995a'
const src = `https://checkout.jetronticket.com/${slug}?theme=light&colorScheme=${encodeURIComponent(accent)}`

Dashboard settings win

If you have set an embed mode or colour on the event in your dashboard, that configuration is applied after the URL parameters and overrides them. Use the dashboard when you want one consistent look, and the query parameters when the embedding page picks the colour per event.

The embed includes the promo-code field, validates codes against the current event, and reprices the cart automatically. Promo codes are event-scoped; global promo codes are not supported. If you build checkout with the API instead, see Promo codes.

Sizing

The embed does not resize itself and does not post messages to the parent page, so give the iframe a height that fits the tallest step of the flow. Around 760px works for most events. If your layout allows it, a viewport-relative height such as min(760px, 90vh) handles small screens more gracefully.

Because there is no message channel, the parent page is not notified when a purchase completes. To react to purchases on your own systems, use webhooks.

When to use the embed

The embed is the right choice when you want to start selling quickly, when you do not want to handle payment redirects yourself, or when you are selling a Seat Map event. Seat Map events cannot be sold through the API, but the embed supports them fully, including the seat picker.

Choose the API instead when you need control over every screen, want to collect custom fields, or are building the buying experience into an existing product flow.

Live example

syke-fluid-demo.jtr.rsvp embeds the checkout on several of its events and passes each event's accent colour through colorScheme, so the checkout matches the page it sits in. Its source is on GitHub at jetronmall/syke-event, and Example site explains the setup.