npm - @justifi/webcomponents - Versions diffs - 6.5.1-rc.3 → 6.5.1-rc.4 - Mend

@justifi/webcomponents 6.5.1-rc.3 → 6.5.1-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (520) hide show

package/docs/modular-checkout/sub-components/sezzle-payment-method.mdx ADDED Viewed

@@ -0,0 +1,184 @@
+---
+id: modular-checkout/sub-components/sezzle-payment-method
+title: Sezzle Payment Method
+description: Sezzle BNPL rail for Modular Checkout, including disclosure copy and redirect handling.
+sidebar_position: 24
+---
+import { PropsTable, PartsTable } from '../../helpers';
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Renders a radio input for selecting the Sezzle payment method, if BNPL (Buy Now Pay Later) is enabled for the sub account.
+This component is **designed to be used within** the `justifi-modular-checkout` and **does not accept props directly**. Instead, it relies on the shared state passed through the Stencil Store, managed by the `justifi-modular-checkout` component.
+**Authorization** and business context are also handled by `justifi-modular-checkout`, which manages authentication tokens and related configuration.
+This component exposes **no public methods or properties** and is not intended for standalone use.
+## Usage
+<pre><code className="language-html">{`<!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-sezzle-payment-method</title>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"></script>
+  <style>
+      /** These are the available parts for styling the component. */
+      ::part(text) {
+        // text styles
+      }
+      ::part(text-danger) {
+        // text danger styles
+      }
+      ::part(label) {
+        // label styles
+      }
+      ::part(input-radio) {
+        // input radio styles
+      }
+      ::part(input-radio-focused) {
+        // input radio focused styles
+      }
+      ::part(input-radio-checked) {
+        // input radio checked styles
+      }
+      ::part(input-radio-checked-focused) {
+        // input radio checked focused styles
+      }
+      ::part(input-radio-invalid) {
+        // input radio invalid styles
+      }
+    </style>
+</head>
+<body>
+  <justifi-modular-checkout
+    auth-token="authToken"
+    checkout-id="ch_123"
+  >
+    <justifi-sezzle-payment-method />
+  </justifi-modular-checkout>
+</body>
+<script>
+  (function() {
+    const modularCheckout = document.querySelector('justifi-modular-checkout');
+    const submitButton = document.querySelector('#submit-button');
+    submitButton.addEventListener('click', () => {
+      modularCheckout.submitCheckout();
+    });
+    modularCheckout.addEventListener('error-event', (event) => {
+      console.error(event.detail);
+    });
+    document.addEventListener('submit-event', (event) => {
+      console.log('Checkout completed successfully!', event.detail);
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'merchant-id',
+        type: 'string',
+        required: true,
+        description:
+          'Sezzle merchant identifier configured in your JustiFi account.',
+      },
+      {
+        name: 'terms-url',
+        type: 'string',
+        description: 'Overrides the default Sezzle terms link.',
+      },
+      {
+        name: 'locale',
+        type: 'string',
+        defaultValue: 'en-US',
+        description: 'Controls copy for disclosures.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `sezzle-redirect`: Fires before redirecting the customer to Sezzle.
+- `sezzle-returned`: Emits when the customer comes back to the checkout with approval data.
+- `error`: Surfaces issues retrieving Sezzle offers or redirect URLs.
+### Public methods
+1. `begin()` – Trigger Sezzle flow programmatically (useful for custom list UI).
+## Theming & Layout
+- Respect Sezzle's branding by keeping the provided colors and logos intact.
+<div
+  dangerouslySetInnerHTML={{
+    __html: PartsTable([
+      {
+        name: 'text',
+        description: 'Text styles.',
+      },
+      {
+        name: 'text-danger',
+        description: 'Danger/error text styles.',
+      },
+      {
+        name: 'label',
+        description: 'Label styles.',
+      },
+      {
+        name: 'input-radio',
+        description: 'Radio input styles.',
+      },
+      {
+        name: 'input-radio-focused',
+        description: 'Radio input styles when focused.',
+      },
+      {
+        name: 'input-radio-checked',
+        description: 'Radio input styles when checked.',
+      },
+      {
+        name: 'input-radio-checked-focused',
+        description: 'Radio input styles when checked and focused.',
+      },
+      {
+        name: 'input-radio-invalid',
+        description: 'Radio input styles when invalid.',
+      },
+    ]),
+  }}
+/>
+## Static examples
+### Track redirects
+<pre><code className="language-js">{`const sezzle = document.querySelector('justifi-sezzle-payment-method');
+sezzle.addEventListener('sezzle-redirect', () => analytics.track('sezzle_redirect_started'));`}</code></pre>

package/docs/modular-checkout/sub-components/summary.mdx ADDED Viewed

@@ -0,0 +1,108 @@
+---
+id: modular-checkout/sub-components/summary
+title: Modular Checkout Summary
+description: Order summary block that lists line items, totals, and ancillary disclosures.
+sidebar_position: 27
+---
+import { PropsTable, PartsTable } from '../../helpers';
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Renders a summary of checkout details consisting of the checkout description and amount passed in the [create checkout API request](https://docs.justifi.tech/api-spec#tag/Checkouts/operation/CreateCheckout) as part of a checkout flow.
+This component is **designed to be used within** the `justifi-modular-checkout` and **does not accept props directly**. Instead, it relies on the shared state passed through the Stencil Store, managed by the `justifi-modular-checkout` component.
+**Authorization** and business context are also handled by `justifi-modular-checkout`, which manages authentication tokens and related configuration.
+This component exposes **no public methods or properties** and is not intended for standalone use.
+## Usage
+<pre><code className="language-html">{`<!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-checkout-summary</title>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"
+></script>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+<style>
+  /** These are the available parts for styling the component. */ ::part(text){' '}
+  {
+    // text styles
+  }
+</style>
+</head>
+<body>
+  <justifi-modular-checkout
+    auth-token="authToken"
+    checkout-id="ch_123"
+    save-payment-method="true"
+  >
+    <justifi-checkout-summary />
+  </justifi-modular-checkout>
+</body>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div dangerouslySetInnerHTML={{ __html: PropsTable([
+    {
+      name: 'checkout-id',
+      type: 'string',
+      required: true,
+      description: 'Determines the line items and totals to display.',
+    },
+    {
+      name: 'show-disclosures',
+      type: 'boolean',
+      defaultValue: 'false',
+      description:
+        'Displays compliance copy (e.g., insurance terms, surcharges).',
+    },
+    {
+      name: 'show-line-item-icons',
+      type: 'boolean',
+      defaultValue: 'true',
+      description: 'Hide icons when you want an ultra-minimal summary.',
+    },
+  ]) }} />
+### Events
+No custom events; summary listens to the parent checkout for updates automatically.
+### Public methods
+1. `refresh()` – Fetch updated totals (useful if you change the checkout server-side).
+## Theming & Layout
+<div dangerouslySetInnerHTML={{ __html: PartsTable([
+    {
+      name: 'text',
+      description: 'Text styles for the summary component.',
+    },
+  ]) }} />
+## Static examples
+### Custom refresh
+<pre><code className="language-js">{`const summary = document.querySelector('justifi-modular-checkout-summary');
+document.querySelector('#recalculate').onclick = () => summary.refresh();`}</code></pre>

package/docs/payment-facilitation/dispute-management/index.mdx ADDED Viewed

@@ -0,0 +1,98 @@
+---
+id: payment-facilitation/dispute-management/index
+title: Dispute Management
+description: Operator console for reviewing and responding to card disputes.
+sidebar_position: 34
+---
+import { PropsTable, PartsTable } from '../../helpers';
+## Overview
+Component to render notification of disputed payments and allow platform to respond to dispute via form submission.
+## Usage
+<pre><code className="language-html">{`<justifi-dispute-management
+  account-id="acc_123"
+  auth-token="wct_disputes"
+  dispute-id="dp_456"
+/>`}</code></pre>
+## Props, Events & Methods
+<div dangerouslySetInnerHTML={{ __html: PropsTable([
+    {
+      name: 'account-id',
+      type: 'string',
+      required: true,
+      description: 'Authorizes access to disputes for a platform or merchant.',
+    },
+    {
+      name: 'auth-token',
+      type: 'string',
+      required: true,
+      description: 'Token with `write:disputes` scope.',
+    },
+    {
+      name: 'dispute-id',
+      type: 'string',
+      required: true,
+      description: 'Specific dispute to review/respond to.',
+    },
+    {
+      name: 'read-only',
+      type: 'boolean',
+      defaultValue: 'false',
+      description: 'Disable response actions when true.',
+    },
+  ]) }} />
+### Events
+- `evidence-uploaded`: Fires when users add files or notes.
+- `status-changed`: Indicates dispute submission or withdrawal.
+- `error-event`: Captures upload or API issues.
+### Public methods
+1. `refresh()` – Reload in-progress disputes to reflect new deadlines or statuses.
+## Theming & Layout
+<div dangerouslySetInnerHTML={{ __html: PartsTable([
+    {
+      name: 'font-family',
+      description: 'Controls the font family for the component.',
+    },
+    {
+      name: 'color',
+      description: 'Controls the text color.',
+    },
+    {
+      name: 'background-color',
+      description: 'Controls the background color.',
+    },
+    {
+      name: 'button',
+      description: 'Button styles.',
+    },
+    {
+      name: 'button-secondary',
+      description: 'Secondary button styles.',
+    },
+    {
+      name: 'button-disabled',
+      description: 'Disabled button styles.',
+    },
+  ]) }} />
+## Static examples
+### Listening for evidence uploads
+<pre><code className="language-js">{`const disputes = document.querySelector('justifi-dispute-management');
+disputes.addEventListener('evidence-uploaded', ({ detail }) => {
+toast.success('Uploaded ' + detail.file_name);
+});`}</code></pre>

package/docs/payment-facilitation/index.mdx ADDED Viewed

@@ -0,0 +1,21 @@
+---
+id: payment-facilitation/index
+title: Payment Facilitation
+description: Core flows for capturing, refunding, and managing disputes.
+---
+Build an end-to-end payment experience by combining these focused guides:
+1. [Unified Fintech Checkout™](./unified-fintech-checkout™/index) – the
+   full-stack checkout shell for authorization and capture.
+2. [Tokenize Payment Method](./tokenize-payment-method/index) – vault cards or
+   bank accounts for future use.
+3. [Refund Payment](./refund-payment/index) – return funds with audit-friendly
+   status updates.
+4. [Dispute Management](./dispute-management/index) – monitor chargebacks and
+   submit compelling evidence.
+> Once your payment-facilitation configuration is live, tie it into
+> `[Entities](../entities/index)` and `[Merchant Tools](../merchant-tools/index)`
+> to keep back-office teams in sync.

package/docs/payment-facilitation/refund-payment/index.mdx ADDED Viewed

@@ -0,0 +1,230 @@
+---
+id: payment-facilitation/refund-payment/index
+title: Refund Payment
+description: Guided UI for issuing full or partial refunds with reason codes and audit trails.
+sidebar_position: 33
+---
+import { PropsTable, PartsTable } from '../../helpers';
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a form for partially or fully refunding a payment based on a provided payment ID.
+## Usage
+<pre><code className="language-html">{`<!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-refund-payment</title>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/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-disabled) {
+      opacity: 0.5;
+    }
+    ::part(input) {
+      border-color: #555;
+      border-width: 1px;
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px;
+      border-top-width: 1px;
+      border-radius: 0;
+      border-style: solid;
+      box-shadow: none;
+      font-size: 1rem;
+      font-weight: normal;
+      line-height: 1.5;
+      padding: 0.375rem 0.75rem;
+    }
+    ::part(input-focused) {
+      border-color: #333;
+      box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+    }
+    ::part(input-invalid) {
+      border-color: #8a2a35;
+      box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
+    }
+    ::part(input-invalid-and-focused) {
+      box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
+      border-color: #8a2a35;
+    }
+    ::part(button-primary) {
+      color: #333;
+      background-color: transparent;
+      border-color: #333;
+    }
+    ::part(button-primary):hover {
+      background-color: rgba(0, 0, 0, .05);
+      border-color: #333;
+      color: #333;
+    }
+    </style>
+</head>
+<body>
+  <justifi-refund-payment
+    payment-id="payment_123"
+    account-id="acc_123"
+    auth-token="web-component-token"
+    hide-submit-button="true"
+  />
+  <!-- Optional external button - this is only needed if the built in button is hidden via the hide-submit-button prop
+   and the refund is submitted via provided refundPayment() method - see below. -->
+  <button id="submit-refund-button">Submit Refund</button>
+</body>
+<script>
+  (function () {
+    var refundForm = document.querySelector("justifi-refund-payment");
+    refundForm.addEventListener("submit-event", (event) => {
+      /* this event is raised when the server response is received */
+      console.log("server response received", event.detail.response);
+    });
+    refundForm.addEventListener("error-event", (event) => {
+      /* here is where you would handle the error */
+      console.error('error-event', event.detail);
+    });
+    /* manually call Refund with provided method, if built-in submit button is hidden */
+    document.getElementById("submit-refund-button").addEventListener("click", async () => {
+      const refundData = await refundForm.refundPayment();
+      console.log('Refund data', refundData);
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div dangerouslySetInnerHTML={{ __html: PropsTable([
+    {
+      name: 'account-id',
+      type: 'string',
+      required: true,
+      description:
+        'Ensures refunds are scoped to the correct platform account.',
+    },
+    {
+      name: 'auth-token',
+      type: 'string',
+      required: true,
+      description: 'Token with `write:refunds` scope.',
+    },
+    {
+      name: 'payment-id',
+      type: 'string',
+      required: true,
+      description: 'Payment being refunded.',
+    },
+    {
+      name: 'max-amount',
+      type: 'string | number',
+      description:
+        'Upper limit for partial refunds (defaults to remaining amount).',
+    },
+    {
+      name: 'default-reason',
+      type: 'string',
+      description: 'Preselects a refund reason code.',
+    },
+  ]) }} />
+### Events
+- `submitted`: Emits when the refund is created; payload includes `refund_id` and amount.
+- `error-event`: Fires when validation or network calls fail.
+### Public methods
+1. `submit()` – Trigger the refund flow (useful if the component is inside a modal with custom buttons).
+2. `focus()` – Move focus to the amount input.
+## Theming & Layout
+<div dangerouslySetInnerHTML={{ __html: PartsTable([
+    {
+      name: 'font-family',
+      description: 'Controls the font family for the component.',
+    },
+    {
+      name: 'color',
+      description: 'Controls the text color.',
+    },
+    {
+      name: 'background-color',
+      description: 'Controls the background color.',
+    },
+    {
+      name: 'button',
+      description: 'Button styles.',
+    },
+    {
+      name: 'button-disabled',
+      description: 'Disabled button styles.',
+    },
+    {
+      name: 'input',
+      description: 'Input field styles.',
+    },
+    {
+      name: 'input-focused',
+      description: 'Input styles when focused.',
+    },
+    {
+      name: 'input-invalid',
+      description: 'Input styles when invalid.',
+    },
+    {
+      name: 'input-invalid-and-focused',
+      description: 'Input styles when invalid and focused.',
+    },
+    {
+      name: 'button-primary',
+      description: 'Primary button styles.',
+    },
+  ]) }} />
+## Static examples
+### Programmatic refunds
+<pre><code className="language-js">{`const component = document.querySelector('justifi-refund-payment');
+document.querySelector('#confirm-refund').onclick = () => component.submit();`}</code></pre>