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

@justifi/webcomponents 6.5.1-rc.2 → 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/payment-facilitation/tokenize-payment-method/index.mdx ADDED Viewed

@@ -0,0 +1,362 @@
+---
+id: payment-facilitation/tokenize-payment-method/index
+title: Tokenize Payment Method
+description: Secure standalone card/bank tokenization form with built-in validation and iframe isolation.
+sidebar_position: 1
+---
+import { PropsTable, PartsTable } from '../../helpers';
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render an entire form including a switch to use a credit card or bank account, a submit button and all fields required for proper use. This component can be used standalone or as part of the modular checkout system.
+## 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-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>
+  <style>
+    ::part(font-family) {
+      font-family: georgia;
+    }
+    ::part(color) {
+      color: darkslategray;
+    }
+    ::part(background-color) {
+      background-color: transparent;
+    }
+    ::part(button) {
+      padding: 0.375rem 0.75rem;
+      font-size: 16px;
+      box-shadow: none;
+      border-radius: 0px;
+      line-height: 1.5;
+      text-transform: none;
+    }
+    ::part(button-disabled) {
+      opacity: 0.5;
+    }
+    ::part(input) {
+      border-color: #555;
+      border-width: 1px;
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-right-width: 1px;
+      border-top-width: 1px;
+      border-radius: 0;
+      border-style: solid;
+      box-shadow: none;
+      font-size: 1rem;
+      font-weight: normal;
+      line-height: 1.5;
+      padding: 0.375rem 0.75rem;
+    }
+    ::part(input-focused) {
+      border-color: #333;
+      box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+    }
+    ::part(input-invalid) {
+      border-color: #8a2a35;
+      box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
+    }
+    ::part(input-invalid-and-focused) {
+      box-shadow: 0 0 0 0.25rem rgba(244, 67, 54, 0.25);
+      border-color: #8a2a35;
+    }
+    ::part(input-radio) {
+      background-color: #fff;
+      border-color: #333;
+    }
+    ::part(input-checkbox) {
+      border-color: #333;
+    }
+    ::part(input-checkbox-checked) {
+      background-color: #000;
+      border-color: #333;
+    }
+    ::part(input-checkbox-checked-focused) {
+      background-color: #000;
+      box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+    }
+    ::part(input-checkbox-focused) {
+      background-color: #fff;
+      box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
+    }
+    ::part(button-primary) {
+      color: #333;
+      background-color: transparent;
+      border-color: #333;
+    }
+    ::part(button-primary):hover {
+      background-color: rgba(0, 0, 0, .05);
+      border-color: #333;
+      color: #333;
+    }
+    ::part(radio-list-item) {
+      border-bottom: 1px solid #ddd;
+    }
+    ::part(radio-list-item):hover {
+      background-color: #f9f9f9;
+      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>
+  <script>
+    const justifiTokenizePaymentMethod = document.querySelector("justifi-tokenize-payment-method");
+    // Handle successful tokenization
+    justifiTokenizePaymentMethod.addEventListener("submit-event", (event) => {
+      const response = event.detail.response;
+      console.log("Tokenization successful:", response);
+      if (response.token) {
+        console.log("Payment method token:", response.token);
+      }
+      if (response.data) {
+        console.log("Full payment method data:", response.data);
+      }
+    });
+    // Handle errors
+    justifiTokenizePaymentMethod.addEventListener("error-event", (event) => {
+      console.error("Tokenization error:", event.detail);
+    });
+    // External tokenize button (when built-in submit button is hidden)
+    document.getElementById("tokenize-button").addEventListener("click", async () => {
+      try {
+        const result = await justifiTokenizePaymentMethod.tokenizePaymentMethod();
+        console.log("External tokenization result:", result);
+      } catch (error) {
+        console.error("External tokenization failed:", error);
+      }
+    });
+    // Fill billing form programmatically
+    document.getElementById("fill-billing-form").addEventListener("click", async () => {
+      await justifiTokenizePaymentMethod.fillBillingForm({
+        name: "John Doe",
+        address_line1: "123 Main St",
+        address_line2: "Apt 1",
+        address_city: "Anytown",
+        address_state: "NY", // Use 2-letter state code
+        address_postal_code: "12345",
+      });
+      console.log("Billing form filled");
+    });
+    // Validate form
+    document.getElementById("validate-form").addEventListener("click", async () => {
+      const validation = await justifiTokenizePaymentMethod.validate();
+      console.log("Validation result:", validation);
+      if (validation.isValid) {
+        console.log("Form is valid!");
+      } else {
+        console.log("Form has errors:", validation.errors);
+      }
+    });
+  </script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div dangerouslySetInnerHTML={{ __html: PropsTable([
+    {
+      name: 'account-id',
+      type: 'string',
+      required: true,
+      description:
+        'Platform account that will own the resulting payment method.',
+    },
+    {
+      name: 'auth-token',
+      type: 'string',
+      required: true,
+      description:
+        'Short-lived Web Component Token with `write:tokenize:account_id` scope.',
+    },
+    {
+      name: 'payment-method-group-id',
+      type: 'string',
+      description:
+        'Optional grouping identifier that lets you preselect payment rails in Modular Checkout.',
+    },
+    {
+      name: 'hide-submit-button',
+      type: 'boolean',
+      defaultValue: 'false',
+      description:
+        'Hides the internal CTA when hosting app handles submission.',
+    },
+    {
+      name: 'save-payment-method-label',
+      type: 'string',
+      description:
+        'Overrides the checkbox label when allowing customers to store a card.',
+    },
+    {
+      name: 'locale',
+      type: 'string',
+      defaultValue: 'en-US',
+      description:
+        'Controls localization of labels, placeholders, and currency formatting.',
+    },
+    {
+      name: 'theme',
+      type: 'string',
+      description: 'Name of a predefined theme exported by JustiFi (optional).',
+    },
+  ]) }} />
+### Events
+- `tokenized`: fires when a payment token is created; payload includes `payment_method_token` and metadata.
+- `error`: fires if tokenization fails; payload includes `code`, `message`, and validation hints.
+### Public methods
+1. `tokenizePaymentMethod()` – programmatically trigger submission (returns a promise that resolves to a token payload).
+2. `fillBillingForm(partialBillingDetails)` – prefill customers' billing information from saved data.
+## Theming & Layout
+- Hosted fields remain inside PCI-safe iframes, so styling focuses on the outer wrapper plus the `::part` hooks listed below.
+<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-disabled',
+      description: 'Disabled button styles.',
+    },
+    {
+      name: 'input',
+      description: 'Input field styles.',
+    },
+    {
+      name: 'input-focused',
+      description: 'Input styles when focused.',
+    },
+    {
+      name: 'input-invalid',
+      description: 'Input styles when invalid.',
+    },
+    {
+      name: 'input-invalid-and-focused',
+      description: 'Input styles when invalid and focused.',
+    },
+    {
+      name: 'input-radio',
+      description: 'Radio input styles.',
+    },
+    {
+      name: 'input-checkbox',
+      description: 'Checkbox input styles.',
+    },
+    {
+      name: 'input-checkbox-checked',
+      description: 'Checkbox input styles when checked.',
+    },
+    {
+      name: 'input-checkbox-checked-focused',
+      description: 'Checkbox input styles when checked and focused.',
+    },
+    {
+      name: 'input-checkbox-focused',
+      description: 'Checkbox input styles when focused.',
+    },
+    {
+      name: 'button-primary',
+      description: 'Primary button styles.',
+    },
+    {
+      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>

package/docs/payment-facilitation/unified-fintech-checkout/342/204/242/index.mdx ADDED Viewed

@@ -0,0 +1,164 @@
+---
+id: payment-facilitation/unified-fintech-checkout™/index
+title: Unified Fintech Checkout™
+description: Unified Fintech Checkout™ component that orchestrates payment capture, verification, and confirmation states.
+sidebar_position: 20
+---
+import { PropsTable, PartsTable } from '../../helpers';
+## Overview
+`<justifi-checkout>` renders a complete checkout experience: payment method entry, order summary, error handling, and confirmation states. Use it when you want a turnkey experience without composing Modular Checkout subcomponents manually.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-checkout
+  account-id="acc_123"
+  auth-token="wct_checkout"
+  checkout-id="chk_456"
+  locale="en-US"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description:
+          'Owning platform account; determines branding + permissions.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Web Component Token with `write:checkout` scope.',
+      },
+      {
+        name: 'checkout-id',
+        type: 'string',
+        required: true,
+        description:
+          'Server-generated checkout session controlling line items and totals.',
+      },
+      {
+        name: 'require-save-payment-method',
+        type: 'boolean',
+        defaultValue: 'false',
+        description:
+          'When true, forces customers to save the payment method for future use.',
+      },
+      {
+        name: 'locale',
+        type: 'string',
+        defaultValue: 'en-US',
+        description:
+          'Controls currency formatting, copy, and date presentation.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `completed`: Emits when payment succeeds; payload includes `checkout_id`, `payment_method_token`, and receipt data.
+- `error`: Fires if payment processing fails; includes error codes for analytics.
+- `step-changed`: Useful when you pipe analytics or breadcrumbs for multi-step flows.
+### Public methods
+1. `submit()` – Programmatically trigger the pay button (helpful if you hide the built-in CTA).
+2. `reset(checkoutId)` – Reload a different checkout session without re-mounting the component.
+## 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-disabled',
+        description: 'Disabled button styles.',
+      },
+      {
+        name: 'input',
+        description: 'Input field styles.',
+      },
+      {
+        name: 'input-focused',
+        description: 'Input styles when focused.',
+      },
+      {
+        name: 'input-invalid',
+        description: 'Input styles when invalid.',
+      },
+      {
+        name: 'input-invalid-and-focused',
+        description: 'Input styles when invalid and focused.',
+      },
+      {
+        name: 'input-radio',
+        description: 'Radio input styles.',
+      },
+      {
+        name: 'input-checkbox',
+        description: 'Checkbox input styles.',
+      },
+      {
+        name: 'input-checkbox-checked',
+        description: 'Checkbox input styles when checked.',
+      },
+      {
+        name: 'input-checkbox-checked-focused',
+        description: 'Checkbox input styles when checked and focused.',
+      },
+      {
+        name: 'input-checkbox-focused',
+        description: 'Checkbox input styles when focused.',
+      },
+      {
+        name: 'button-primary',
+        description: 'Primary button styles.',
+      },
+      {
+        name: 'radio-list-item',
+        description: 'Radio list item styles.',
+      },
+    ]),
+  }}
+/>
+## Static examples
+### Listen for completion
+Trigger downstream logic when checkout completes.
+<pre>
+  <code className="language-js">{`const checkout = document.querySelector('justifi-checkout');
+checkout.addEventListener('completed', (event) => {
+analytics.track('checkout_completed', event.detail);
+});`}</code>
+</pre>

package/package.json CHANGED Viewed

@@ -1,11 +1,24 @@
 {
   "name": "@justifi/webcomponents",
-  "version": "6.5.1-rc.2",
+  "version": "6.5.1-rc.4",
   "description": "JustiFi Web Components",
   "collection": "dist/collection/collection-manifest.json",
   "main": "dist/index.cjs.js",
   "module": "dist/module/index.js",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/module/index.js"
+    },
+    "./docs/*": "./docs/*",
+    "./docs/helpers": "./docs/helpers/index.ts",
+    "./docs/helpers/*": "./docs/helpers/*.tsx",
+    "./dist/module/*": "./dist/module/*.js",
+    "./dist/docs.json": "./dist/docs.json",
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/justifi-tech/web-component-library.git"
@@ -15,7 +28,8 @@
     "registry": "https://registry.npmjs.org"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "docs/"
   ],
   "scripts": {
     "build": "stencil build --docs",
@@ -25,7 +39,8 @@
     "generate": "stencil generate",
     "test": "TZ=utc stencil test --spec",
     "test:watch": "TZ=utc stencil test --spec --watchAll",
-    "test:file": "stencil test --spec --watch --"
+    "test:file": "stencil test --spec --watch --",
+    "docs:lint": "eslint --ext .md,.mdx --config docs/.eslintrc.cjs docs"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
@@ -44,14 +59,14 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
+    "@eslint/eslintrc": "^3.3.1",
     "@rollup/plugin-replace": "^6.0.1",
     "@stencil/sass": "^3.0.1",
     "@types/jest": "29.5.14",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
     "dotenv": "^16.3.1",
+    "eslint": "^9.27.0",
+    "eslint-plugin-mdx": "^3.1.5",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-node": "^29.7.0",