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/plaid-payment-method.mdx ADDED Viewed

@@ -0,0 +1,176 @@
+---
+id: modular-checkout/sub-components/plaid-payment-method
+title: Plaid Payment Method
+description: Plaid-powered ACH rail for Modular Checkout with hosted Link flow.
+sidebar_position: 23
+---
+import { PropsTable, PartsTable } from '../../helpers';
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Renders a radio input for selecting the Plaid bank account payment method, and orchestrates the Plaid Link flow to securely connect a bank account when selected.
+This component is designed to be used within the `justifi-modular-checkout` and does not accept props directly. It relies on the shared state and context managed by `justifi-modular-checkout` (auth token, account ID, and checkout ID). Saving a new payment method is controlled via the `justifi-save-new-payment-method` checkbox when a payment method group is available.
+It exposes no public properties for configuration, but does emit Plaid-specific events for error handling and recovery.
+> Note: This component renders nothing and logs a console warning when bank account verification is not enabled for the checkout (`payment_settings.bank_account_verification !== true`).
+## 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-plaid-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-plaid-payment-method />
+  </justifi-modular-checkout>
+</body>
+<script>
+  (function() {
+    const modularCheckout = document.querySelector('justifi-modular-checkout');
+    modularCheckout?.addEventListener('plaidError', (event) => {
+      console.warn('Plaid error', event.detail);
+    });
+    modularCheckout?.addEventListener('plaidErrorRecovered', (event) => {
+      console.log('Plaid recovered', event.detail);
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div dangerouslySetInnerHTML={{ __html: PropsTable([
+    {
+      name: 'link-token',
+      type: 'string',
+      required: true,
+      description:
+        'Server-generated Plaid link token scoped to the current customer.',
+    },
+    {
+      name: 'locale',
+      type: 'string',
+      defaultValue: 'en-US',
+      description: 'Pass through to Plaid for language + formatting.',
+    },
+    {
+      name: 'theme',
+      type: '"dark" | "light"',
+      defaultValue: 'dark',
+      description: 'Controls Plaid Link UI theme.',
+    },
+  ]) }} />
+### Events
+- `plaid-success`: Provides the Plaid public token and metadata when customers finish linking.
+- `plaid-exit`: Emits when Link closes without success and includes exit metadata.
+- `error`: Surfaces integration failures (expired link token, network issues).
+### Public methods
+1. `open()` – Programmatically open Plaid Link (if you render a custom CTA).
+2. `close()` – Force-close the Link flow.
+## Theming & Layout
+- Styling is limited to the wrapper since Plaid controls the Link modal.
+- Provide fallback instructions for devices where Plaid is unavailable.
+<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
+### Listening for success
+<pre><code className="language-js">{`const plaidRail = document.querySelector('justifi-plaid-payment-method');
+plaidRail.addEventListener('plaid-success', ({ detail }) => {
+console.log('Bank linked: ', detail.institution.name);
+});`}</code></pre>

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

@@ -0,0 +1,178 @@
+---
+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 } from '../../helpers';
+import { 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,220 @@
+---
+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 } from '../../helpers';
+import { 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>