Docs

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 will display a modal with two main sections: a table showing the history of refunds for the order, and a list of refundable items that can be selected for a new 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.

Loading the script as module

The type attribute needs to be set to module for the script to load properly.

html
<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.

html
<aa-refund-manager-modal
  open
  publicApiKey="my-api-key"
  order="c85e061f-0e42-46b0-9fef-b6f692464d16"></aa-refund-manager-modal>
<aa-refund-manager-modal
  open
  publicApiKey="my-api-key"
  order="458cb0ea-3b75-49bd-9cd9-c6f739dd02c6"></aa-refund-manager-modal>
html
<aa-refund-manager-modal
  id="my-refund-modal"
  publicApiKey="my-api-key"
  order="9f19530d-a3ba-446c-a1dc-2031ef83fd7b"></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="my-api-key"
  order="ea4f334e-bd5a-430b-8073-35bc5b2af319"></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>

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.

* = Required
NameDescriptionRequired
publicApiKeyYour public API key. You can find your API key in the All Aboard Dashboard.Yes
orderThe order ID to manage refunds for.Yes
openWhether the refund manager modal is open. Set to true to display the modal.No
sessionIdThe session ID to use when calling the API. Can be any unique string that identifies the session. Used for analytics and troubleshooting.No
languageThe language to use for the modal. For example, en or sv.No

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.

NameDescription
aa-refund-manager-modal-refundEmitted when a Refund is successfully processed. The event detail will contain the refund object.
aa-refund-manager-modal-errorEmitted when an error occurs. The event detail will contain the error property which can be used to display an error message.
aa-refund-manager-modal-closeEmitted when the modal is closed. Useful for updating UI or cleanup when the user dismisses the Refund Manager modal.

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.

html
<aa-refund-manager-modal
  publicApiKey="my-api-key"
  order="6b4f15e7-a0e9-43fa-a264-0575534c6d7b">
  <p slot="error">Oops, something went wrong.</p>
</aa-refund-manager-modal>
<aa-refund-manager-modal
  publicApiKey="my-api-key"
  order="15d25be8-710f-4b04-adfb-6eb17e23357e">
  <p slot="error">Oops, something went wrong.</p>
</aa-refund-manager-modal>

Example ​