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

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

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

package/docs/modular-checkout/introduction/index.mdx CHANGED Viewed

@@ -14,18 +14,21 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
 ## Usage
-<pre><code className="language-html">{`<justifi-modular-checkout
+<pre>
+  <code className="language-html">{`<justifi-modular-checkout
   account-id="acc_123"
   auth-token="wct_checkout"
   checkout-id="chk_456"
 >
   <justifi-modular-checkout-card-form slot="payment-methods" />
   <justifi-modular-checkout-summary slot="summary" />
-</justifi-modular-checkout>`}</code></pre>
+</justifi-modular-checkout>`}</code>
+</pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -58,7 +61,8 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
       defaultValue: 'en-US',
       description: 'Controls currency format + copy.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -75,7 +79,8 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
 - Slots expose `::part(summary)` and `::part(payment-methods)` so you can adjust spacing for each region.
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'shell',
       description: 'Outer wrapper that surrounds the full modular checkout.',
@@ -89,12 +94,5 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
       description: 'Order summary slot, typically on the right on desktop.',
     },
     { name: 'cta', description: 'Primary submit button container.' },
-  ]) }} />
-## Static examples
-### Programmatic submission
-<pre><code className="language-js">{`const modCheckout = document.querySelector('justifi-modular-checkout');
-document.querySelector('#submit-order').addEventListener('click', () => modCheckout.submit());`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/apple-pay.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Apple Pay rail for Modular Checkout that exposes wallet buttons and
 sidebar_position: 22
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -22,13 +26,19 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
   <title>justifi-apple-pay</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(button) {
-        // button styles
-      }
-    </style>
+<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(button){' '}
+  {
+    // button styles
+  }
+</style>
 </head>
 <body>
@@ -44,12 +54,13 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'button-style',
       type: '"black" | "white" | "white-outline"',
       defaultValue: 'black',
-      description: 'Matches Apple\'s Human Interface Guidelines.',
+      description: "Matches Apple's Human Interface Guidelines.",
     },
     {
       name: 'button-type',
@@ -64,7 +75,8 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
       description:
         'Controls the region on the underlying `ApplePaySession` request.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -79,18 +91,12 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
 - Styling is intentionally limited to keep Apple compliance.
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'button',
       description:
         'Wrapper around the native Apple Pay button for margin/padding tweaks.',
     },
-  ]) }} />
-## Static examples
-### Custom launch button
-<pre><code className="language-js">{`const applePay = document.querySelector('justifi-apple-pay');
-document.querySelector('#apple-pay-launch').onclick = () => applePay.begin();`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/bank-account-form.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Bank account rail for Modular Checkout that tokenizes ACH details w
 sidebar_position: 28
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -30,44 +34,46 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-bank-account-form</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(skeleton) {
-        // skeleton styles
-      }
-      ::part(label) {
-        // label styles
-      }
-      ::part(input-invalid-and-focused) {
-        // input invalid and focused styles
-      }
-      ::part(input-invalid) {
-        // input invalid styles
-      }
-      ::part(input-focused) {
-        // input focused styles
-      }
-      ::part(input) {
-        // input styles
-      }
-    </style>
+<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(skeleton){' '}
+  {
+    // skeleton styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-invalid-and-focused){' '}
+  {
+    // input invalid and focused styles
+  }
+  ::part(input-invalid){' '}
+  {
+    // input invalid styles
+  }
+  ::part(input-focused){' '}
+  {
+    // input focused styles
+  }
+  ::part(input){' '}
+  {
+    // input styles
+  }
+</style>
 </head>
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-bank-account-form />
-    <button id="submit-button">
-      Submit Checkout
-    </button>
+    <button id="submit-button">Submit Checkout</button>
   </justifi-modular-checkout>
 </body>
@@ -89,16 +95,18 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'payment-method-group-id',
       type: 'string',
       description:
-        'Match the parent checkout\'s group when you want to toggle which rails appear.',
+        "Match the parent checkout's group when you want to toggle which rails appear.",
     },
     {
       name: 'show-account-type',
@@ -112,7 +120,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'en-US',
       description: 'Controls labels + validation messages.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -124,7 +133,8 @@ This component exposes **no public methods or properties** and is not intended f
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'skeleton',
       description: 'Skeleton loading state styles.',
@@ -149,14 +159,5 @@ This component exposes **no public methods or properties** and is not intended f
       name: 'input',
       description: 'Input field styles.',
     },
-  ]) }} />
-## Static examples
-### Auto-focus fields
-Tie custom UI to the public `focus()` method.
-<pre><code className="language-js">{`const bankForm = document.querySelector('justifi-bank-account-form');
-document.querySelector('#focus-bank').onclick = () => bankForm.focus();`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/card-form.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Card entry sub-component for Modular Checkout layouts with shared v
 sidebar_position: 2
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -30,44 +34,46 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-card-form</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(skeleton) {
-        // skeleton styles
-      }
-      ::part(label) {
-        // label styles
-      }
-      ::part(input-invalid-and-focused) {
-        // input invalid and focused styles
-      }
-      ::part(input-invalid) {
-        // input invalid styles
-      }
-      ::part(input-focused) {
-        // input focused styles
-      }
-      ::part(input) {
-        // input styles
-      }
-    </style>
+<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(skeleton){' '}
+  {
+    // skeleton styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-invalid-and-focused){' '}
+  {
+    // input invalid and focused styles
+  }
+  ::part(input-invalid){' '}
+  {
+    // input invalid styles
+  }
+  ::part(input-focused){' '}
+  {
+    // input focused styles
+  }
+  ::part(input){' '}
+  {
+    // input styles
+  }
+</style>
 </head>
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-card-form />
-    <button id="submit-button">
-      Submit Checkout
-    </button>
+    <button id="submit-button">Submit Checkout</button>
   </justifi-modular-checkout>
 </body>
@@ -89,11 +95,13 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'payment-method-group-id',
       type: 'string',
@@ -119,7 +127,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'en-US',
       description: 'Overrides localized labels if needed.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -133,7 +142,8 @@ All submit and error events bubble through the parent `<justifi-modular-checkout
 - When embedded inside cards, wrap the host element in your layout container and scope typography overrides via the parts listed below.
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'skeleton',
       description: 'Skeleton loading state styles.',
@@ -158,20 +168,7 @@ All submit and error events bubble through the parent `<justifi-modular-checkout
       name: 'input',
       description: 'Input field styles.',
     },
-  ]) }} />
+  ]}
+/>
 - Use the `card-form` CSS part (`::part(card-form)`) to apply box shadows or wrapper padding.
-## Static examples
-### Card form with disabled save option
-<pre><code className="language-html">{`<justifi-modular-checkout-card-form
-  show-save-payment-method="false"
-/>`}</code></pre>
-### Force brand icons off
-<pre><code className="language-html">{`<justifi-modular-checkout-card-form
-  card-brand-icons="none"
-/>`}</code></pre>

package/docs/modular-checkout/sub-components/payment-method-options.mdx CHANGED Viewed

@@ -13,18 +13,21 @@ import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 ## Usage
-<pre><code className="language-html">{`<justifi-payment-method-options
+<pre>
+  <code className="language-html">{`<justifi-payment-method-options
   selected="card"
   options='[
     {"id":"card","label":"Credit or debit card"},
     {"id":"ach","label":"Bank account"},
     {"id":"wallet","label":"Digital wallet"}
   ]'
-></justifi-payment-method-options>`}</code></pre>
+></justifi-payment-method-options>`}</code>
+</pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'options',
       type: 'Array<{ id: string; label: string; description?: string; icon?: string }>',
@@ -49,7 +52,8 @@ import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
       description:
         'Prevent users from switching rails (e.g., while submitting).',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -61,7 +65,8 @@ import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'option',
       description: 'Individual rail container (card/tab/list row).',
@@ -74,12 +79,5 @@ import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
       name: 'option-description',
       description: 'Secondary text area for additional guidance.',
     },
-  ]) }} />
-## Static examples
-### Programmatic selection
-<pre><code className="language-js">{`const options = document.querySelector('justifi-payment-method-options');
-document.querySelector('#select-ach').onclick = () => options.select('ach');`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/plaid-payment-method.mdx CHANGED Viewed

@@ -5,7 +5,11 @@ description: Plaid-powered ACH rail for Modular Checkout with hosted Link flow.
 sidebar_position: 23
 ---
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -28,48 +32,28 @@ It exposes no public properties for configuration, but does emit Plaid-specific
   <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>
+<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-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-plaid-payment-method />
   </justifi-modular-checkout>
 </body>
@@ -87,11 +71,13 @@ It exposes no public properties for configuration, but does emit Plaid-specific
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'link-token',
       type: 'string',
@@ -111,7 +97,8 @@ It exposes no public properties for configuration, but does emit Plaid-specific
       defaultValue: 'dark',
       description: 'Controls Plaid Link UI theme.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -129,7 +116,8 @@ It exposes no public properties for configuration, but does emit Plaid-specific
 - 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([
+<PartsTable
+  parts={[
     {
       name: 'text',
       description: 'Text styles.',
@@ -162,14 +150,5 @@ It exposes no public properties for configuration, but does emit Plaid-specific
       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>
+  ]}
+/>