Overview
Component to display detailed information about a specific payment.
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-payment-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-payment-details payment-id="py_123" auth-token="authToken" />
</body>
<script>
(function () {
const paymentDetails = document.querySelector('justifi-payment-details');
paymentDetails.addEventListener('error-event', (event) => {
// here is where you would handle the error
console.error('error-event', event.detail);
});
})();
</script>
</html>
Props, Events & Methods
| Name | Type | Required | Default | Description |
|---|
auth-token | string | Yes | — | |
payment-id | string | Yes | — | |
Events
error-event: Surfaces API or token errors for logging.record-click-event: Emitted when users click on a related record (e.g., refund, dispute).
Theming & Layout
| Part | Description | DOM target |
|---|
::part(skeleton) | | — |
::part(heading1) | | — |
::part(heading2) | | — |
::part(link) | | — |
::part(text) | | — |
::part(badge) | | — |
::part(badgePrimary) | | — |
::part(badgeSecondary) | | — |
::part(badgeSuccess) | | — |
::part(badgeDanger) | | — |
::part(badgeWarning) | | — |
::part(badgeInfo) | | — |
::part(badgeLight) | | — |
::part(badgeDark) | | — |
Example Usage