Payout Transactions List

Overview

Component to display a list of payout transactions for a specific payout.

Usage

<justifi-payout-transactions-list
auth-token="wct_reporting"
payout-id="po_456"
/>

Props, Events & Methods

Name	Type	Required	Default	Description
auth-token	string	Yes	—
columns	string	No	defaultColumnsKeys
payout-id	string	Yes	—

Events

• click-event: Row selection event that surfaces transaction_id.
• error-event: Surfaces API or token failures.

Authorization

Authorization is performed by passing a web component token as auth-token.

• Web Component Token: These tokens are generated by your backend services using the Web Component Tokens API. Each token can be scoped to perform a set number of actions and is active for 60 minutes. When creating a web component token for this specific component you'll need to use the role: read:account:account_id or write:account:account_id. Make sure the value for account_id matches the sub account the payout belongs to.

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)		—

Usage Example

---

---

<!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-payout-transactions-list</title>

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

<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.14.5/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>
<justifi-payout-transactions-list payout-id="po_123" auth-token="authToken" />
</body>

<script>
(function () {
  const payoutTransactionsList = document.querySelector('justifi-payout-transactions-list');

  payoutTransactionsList.addEventListener('click-event', (event) => {
    // here is where you would handle the click events
    console.log('click-event', event.detail);
  });

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

</html>