Skip to main content

Payout Details

Overview​

Component to display detailed information about a specific payout.

Usage​

<justifi-payout-details
account-id="acc_123"
auth-token="wct_reporting"
payout-id="po_456"
/>

Props, Events & Methods​

NameTypeRequiredDefaultDescription
auth-tokenstringYes—
enable-record-clickbooleanNofalse
payout-idstringYes—

Events​

  • error-event: Emits when payout data cannot be loaded.
  • record-click-event: Emitted when users click on a related record.

Theming & Layout​

PartDescriptionDOM target
::part(skeleton)—
::part(heading1)—
::part(heading2)—
::part(link)—
::part(text)—
::part(buttonLoading)—
::part(buttonPrimary)—
::part(buttonSecondary)—
::part(badge)—
::part(badgePrimary)—
::part(badgeSecondary)—
::part(badgeSuccess)—
::part(badgeDanger)—
::part(badgeWarning)—
::part(badgeInfo)—
::part(badgeLight)—
::part(badgeDark)—

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-details</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>
<justifi-payout-details payout-id="po_123" auth-token="authToken" />
</body>

<script>
(function () {
  const payoutDetails = document.querySelector('justifi-payout-details');

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

  payoutDetails.addEventListener('record-click-event', (event) => {
    // Handle the record click event
    console.log('Record clicked:', event.detail);
  });
})();
</script>

</html>