Checkouts List

Overview

Component to render a formated list of checkouts for the requested account.

Custom columns

Pass a comma-separated list to the columns prop (created_at,payment_amount,status) to match the data points your operators expect.

Props, Events & Methods

Name	Type	Required	Default
`account-id`	`string`	Yes	—
`auth-token`	`string`	Yes	—
`columns`	`string`	No	`defaultColumnsKeys`

Events

click-event: Emitted when a row or control is clicked. event.detail.name indicates the source.
error-event: Fires when the list cannot load data due to network/auth issues.

Theming & Layout

Part	Description	DOM target
`::part(table)`		—
`::part(tableRow)`		—
`::part(tableFoot)`		—
`::part(tableFootRow)`		—
`::part(tableFootCell)`		—
`::part(tableHead)`		—
`::part(tableHeadRow)`		—
`::part(tableCell)`		—
`::part(loadingSpinner)`		—
`::part(tableEmpty)`		—
`::part(tableError)`		—
`::part(paginationButton)`		—
`::part(paginationButtonDisabled)`		—
`::part(paginationButtonIconNext)`		—
`::part(paginationButtonIconPrevious)`		—
`::part(paginationButtonText)`		—

Filters component emits custom events; ensure both components share the same container so spacing stays consistent.

Example Usage

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-checkouts-list</title>

<script
type="module"
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.esm.js"
></script>

<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.js"
></script>

<style>
    ::part(font-family) {
      font-family: georgia;   
    }
      
    ::part(color) {
      color: darkslategray;
    }

    ::part(background-color) {
      background-color: transparent;
    }
  </style>

</head>

<body>
<!-- Optional: add the filters component -->
<justifi-checkouts-list-filters></justifi-checkouts-list-filters>
<justifi-checkouts-list
  account-id="acc_123"
  auth-token="authToken"
  columns="created_at,payment_amount,status"
/>
</body>

<script>
(function () {
  const checkoutsList = document.querySelector('justifi-checkouts-list');

  checkoutsList.addEventListener('click-event', (event) => {
    // 'click-event' is emitted when a user clicks on a table row, or clicks on the next or previous page buttons
    // event.detail.name describes the action that was clicked - it could be 'nextPage', 'previousPage', or 'tableRow'
    // event.detail.data will be included if the action was 'tableRow', and will contain the data for the row that was clicked
    
    if (event.detail.name === 'tableRow') {
      // Here is where you would handle the click event
      console.log('data from click-event', event.detail.data);
    }
  });

  checkoutsList.addEventListener('error-event', (event) => {
    // here is where you would handle the error
    console.error('error-event', event.detail);
  });
})();
</script>

</html>

Overview​

Custom columns​

Props, Events & Methods​

Events​

Theming & Layout​