npm - @justifi/webcomponents - Versions diffs - 6.7.0 → 6.7.2 - Mend

@justifi/webcomponents 6.7.0 → 6.7.2

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 (167) hide show

package/docs/modular-checkout/sub-components/season-interruption-insurance.mdx ADDED Viewed

@@ -0,0 +1,221 @@
+---
+id: modular-checkout/sub-components/season-interruption-insurance
+title: Season Interruption Insurance
+description: Optional insurance add-on rail that pairs with Modular Checkout summaries.
+sidebar_position: 25
+---
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a formated list of season interruption insurance for the requested account.
+## 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-season-interruption-insurance</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(input-radio) {
+        background-color: #fff;
+        border-color: #333;
+      }
+      ::part(input-radio-checked) {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 30 30" fill="white"><circle cx="10" cy="10" r="10"/></svg>');
+        background-color: #000;
+      }
+      ::part(input-radio-focused) {
+        background-color: #333;
+        border-color: #333;
+        box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+      }
+      ::part(input-radio-checked-focused) {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 30 30" fill="white"><circle cx="10" cy="10" r="10"/></svg>');
+        background-color: #000;
+        border-color: #333;
+        box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+      }
+    </style>
+</head>
+<body>
+  <justifi-season-interruption-insurance
+    auth-token="your-auth-token"
+    checkout-id="your-checkout-id"
+    primary-identity-first-name="John"
+    primary-identity-last-name="Doe"
+    primary-identity-state="CA"
+    primary-identity-postal-code="90210"
+    primary-identity-country="US"
+    primary-identity-email-address="john.doe@email.com"
+    policy-attributes-insurable-amount="100000"
+  />
+</body>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'auth-token',
+        type: 'string',
+        description:
+          'JWT used to call the insurance service. Optional when the checkout store already contains an auth token.',
+      },
+      {
+        name: 'checkout-id',
+        type: 'string',
+        description:
+          'Checkout identifier passed to the quote endpoint. Optional when running inside `<justifi-modular-checkout>` where it is pulled from the shared store.',
+      },
+      {
+        name: 'primary-identity-first-name',
+        type: 'string',
+        required: true,
+        description: 'First name of the person purchasing the coverage.',
+      },
+      {
+        name: 'primary-identity-last-name',
+        type: 'string',
+        required: true,
+        description: 'Last name of the person purchasing the coverage.',
+      },
+      {
+        name: 'primary-identity-email-address',
+        type: 'string',
+        required: true,
+        description: 'Email address used in the quote payload.',
+      },
+      {
+        name: 'primary-identity-state',
+        type: 'string',
+        required: true,
+        description: '2-letter state or province for the insured person.',
+      },
+      {
+        name: 'primary-identity-postal-code',
+        type: 'string',
+        required: true,
+        description: 'Postal or ZIP code for the insured person.',
+      },
+      {
+        name: 'primary-identity-country',
+        type: 'string',
+        required: true,
+        description: 'ISO 3166-1 alpha-2 country code for the insured person.',
+      },
+      {
+        name: 'policy-attributes-insurable-amount',
+        type: 'number',
+        required: true,
+        description: 'Amount (in cents) that should be covered by the policy.',
+      },
+      {
+        name: 'policy-attributes-start-date',
+        type: 'string',
+        description: 'ISO 8601 start date for the coverage period.',
+      },
+      {
+        name: 'policy-attributes-end-date',
+        type: 'string',
+        description: 'ISO 8601 end date for the coverage period.',
+      },
+      {
+        name: 'covered-identity-first-name',
+        type: 'string',
+        description:
+          'First name of the person whose season is being covered (if different from the purchaser).',
+      },
+      {
+        name: 'covered-identity-last-name',
+        type: 'string',
+        description: 'Last name of the covered person.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `insurance-updated`: Fires after the component successfully toggles coverage via the insurance API.
+- `error-event`: Emits a `ComponentErrorEvent` if required props are missing or an API call fails.
+### Public methods
+1. `validate()` – Returns `{ isValid: boolean }` indicating whether the customer selected accept or decline. Uses the shared insurance validation helpers.
+## Theming & Layout
+- The host inherits the same typography tokens as other Modular Checkout rails via `StyledHost`, so it naturally matches surrounding content.
+- Use the exposed parts to restyle copy or validation messaging without affecting the radios themselves.
+<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: 'input-radio',
+        description: 'Radio input styles.',
+      },
+      {
+        name: 'input-radio-checked',
+        description: 'Radio input styles when checked.',
+      },
+      {
+        name: 'input-radio-focused',
+        description: 'Radio input styles when focused.',
+      },
+      {
+        name: 'input-radio-checked-focused',
+        description: 'Radio input styles when checked and focused.',
+      },
+    ]),
+  }}
+/>

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

@@ -0,0 +1,183 @@
+---
+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,
+  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.',
+      },
+    ]),
+  }}
+/>

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

@@ -0,0 +1,111 @@
+---
+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,
+  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.',
+      },
+    ]),
+  }}
+/>

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

@@ -0,0 +1,99 @@
+---
+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 '@justifi/webcomponents/docs/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.',
+      },
+    ]),
+  }}
+/>

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.