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

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

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

package/docs/modular-checkout/sub-components/saved-payment-methods.mdx ADDED Viewed

@@ -0,0 +1,177 @@
+---
+id: modular-checkout/sub-components/saved-payment-methods
+title: Saved Payment Methods
+description: Saved payment selector for Modular Checkout that handles defaulting, deletion, and fallback to new entries.
+sidebar_position: 26
+---
+import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Renders a radio input list of saved payment methods as part of a checkout flow.
+> Note: This sub component will only display saved payment methods if a `payment_method_group_id` with associated payment methods was passed to the [create checkout](https://docs.justifi.tech/api-spec#tag/Checkouts/operation/CreateCheckout) API request.
+This component is **designed to be used within** the `justifi-modular-checkout` and **does not accept props directly**. Instead, it relies on shared state passed through the Stencil Store, managed by the wrapper 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-saved-payment-methods</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-saved-payment-methods />
+  </justifi-modular-checkout>
+</body>
+<script>
+  (function() {
+    const checkoutWrapper = document.querySelector('justifi-modular-checkout');
+    const submitButton = document.querySelector('#submit-button');
+    submitButton.addEventListener('click', () => {
+      checkoutWrapper.submitCheckout();
+    });
+    checkoutWrapper.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: 'customer-id',
+      type: 'string',
+      required: true,
+      description: 'Identifies which saved methods to fetch.',
+    },
+    {
+      name: 'allow-delete',
+      type: 'boolean',
+      defaultValue: 'true',
+      description: 'Shows the delete button for each saved method.',
+    },
+    {
+      name: 'show-add-new',
+      type: 'boolean',
+      defaultValue: 'true',
+      description:
+        'Displays a control that reveals the card/bank forms when no method is selected.',
+    },
+  ]) }} />
+### Events
+- `selection-changed`: Emits when customers choose a different saved method.
+- `delete-requested`: Fires when someone clicks delete on a saved method (confirm server-side permissions).
+### Public methods
+1. `clearSelection()` – Deselect saved methods so the new card/bank forms reappear.
+## Theming & Layout
+<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
+### Fallback flow
+<pre><code className="language-js">{`const saved = document.querySelector('justifi-saved-payment-methods');
+saved.addEventListener('selection-changed', ({ detail }) => {
+if (!detail.payment_method_token) saved.clearSelection();
+});`}</code></pre>

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

@@ -0,0 +1,219 @@
+---
+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.',
+    },
+  ]) }} />
+## Static examples
+### Validate selection before submission
+<pre><code className="language-js">{`const insurance = document.querySelector('justifi-season-interruption-insurance');
+const { isValid } = await insurance.validate();
+if (!isValid) {
+// surface inline validation by leaving the radio group untouched
+return;
+}
+// continue to submit the checkout
+`}</code></pre>

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.',
+      },
+    ]),
+  }}
+/>
+## 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,107 @@
+---
+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.',
+    },
+  ]) }} />
+## 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>