Skip to main content

Dispute Management

Overview​

Component to render notification of disputed payments and allow platform to respond to dispute via form submission.

Props, events and methods

NameTypeRequiredDefaultDescription
auth-tokenstringYes—
dispute-idstringYes—

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.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;
    }

    ::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​

PartDescriptionDOM target
::part(heading4)—
::part(text)—