Version: 6.12

Dispute Management

Overview

Component to render notification of disputed payments and allow platform to respond to dispute via form submission. Only available for US platforms (USD payments).

Props, events and methods

Name	Type	Required	Default	Description
`auth-token`	`string`	Yes	—
`dispute-id`	`string`	Yes	—

Events

submit-event: Fires when the dispute response is submitted or when a dispute is accepted.
complete-form-step-event: Fires when a form step is completed; includes server response and completed form step.
click-event: Fires when users click on actions; event.detail.name indicates the action (e.g., nextStep, previousStep, cancelDispute, respondToDispute, submit).
error-event: Captures upload or API issues.

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:dispute:dispute_id or write:dispute:dispute_id. Make sure the value for dispute_id matches the prop you also pass separately.

Events usage

<justifi-dispute-management />

<script>
(function() {
  const disputeManagement = document.querySelector("justifi-dispute-management");
  
  disputeManagement.addEventListener("submit-event", (event) => {
    /* this event is raised when the server response is received at the end of the dispute response or when a dispute is accepted */
    console.log("server response received", event.detail.response);
  });

  disputeManagement.addEventListener("complete-form-step-event", (event) => {
    /* this event is raised when a form step is completed */

    let serverResponse = event.detail.response;
    let completedFormStep = event.detail.formStep;

    console.log("data from server", serverResponse);
    console.log("completed form step", completedFormStep);
  });

  disputeManagement.addEventListener("click-event", (event) => {
    let name = event.detail.name;
    
    console.log("Clicked item", event.detail);
    console.log("Clicked item name", name);
    
    /* Possible values for name are: nextStep, previousStep, cancelDispute, respondToDispute, and submit */
  });

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

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-dispute-management</title>

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

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

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

    ::part(background-color) {
      background-color: transparent;
    }

    ::part(button) {
      padding: 0.375rem 0.75rem;
      font-size: 16px;
      box-shadow: none;
      border-radius: 0px;
      line-height: 1.5;
      text-transform: none;
    }

    ::part(button-secondary) {
      color: #333;
      background-color: transparent;
      border-color: #333;
    }

    ::part(button-secondary):hover {
      background-color: rgba(0, 0, 0, .05);
      border-color: #333;
      color: #333;
    }

    ::part(button-disabled) {
      opacity: 0.5;
    }
  </style>

</head>

<body>
<justifi-dispute-management dispute-id="dp_123" auth-token="authToken" />
</body>

<script></script>

</html>

Theming & Layout

Part	Description	DOM target
`::part(heading4)`		—
`::part(text)`		—

Overview​