Rail Pass List Embed

There is a great variety of rail passes available in the All Aboard API, and to make displaying the options to your customers easier, we offer the embeddable Rail Pass List. It lets you display a list of rail passes on your website without requiring any programming.

The Rail Pass List will fetch a subset (of your choosing) of rail passes from the All Aboard API and display them in a list. Selecting a rail pass will open the Rail Pass Modal where the user can input their passengers' details and complete the purchase.

The list is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Rail Pass List in action.

Getting started

To add the Rail Pass List to your website, you first need to load the script. The script is a standard JavaScript module, so load it with a script tag whose type is module.

html

<script
  src="https://allaboard.eu/embed/aa-passbundle-list.js"
  type="module"></script>

The script will register the Custom Element aa-passbundle-list with the browser. The Custom Element can then be used in your HTML like any other HTML element.

html

<aa-passbundle-list
  publicApiKey="your-api-key-here"
  product="interrail-global-pass"></aa-passbundle-list>

Cost centers and API keys

This embed runs on public web pages, so its publicApiKey is visible to anyone who views the page. Use an API key with only the base scope and the payment gateway scope (live and live:payments:stripe, or test and test:payments:stripe when testing). Without the base scope every request is refused. With only those two scopes the key lets customers pay for their own bookings through the payment gateway, but it cannot read your orders or create orders that charge your wallet or invoice.

Orders made through the embed are billed against a cost center. Make sure the cost center the embed uses is configured with the payment gateway payment method so it matches the key's scope. See Cost Centers for details.

Attributes

The Rail Pass List communicates with the API to display the rail passes of your choosing. For the element to know which rail passes to display in the list, you need to configure it with some attributes. The <aa-passbundle-list> element can be configured by setting attributes on the element.

* = Required
Name	Description	Required
`publicApiKey`	Your public API key. You can find your API key in the Dashboard.	Yes
`product`	Identifier of the PassBundle product to display. For example, `interrail-global-pass`.	No
`campaignCode`	The campaign code to use when fetching the PassBundle. For example, `black-friday-2027`.	No
`badge`	A badge that is displayed in the corner of the card. Can be used to e.g. highlight current offers.	No
`costCenter`	The id of the CostCenter to bill each passenger's travel against. Defaults to the agent's default cost center.	No
`sessionId`	The session ID to use when calling the API. Can be any unique string that identifies the session. Used for analytics and troubleshooting.	No
`currency`	The currency to display prices in. For example, `EUR` or `GBP`.	No
`language`	The language to use for the list and modal. For example, `en` or `sv`.	No
`passengers`	The default set of passengers to use for finding availability. See below for details.	No

The `passengers` attribute

You have two options for how to set the passengers attribute.

Encoded as a comma-separated attribute value, i.e.: {TYPE}<.{AGE}>?
Set it directly on the <aa-passbundle-list> element using JavaScript.

<aa-passbundle-list
  publicApiKey="your-api-key-here"
  product="interrail-global-pass"
  passengers="ADULT,YOUTH.8"></aa-passbundle-list>

const list = document.querySelector('aa-passbundle-list')
list.passengers = [{ type: 'ADULT' }, { type: 'YOUTH', age: 8 }]

Example

See an example implementation of the Rail Pass List below. Try changing the product, currency, language and badge to see how the list changes.

Product Currency Language Badge