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
| Name | Type | Required | Default | Description |
|---|
auth-token | string | Yes | — | |
enable-record-click | boolean | No | false | |
payout-id | string | Yes | — | |
Events
error-event: Emits when payout data cannot be loaded.record-click-event: Emitted when users click on a related record.
Theming & Layout
| Part | Description | DOM target |
|---|
::part(skeleton) | | — |
::part(heading1) | | — |
::part(heading2) | | — |
::part(link) | | — |
::part(text) | | — |
::part(buttonLoading) | | — |
::part(buttonPrimary) | | — |
::part(buttonSecondary) | | — |
::part(buttonSuccess) | | — |
::part(buttonDanger) | | — |
::part(buttonWarning) | | — |
::part(buttonInfo) | | — |
::part(buttonLight) | | — |
::part(buttonDark) | | — |
::part(buttonLink) | | — |
::part(buttonOutlinePrimary) | | — |
::part(buttonOutlineSecondary) | | — |
::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.13.0/dist/webcomponents/webcomponents.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.13.0/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>