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

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

@@ -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 '@justifi/webcomponents/docs/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

@@ -1,11 +1,24 @@
 {
   "name": "@justifi/webcomponents",
-  "version": "6.5.1-rc.3",
+  "version": "6.5.1-rc.5",
   "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",

package/dist/collection/api/GooglePay.js

@@ -1,212 +0,0 @@
-import { checkoutStore } from "../store/checkout.store";
-export var GooglePayButtonType;
-(function (GooglePayButtonType) {
-    GooglePayButtonType["PLAIN"] = "plain";
-    GooglePayButtonType["BUY"] = "buy";
-    GooglePayButtonType["BOOK"] = "book";
-    GooglePayButtonType["CHECKOUT"] = "checkout";
-    GooglePayButtonType["DONATE"] = "donate";
-    GooglePayButtonType["ORDER"] = "order";
-    GooglePayButtonType["PAY"] = "pay";
-    GooglePayButtonType["SUBSCRIBE"] = "subscribe";
-})(GooglePayButtonType || (GooglePayButtonType = {}));
-export var GooglePayButtonStyle;
-(function (GooglePayButtonStyle) {
-    GooglePayButtonStyle["BLACK"] = "black";
-    GooglePayButtonStyle["WHITE"] = "white";
-})(GooglePayButtonStyle || (GooglePayButtonStyle = {}));
-export var GooglePayButtonSizeMode;
-(function (GooglePayButtonSizeMode) {
-    GooglePayButtonSizeMode["STATIC"] = "static";
-    GooglePayButtonSizeMode["FILL"] = "fill";
-})(GooglePayButtonSizeMode || (GooglePayButtonSizeMode = {}));
-export var GooglePayEnvironment;
-(function (GooglePayEnvironment) {
-    GooglePayEnvironment["PRODUCTION"] = "PRODUCTION";
-    GooglePayEnvironment["TEST"] = "TEST";
-})(GooglePayEnvironment || (GooglePayEnvironment = {}));
-export class GooglePayConfig {
-    constructor(data) {
-        this.environment = data.environment;
-        this.merchantId = data.merchantId;
-        this.merchantName = data.merchantName;
-        this.buttonType = data.buttonType || GooglePayButtonType.PLAIN;
-        this.buttonStyle = data.buttonStyle || GooglePayButtonStyle.BLACK;
-        this.buttonSizeMode = data.buttonSizeMode || GooglePayButtonSizeMode.STATIC;
-        this.buttonLocale = data.buttonLocale || 'en';
-    }
-    get isValid() {
-        return !!(this.environment && this.merchantName);
-    }
-}
-export class GooglePayPaymentDataRequest {
-    constructor(data) {
-        this.apiVersion = data.apiVersion;
-        this.apiVersionMinor = data.apiVersionMinor;
-        this.allowedPaymentMethods = data.allowedPaymentMethods;
-        this.transactionInfo = data.transactionInfo;
-        this.merchantInfo = data.merchantInfo;
-        this.callbackIntents = data.callbackIntents;
-        this.shippingAddressRequired = data.shippingAddressRequired;
-        this.shippingAddressParameters = data.shippingAddressParameters;
-        this.emailRequired = data.emailRequired;
-    }
-    get isValid() {
-        var _a, _b, _c, _d;
-        const hasApiVersion = typeof this.apiVersion === 'number' && this.apiVersion > 0;
-        const hasApiVersionMinor = typeof this.apiVersionMinor === 'number' && this.apiVersionMinor >= 0;
-        const hasAllowedMethods = Array.isArray(this.allowedPaymentMethods) &&
-            this.allowedPaymentMethods.length > 0;
-        const hasTxnCountry = Boolean((_a = this.transactionInfo) === null || _a === void 0 ? void 0 : _a.countryCode);
-        const hasTxnCurrency = Boolean((_b = this.transactionInfo) === null || _b === void 0 ? void 0 : _b.currencyCode);
-        const hasTxnTotal = Boolean((_c = this.transactionInfo) === null || _c === void 0 ? void 0 : _c.totalPrice);
-        const hasMerchantName = Boolean((_d = this.merchantInfo) === null || _d === void 0 ? void 0 : _d.merchantName);
-        return (hasApiVersion &&
-            hasApiVersionMinor &&
-            hasAllowedMethods &&
-            hasTxnCountry &&
-            hasTxnCurrency &&
-            hasTxnTotal &&
-            hasMerchantName);
-    }
-}
-export class GooglePayHelpers {
-    /**
-     * Check if Google Pay is supported in the current environment
-     */
-    static isGooglePaySupported() {
-        const hasWindow = typeof window !== 'undefined';
-        const hasGoogle = hasWindow && 'google' in window;
-        const hasPayments = hasGoogle && 'payments' in window.google;
-        const hasApi = hasPayments && 'api' in window.google.payments;
-        const result = hasWindow && hasGoogle && hasPayments && hasApi;
-        console.log('[GooglePayHelpers] isGooglePaySupported:', {
-            hasWindow,
-            hasGoogle,
-            hasPayments,
-            hasApi,
-            result,
-        });
-        return result;
-    }
-    /**
-     * Create a Google Pay client instance
-     */
-    static createGooglePayClient(environment) {
-        console.log('[GooglePayHelpers] createGooglePayClient: Starting', {
-            environment,
-        });
-        if (!this.isGooglePaySupported()) {
-            console.warn('[GooglePayHelpers] createGooglePayClient: Google Pay not supported');
-            return null;
-        }
-        try {
-            const envString = environment === GooglePayEnvironment.PRODUCTION
-                ? 'PRODUCTION'
-                : 'TEST';
-            console.log('[GooglePayHelpers] createGooglePayClient: Creating PaymentsClient', {
-                environment: envString,
-            });
-            const client = new window.google.payments.api.PaymentsClient({
-                environment: envString,
-            });
-            console.log('[GooglePayHelpers] createGooglePayClient: Client created successfully', {
-                hasClient: !!client,
-            });
-            return client;
-        }
-        catch (error) {
-            console.error('[GooglePayHelpers] createGooglePayClient: Error creating client', error);
-            return null;
-        }
-    }
-    /**
-     * Format amount for Google Pay (expects string in full currency units)
-     */
-    static formatAmount(amount) {
-        return (amount / 100).toFixed(2);
-    }
-    /**
-     * Parse amount from Google Pay format to cents
-     */
-    static parseAmount(amount) {
-        return Math.round(parseFloat(amount) * 100);
-    }
-    /**
-     * Create a line item for Google Pay
-     */
-    static createLineItem(label, amount, type = 'LINE_ITEM') {
-        return {
-            label,
-            price: this.formatAmount(amount),
-            type,
-        };
-    }
-    /**
-     * Get default supported card networks
-     */
-    static getDefaultSupportedNetworks() {
-        return ['VISA', 'MASTERCARD', 'AMEX', 'DISCOVER'];
-    }
-    /**
-     * Get default allowed authentication methods
-     */
-    static getDefaultAuthMethods() {
-        return ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
-    }
-    /**
-     * Create default card parameters
-     */
-    static createDefaultCardParameters() {
-        return {
-            allowedAuthMethods: this.getDefaultAuthMethods(),
-            allowedCardNetworks: this.getDefaultSupportedNetworks(),
-            billingAddressRequired: false,
-        };
-    }
-    /**
-     * Create default tokenization specification
-     */
-    static createTokenizationSpecification() {
-        return {
-            type: 'PAYMENT_GATEWAY',
-            parameters: {
-                gateway: 'justifi',
-                gatewayMerchantId: checkoutStore.accountId,
-            },
-        };
-    }
-    /**
-     * Create default payment method data
-     */
-    static createPaymentMethodData() {
-        return {
-            type: 'CARD',
-            parameters: this.createDefaultCardParameters(),
-            tokenizationSpecification: this.createTokenizationSpecification(),
-        };
-    }
-    /**
-     * Create base payment data request check
-     */
-    static createBasePaymentDataRequest() {
-        var _a;
-        console.log('[GooglePayHelpers] createBasePaymentDataRequest: Creating base request', {
-            accountId: checkoutStore.accountId,
-        });
-        const base = {
-            apiVersion: 2,
-            apiVersionMinor: 0,
-            allowedPaymentMethods: [this.createPaymentMethodData()],
-        };
-        console.log('[GooglePayHelpers] createBasePaymentDataRequest: Base request created', {
-            apiVersion: base.apiVersion,
-            apiVersionMinor: base.apiVersionMinor,
-            allowedPaymentMethodsCount: (_a = base.allowedPaymentMethods) === null || _a === void 0 ? void 0 : _a.length,
-        });
-        // For development and broader availability of the button, do not require an existing card
-        // This allows isReadyToPay to return true on supported browsers even without a saved payment method
-        base.existingPaymentMethodRequired = false;
-        return base;
-    }
-}