Refund Manager Embed ​

The Refund Manager embed provides a complete interface for managing refunds on an order. It displays both the history of previous refunds and any items that are still eligible for refunding, allowing users to select and process refunds directly.

When opened, the embed displays a modal listing the order's items grouped by journey. Items that can still be refunded show what was paid and what the traveller gets back, and items that have already been refunded are marked with the status of their refund. The user can select one or more items and submit a refund request, with the embed handling all API communication automatically.

The Refund Manager is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Refund Manager in action.

Getting Started ​

To add the Refund Manager to your website, you first need to load the script. The script is a standard JavaScript module and can be loaded using the script tag.

<script
  src="https://allaboard.eu/embed/aa-refund-manager-modal.js"
  type="module"></script>

<script
  src="https://allaboard.eu/embed/aa-refund-manager-modal.js"
  type="module"></script>

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

To open the modal you can either render the element with the open attribute or set it using javascript.

<aa-refund-manager-modal
  open
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4"></aa-refund-manager-modal>

<aa-refund-manager-modal
  open
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4"></aa-refund-manager-modal>

<aa-refund-manager-modal
  id="my-refund-modal"
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4"></aa-refund-manager-modal>

<button type="button" id="button">Manage refunds</button>

<script>
const button = document.getElementById('button')
const modal = document.getElementById('my-refund-modal')
button.addEventListener('click', () => {
  modal.open = true
})
</script>

<aa-refund-manager-modal
  id="my-refund-modal"
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4"></aa-refund-manager-modal>

<button type="button" id="button">Manage refunds</button>

<script>
const button = document.getElementById('button')
const modal = document.getElementById('my-refund-modal')
button.addEventListener('click', () => {
  modal.open = true
})
</script>

Credentials ​

This embed runs on public web pages, so whatever you pass as publicApiKey is visible to anyone who views the page. It works on an order that already exists: it reads that order's refund history and refundable items, and starts refunds on it. Any API key that can do that on one order can do it on every order on your sales agent, so no API key belongs in this attribute.

Pass an access token instead. Mint one on your server for the order the modal is opened on, with both capabilities, and render it into the page:

mutation CreateAccessToken {
  createAccessToken(
    restrictions: { orderId: "order_57c4r1a7t2p2h003300404y0w4" }
    capabilities: [READ, WRITE]
  ) {
    token
  }
}

mutation CreateAccessToken {
  createAccessToken(
    restrictions: { orderId: "order_57c4r1a7t2p2h003300404y0w4" }
    capabilities: [READ, WRITE]
  ) {
    token
  }
}

Mint a fresh token for each page render — the default lifetime is 15 minutes — and put the returned token in the embed's publicApiKey attribute. The attribute name is unchanged; only the value is. A token reaches the one order it was minted for, and only until it expires: a visitor who copies it out of the page can refund and pay for that order until then, and can do nothing at all to your other orders.

For which credential each embed takes, see Configuring embeds safely.

Cost Centers ​

Orders are billed against a cost center, which determines the payment method and commercial terms applied. See Cost Centers for details.

Attributes ​

The Refund Manager communicates with the All Aboard API to fetch refund history and refundable items for a given order. The <aa-refund-manager-modal> element can be configured by setting attributes on the element.

Events ​

To listen for events from the Refund Manager, you can use the addEventListener method. This is useful if you want to, e.g., update your UI when a refund is processed or handle errors.

Slots ​

Custom elements use slots to display custom markup inside the element.

error ​

You can use the error slot to display a custom error message when the modal fails to load.

<aa-refund-manager-modal
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4">
  <p slot="error">Oops, something went wrong.</p>
</aa-refund-manager-modal>

<aa-refund-manager-modal
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4">
  <p slot="error">Oops, something went wrong.</p>
</aa-refund-manager-modal>

success ​

You can use the success slot to show your own message once a refund has been requested. It is displayed above the list after a refund succeeds or is pending, and is not shown if the refund fails. The slot is rendered as you provide it, so style it to fit your site.

<aa-refund-manager-modal
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4">
  <div slot="success">
    <strong>Your refund is on its way.</strong>
    <p>It can take a few days before the money shows up in your account.</p>
  </div>
</aa-refund-manager-modal>

<aa-refund-manager-modal
  publicApiKey="aat_your-access-token-here"
  order="order_57c4r1a7t2p2h003300404y0w4">
  <div slot="success">
    <strong>Your refund is on its way.</strong>
    <p>It can take a few days before the money shows up in your account.</p>
  </div>
</aa-refund-manager-modal>

Example ​

Selecting an item to refund, with an earlier refund on the same journey:

After the refund, with a message in the success slot: