npm - @justifi/webcomponents - Versions diffs - 6.7.0 → 6.7.2 - Mend

@justifi/webcomponents 6.7.0 → 6.7.2

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

package/docs/entities/businessdetails/index.mdx ADDED Viewed

@@ -0,0 +1,143 @@
+---
+id: entities/businessdetails/index
+title: Business Details
+sidebar_label: BusinessDetails
+description: Collect and review business profile information with inline validation and KYC-friendly formatting.
+sidebar_position: 10
+---
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render detailed information about a business. You will need to first create a business via [Business API](https://docs.justifi.tech/api-spec#tag/Business) to get the business-id required for this component.
+## 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-business-details</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;
+      }
+    </style>
+</head>
+<body>
+  <justifi-business-details business-id="biz_123" auth-token="authToken" />
+</body>
+<script>
+  (function () {
+    const businessDetails = document.querySelector('justifi-business-details');
+    businessDetails.addEventListener('error-event', (event) => {
+      // here is where you would handle the error
+      console.error('error-event', event.detail);
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description:
+          'Owning platform account; used for authorization and data scoping.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description: 'Short-lived token with `write:onboarding` scope.',
+      },
+      {
+        name: 'business-id',
+        type: 'string',
+        required: true,
+        description:
+          'Existing business to hydrate; omit for brand-new entities.',
+      },
+      {
+        name: 'locale',
+        type: 'string',
+        defaultValue: 'en-US',
+        description:
+          'Controls localization of labels, address formatting, and validation hints.',
+      },
+      {
+        name: 'readonly',
+        type: 'boolean',
+        defaultValue: 'false',
+        description: 'Displays the form as read-only for audit surfaces.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `submitted`: Fires when all sections validate and emit an updated business payload.
+- `error-event`: Emits when API requests fail or validation errors occur; payload includes field-level hints.
+### Public methods
+1. `submit()` – Programmatically trigger validation and submission.
+2. `reset()` – Clear the form back to the most recently loaded business payload.
+## 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.',
+      },
+    ]),
+  }}
+/>

package/docs/entities/businessform/index.mdx ADDED Viewed

@@ -0,0 +1,241 @@
+---
+id: entities/businessform/index
+title: Business Form
+sidebar_label: BusinessForm
+description: Guided workflow for collecting representative, ownership, and compliance data during onboarding.
+sidebar_position: 11
+---
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a business onboarding form. You will need to first create a business via [Business API](https://docs.justifi.tech/api-spec#tag/Business) to get the business-id required for this component.
+## 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-business-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>
+      ::part(font-family) {
+        font-family: georgia;
+      }
+      ::part(color) {
+        color: darkslategray;
+      }
+      ::part(background-color) {
+        background-color: transparent;
+      }
+      ::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(button) {
+        padding: 0.375rem 0.75rem;
+        font-size: 16px;
+        box-shadow: none;
+        border-radius: 0px;
+        line-height: 1.5;
+        text-transform: none;
+      }
+      ::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(button-disabled) {
+        opacity: 0.5;
+      }
+      ::part(tooltip-inner) {
+        color: #fff;
+      }
+    </style>
+</head>
+<body>
+  <justifi-business-form business-id="biz_123" auth-token="authToken" />
+</body>
+<script>
+  (function () {
+    var businessForm = document.querySelector("justifi-business-form");
+    businessForm.addEventListener("submit-event", (event) => {
+      /* this event is raised when the server response is received */
+      console.log("server response received", event.detail.response);
+    });
+    businessForm.addEventListener("click-event", (data) => {
+      let name = data.detail.name;
+      if (name == "submit") {
+        console.log("This is a submit button click", data);
+      } else {
+        console.log("Not an event from the submit button");
+      }
+    });
+  })();
+</script>
+</html>`}</code></pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description: 'Owning platform account used for authorization.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description:
+          'Short-lived onboarding token; must include `write:onboarding` scope.',
+      },
+      {
+        name: 'business-id',
+        type: 'string',
+        required: true,
+        description:
+          'The business whose representatives/owners you are editing.',
+      },
+      {
+        name: 'show-progress',
+        type: 'boolean',
+        defaultValue: 'false',
+        description: 'Displays a stepper + completion state when true.',
+      },
+      {
+        name: 'support-phone',
+        type: 'string',
+        description: 'Optional phone number displayed inside support callouts.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `submitted`: fires when the flow completes; payload includes representative + ownership data.
+- `step-changed`: emits whenever the form advances to the next required section.
+- `error-event`: emits validation or network issues for logging surfaces.
+### Public methods
+1. `next()` – Move to the next step programmatically (only when current step is valid).
+2. `previous()` – Return to the earlier step (useful for custom navigation controls).
+## 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: '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: 'button',
+        description: 'Button styles.',
+      },
+      {
+        name: 'button-primary',
+        description: 'Primary button styles.',
+      },
+      {
+        name: 'button-disabled',
+        description: 'Disabled button styles.',
+      },
+      {
+        name: 'tooltip-inner',
+        description: 'Tooltip inner content styles.',
+      },
+    ]),
+  }}
+/>

package/docs/entities/index.mdx ADDED Viewed

@@ -0,0 +1,19 @@
+---
+id: entities/index
+title: Entities
+description: Onboarding components for businesses, principals, and payouts.
+---
+Use the Entities toolkit to collect and maintain compliance-ready business
+records.
+- [BusinessDetails](./businessdetails/index) – guided intake for legal and tax
+  profiles.
+- [BusinessForm](./businessform/index) – configurable form shell tailored to
+  your onboarding steps.
+- [Payment Provisioning](./payment-provisioning/index) – connect verified
+  businesses to the rails they need to accept funds.
+> Pair these components with back-office workflows so underwriting teams can
+> review submissions without bouncing between tools.

package/docs/entities/payment-provisioning/index.mdx ADDED Viewed

@@ -0,0 +1,128 @@
+---
+id: entities/payment-provisioning/index
+title: Payment Provisioning
+description: Embed-ready workflow for collecting payout bank info and provisioning merchants for funding.
+sidebar_position: 12
+---
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
+## Overview
+Component to render a business onboarding form, segmented into multiple steps. You will need to first create a business via [Business API](https://docs.justifi.tech/api-spec#tag/Business) to get the business-id required for this component.
+## Usage
+<pre>
+  <code className="language-html">{`<justifi-payment-provisioning
+  account-id="acc_123"
+  auth-token="wct_provisioning"
+  business-id="biz_456"
+  on-success-text="Payout method saved"
+/>`}</code>
+</pre>
+## Props, Events & Methods
+<div
+  dangerouslySetInnerHTML={{
+    __html: PropsTable([
+      {
+        name: 'account-id',
+        type: 'string',
+        required: true,
+        description:
+          'Platform account or sub-account context for provisioning.',
+      },
+      {
+        name: 'auth-token',
+        type: 'string',
+        required: true,
+        description:
+          'Token with `write:provisioning` scope to securely store payout details.',
+      },
+      {
+        name: 'business-id',
+        type: 'string',
+        required: true,
+        description: 'Business whose payout method is being added.',
+      },
+      {
+        name: 'on-success-text',
+        type: 'string',
+        description:
+          'Overrides the confirmation copy once the payout account is linked.',
+      },
+      {
+        name: 'disable-ach',
+        type: 'boolean',
+        defaultValue: 'false',
+        description:
+          'Hide ACH specific fields when you only support push-to-card or other rails.',
+      },
+    ]),
+  }}
+/>
+### Events
+- `submitted`: Fires when payout information is collected and saved; payload includes the provisioning status.
+- `error-event`: Provides `code`/`message` details when token scopes or API calls fail.
+### Public methods
+1. `submit()` – Trigger provisioning if you render external controls.
+2. `focus()` – Move focus to the first interactive element (helpful after displaying a banner).
+## 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: '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: 'button',
+        description: 'Button styles.',
+      },
+      {
+        name: 'button-primary',
+        description: 'Primary button styles.',
+      },
+      {
+        name: 'button-disabled',
+        description: 'Disabled button styles.',
+      },
+      {
+        name: 'tooltip-inner',
+        description: 'Tooltip inner content styles.',
+      },
+    ]),
+  }}
+/>

package/docs/frameworks/angular/index.mdx ADDED Viewed

@@ -0,0 +1,112 @@
+---
+id: frameworks/angular/index
+title: Angular
+description: Registering and using JustiFi web components inside Angular projects.
+sidebar_position: 2
+---
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+Angular can render the JustiFi custom elements once you load the library and allow custom schemas.
+## Usage
+### Load the bundle
+<pre><code className="language-html">{`<head>
+  <script
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"
+  ></script>
+</head>`}</code></pre>
+Or install locally:
+```bash
+npm install --save @justifi/webcomponents
+```
+Import specific elements where needed:
+```ts
+import '@justifi/webcomponents/dist/module/justifi-checkout.js';
+```
+### Allow custom elements
+```ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+## Props and event handling
+Use Angular bindings for attributes and `(event)` syntax for emitted events.
+```html
+<justifi-checkout
+  [auth-token]="authToken"
+  [checkout-id]="checkoutId"
+  [disable-bank-account]="true"
+  (submit-event)="handleSubmit($event)"
+  (error-event)="handleError($event)"
+></justifi-checkout>
+```
+## Calling methods
+Leverage `ViewChild` to call public methods on the web component.
+```html
+<!-- app.component.html -->
+<justifi-checkout
+  #checkoutForm
+  [auth-token]="authToken"
+  [checkout-id]="checkoutId"
+  (submit-event)="handleSubmit($event)"
+></justifi-checkout>
+<button (click)="fillBillingForm()">Fill billing form</button>
+```
+```ts
+// app.component.ts
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild('checkoutForm')
+  checkoutForm!: ElementRef<HTMLJustifiCheckoutElement>;
+  ngAfterViewInit() {
+    // Safe place to call component methods
+  }
+  fillBillingForm() {
+    const billing = {
+      name: 'John Doe',
+      address_line1: 'Main St',
+      address_city: 'Beverly Hills',
+      address_state: 'CA',
+      address_postal_code: '90210',
+    };
+    this.checkoutForm.nativeElement.fillBillingForm(billing);
+  }
+}
+```
+> `HTMLJustifiCheckoutElement` is available from `@justifi/webcomponents/dist/components` if you want stronger typing.

package/docs/frameworks/index.mdx ADDED Viewed

@@ -0,0 +1,18 @@
+---
+id: frameworks/index
+title: Frameworks
+description: Entry point for Angular, React, and Vue 3 integration guides.
+---
+Pick the framework-specific guide that matches your host app. Each page covers
+bundle registration, component typing, and ergonomics for that stack.
+1. [Angular](./angular/index) – schemas, module setup, and DI-friendly helpers.
+2. [React](./react/index) – rendering custom elements from JSX plus refs/events.
+3. [Vue 3](./vue/index) – registering components globally or per-view with full
+   TypeScript support.
+> Need another framework? Duplicate `templates/guide-template.mdx`, follow the
+> checklist inside, and add it to this directory so it picks up the same
+> navigation pattern.