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

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

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

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.',
+    },
+  ]) }} />
+## Static examples
+### Custom navigation controls
+Use the public methods to orchestrate a bespoke progress UI.
+<pre>
+  <code className="language-js">{`const form = document.querySelector('justifi-business-form');
+document.querySelector('#next').addEventListener('click', () => form.next());
+document.querySelector('#prev').addEventListener('click', () => form.previous());`}</code>
+</pre>

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,131 @@
+---
+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.',
+    },
+  ]) }} />
+## Static examples
+### External submission
+Hide the internal CTA and trigger provisioning from a custom footer.
+<pre>
+  <code className="language-js">{`const provisioning = document.querySelector('justifi-payment-provisioning');
+document.querySelector('#complete-provisioning').onclick = () => provisioning.submit();`}</code>
+</pre>

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.

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

@@ -0,0 +1,125 @@
+---
+id: frameworks/react/index
+title: React
+description: How to consume JustiFi web components inside React applications.
+sidebar_position: 1
+---
+import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+React treats JustiFi web components like any other custom element. Load the bundle, optionally declare types, and use refs for method calls or event wiring.
+## Usage
+### Load the components
+<pre><code className="language-html">{`<head>
+  <script
+    async
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"
+  ></script>
+</head>`}</code></pre>
+Or install the package:
+```bash
+npm install --save @justifi/webcomponents
+```
+Then import the module you need:
+```javascript
+import '@justifi/webcomponents/dist/module/justifi-checkout.js';
+```
+### Render inside JSX
+```jsx
+export function CheckoutExample() {
+  return (
+    <justifi-checkout auth-token="token" checkout-id="chk_123" locale="en-US" />
+  );
+}
+```
+## TypeScript integration
+Let TypeScript know about the generated intrinsic elements so JSX understands attributes and custom events.
+```ts
+// register-web-components.ts
+import { JSX as LocalJSX } from '@justifi/webcomponents/dist/loader';
+import { HTMLAttributes } from 'react';
+type StencilToReact<T> = {
+  [K in keyof T]?: T[K] &
+    Omit<HTMLAttributes<Element>, 'className'> & {
+      class?: string;
+    };
+};
+declare global {
+  export namespace JSX {
+    interface IntrinsicElements extends StencilToReact<LocalJSX.IntrinsicElements> {}
+  }
+}
+```
+Import that file once at the edge of your application (for example inside `src/main.tsx`) so the declarations register globally.
+## Calling methods with refs
+```tsx
+import { useRef } from 'react';
+export default function CheckoutWithRef() {
+  const checkoutRef = useRef<any>(null);
+  const fillBillingForm = () => {
+    checkoutRef.current?.fillBillingForm({
+      name: 'John Doe',
+      address_line1: '123 Main St',
+      address_city: 'Minneapolis',
+      address_state: 'MN',
+      address_postal_code: '55401',
+    });
+  };
+  return (
+    <>
+      <justifi-checkout ref={checkoutRef} auth-token="token" checkout-id="chk_123" />
+      <button onClick={fillBillingForm}>Prefill billing</button>
+    </>
+  );
+}
+```
+## Listening to events
+Attach listeners with `addEventListener` inside `useEffect` or via inline handlers if you wrap the component.
+```tsx
+import { useEffect, useRef } from 'react';
+export function CheckoutWithEvents() {
+  const checkoutRef = useRef<any>(null);
+  useEffect(() => {
+    const element = checkoutRef.current;
+    if (!element) {
+      return;
+    }
+    const handleSubmit = (event: CustomEvent) => {
+      console.log('Submit payload', event.detail);
+    };
+    element.addEventListener('submit-event', handleSubmit);
+    return () => element.removeEventListener('submit-event', handleSubmit);
+  }, []);
+  return <justifi-checkout ref={checkoutRef} auth-token="token" checkout-id="chk_123" />;
+}
+```