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

@justifi/webcomponents 6.5.1-rc.4 → 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 (119) hide show

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

@@ -5,8 +5,11 @@ description: Sezzle BNPL rail for Modular Checkout, including disclosure copy an
 sidebar_position: 24
 ---
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -29,48 +32,51 @@ This component exposes **no public methods or properties** and is not intended f
   <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>
+<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-sezzle-payment-method />
   </justifi-modular-checkout>
 </body>
@@ -93,33 +99,32 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </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.',
-      },
-    ]),
-  }}
+<PropsTable
+  rows={[
+    {
+      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
@@ -136,49 +141,39 @@ This component exposes **no public methods or properties** and is not intended f
 - 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.',
-      },
-    ]),
-  }}
+<PartsTable
+  parts={[
+    {
+      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 CHANGED Viewed

@@ -5,8 +5,11 @@ description: Order summary block that lists line items, totals, and ancillary di
 sidebar_position: 27
 ---
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -60,7 +63,8 @@ This component exposes **no public methods or properties** and is not intended f
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'checkout-id',
       type: 'string',
@@ -80,7 +84,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'true',
       description: 'Hide icons when you want an ultra-minimal summary.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -92,17 +97,11 @@ No custom events; summary listens to the parent checkout for updates automatical
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       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 CHANGED Viewed

@@ -5,7 +5,7 @@ description: Operator console for reviewing and responding to card disputes.
 sidebar_position: 34
 ---
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -13,15 +13,18 @@ Component to render notification of disputed payments and allow platform to resp
 ## Usage
-<pre><code className="language-html">{`<justifi-dispute-management
+<pre>
+  <code className="language-html">{`<justifi-dispute-management
   account-id="acc_123"
   auth-token="wct_disputes"
   dispute-id="dp_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to render notification of disputed payments and allow platform to resp
       defaultValue: 'false',
       description: 'Disable response actions when true.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -60,7 +64,8 @@ Component to render notification of disputed payments and allow platform to resp
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -85,14 +90,5 @@ Component to render notification of disputed payments and allow platform to resp
       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/refund-payment/index.mdx CHANGED Viewed

@@ -5,8 +5,11 @@ description: Guided UI for issuing full or partial refunds with reason codes and
 sidebar_position: 33
 ---
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -23,7 +26,12 @@ Component to render a form for partially or fully refunding a payment based on a
   <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>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
   <style>
     ::part(font-family) {
       font-family: georgia;
@@ -93,6 +101,7 @@ Component to render a form for partially or fully refunding a payment based on a
       color: #333;
     }
     </style>
 </head>
 <body>
@@ -105,6 +114,7 @@ Component to render a form for partially or fully refunding a payment based on a
   <!-- 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>
@@ -129,11 +139,13 @@ Component to render a form for partially or fully refunding a payment based on a
     });
   })();
 </script>
 </html>`}</code></pre>
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -164,7 +176,8 @@ Component to render a form for partially or fully refunding a payment based on a
       type: 'string',
       description: 'Preselects a refund reason code.',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -178,7 +191,8 @@ Component to render a form for partially or fully refunding a payment based on a
 ## Theming & Layout
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -219,12 +233,5 @@ Component to render a form for partially or fully refunding a payment based on a
       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>
+  ]}
+/>

package/docs/payment-facilitation/tokenize-payment-method/index.mdx CHANGED Viewed

@@ -5,8 +5,11 @@ description: Secure standalone card/bank tokenization form with built-in validat
 sidebar_position: 1
 ---
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 ## Overview
@@ -23,7 +26,12 @@ Component to render an entire form including a switch to use a credit card or ba
   <title>justifi-tokenize-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>
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
   <style>
     ::part(font-family) {
       font-family: georgia;
@@ -126,16 +134,17 @@ Component to render an entire form including a switch to use a credit card or ba
       cursor: pointer;
     }
     </style>
 </head>
-  <body>
-    <justifi-tokenize-payment-method
-      account-id="acc_123"
-      auth-token="authToken"
-      payment-method-group-id="pmg_123"
-      submit-button-text="Tokenize Payment Method"
-    />
-  </body>
+<body>
+  <justifi-tokenize-payment-method
+    account-id="acc_123"
+    auth-token="authToken"
+    payment-method-group-id="pmg_123"
+    submit-button-text="Tokenize Payment Method"
+  />
+</body>
   <script>
     const justifiTokenizePaymentMethod = document.querySelector("justifi-tokenize-payment-method");
@@ -200,7 +209,8 @@ Component to render an entire form including a switch to use a credit card or ba
 ## Props, Events & Methods
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -246,7 +256,8 @@ Component to render an entire form including a switch to use a credit card or ba
       type: 'string',
       description: 'Name of a predefined theme exported by JustiFi (optional).',
     },
-  ]) }} />
+  ]}
+/>
 ### Events
@@ -262,7 +273,8 @@ Component to render an entire form including a switch to use a credit card or ba
 - Hosted fields remain inside PCI-safe iframes, so styling focuses on the outer wrapper plus the `::part` hooks listed below.
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -327,36 +339,7 @@ Component to render an entire form including a switch to use a credit card or ba
       name: 'radio-list-item',
       description: 'Radio list item styles.',
     },
-  ]) }} />
-- Slots are not exposed (all inputs are encapsulated in PCI iframes), so styling relies on CSS variables and `::part` hooks for wrapper elements.
-## Static examples
-### External submission control
-Hide the internal CTA and trigger tokenization manually (e.g., to combine with a review step).
-<pre><code className="language-html">{`<justifi-tokenize-payment-method
-  account-id="acc_123"
-  auth-token="wct_abc123"
-  hide-submit-button
-  ref={el => (window.tokenizer = el)}
+  ]}
 />
-<button onclick="window.tokenizer.tokenizePaymentMethod()">
-  Submit Payment
-</button>
-`}</code></pre>
-### Prefill billing info
-<pre><code className="language-js">{`const tokenizer = document.querySelector('justifi-tokenize-payment-method');
-tokenizer.fillBillingForm({
-name: 'Leslie Knope',
-address_line1: '123 Main St',
-address_city: 'Pawnee',
-address_state: 'IN',
-address_postal_code: '47998',
-});`}</code></pre>
+- Slots are not exposed (all inputs are encapsulated in PCI iframes), so styling relies on CSS variables and `::part` hooks for wrapper elements.