@justifi/webcomponents 0.2.2 → 0.4.0

package/dist/esm/justifi-card-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-05706eb5.js';
+import { r as registerInstance, c as createEvent, h } from './index-3ce5521c.js';
 
 const CardForm = class {
   constructor(hostRef) {
@@ -8,6 +8,7 @@ const CardForm = class {
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -45,7 +46,7 @@ const CardForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/esm/justifi-payment-form.entry.js

@@ -1,12 +1,55 @@
-import { r as registerInstance, h, H as Host } from './index-05706eb5.js';
+import { r as registerInstance, h, H as Host } from './index-3ce5521c.js';
+import { P as PaymentMethodTypes } from './Payment-3f7570a8.js';
 
 const PaymentForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.validationStrategy = undefined;
+    this.bankAccount = undefined;
+    this.card = undefined;
+    this.iframeOrigin = undefined;
+    this.selectedPaymentMethodType = undefined;
+    this.allowedPaymentMethodTypes = [];
+  }
+  connectedCallback() {
+    if (this.card) {
+      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
+    }
+    if (this.bankAccount) {
+      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);
+    }
+    if (!this.allowedPaymentMethodTypes.length) {
+      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
+    }
+    this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];
+  }
+  paymentMethodSelectedHandler(event) {
+    const paymentMethodType = event.detail;
+    this.selectedPaymentMethodType = paymentMethodType;
+  }
+  async fillBillingForm(fields) {
+    this.billingFormRef.fill(fields);
+  }
+  async submit(args) {
+    if (!this.paymentMethodFormRef || !this.billingFormRef)
+      return;
+    const billingFormValidation = await this.billingFormRef.validate();
+    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
+      return;
+    const billingFormFieldValues = await this.billingFormRef.getValues();
+    const paymentMethodData = Object.assign(Object.assign({}, args.paymentMethodData), billingFormFieldValues);
+    return this.paymentMethodFormRef.tokenize(args.clientId, paymentMethodData, args.accountId);
   }
   render() {
-    return (h(Host, null, h("form", null, h("slot", null))));
+    return (h(Host, null, h("form", null, (this.allowedPaymentMethodTypes.length > 1) && (h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType })), h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
+        if (el) {
+          this.paymentMethodFormRef = el;
+        }
+      } }), h("justifi-billing-form", { legend: "Billing Info", ref: el => {
+        if (el) {
+          this.billingFormRef = el;
+        }
+      } }))));
   }
 };
 

package/dist/esm/justifi-payment-method-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-05706eb5.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3ce5521c.js';
 
 const MessageEventType = {
   card: {
@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "0.2.2";
+const version = "0.4.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/index.js";
@@ -43,11 +43,11 @@ const scripts = {
 	build: "stencil build --docs",
 	start: "concurrently -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"yarn run start-stencil\" \"yarn run storybook\"",
 	"start-stencil": "stencil build --watch --serve --no-open",
-	test: "stencil test --spec --e2e",
-	"test:watch": "stencil test --spec --e2e --watchAll",
+	test: "stencil test --spec",
+	"test:watch": "stencil test --spec --watchAll",
 	generate: "stencil generate",
-	storybook: "start-storybook -p 6006",
-	"build-storybook": "build-storybook"
+	storybook: "storybook dev -p 6006 --quiet",
+	"build-storybook": "storybook build"
 };
 const dependencies = {
 	"@stencil/core": "^2.13.0",
@@ -58,22 +58,30 @@ const dependencies = {
 	yup: "^1.0.0"
 };
 const devDependencies = {
+	"@babel/preset-env": "^7.21.4",
+	"@babel/preset-typescript": "^7.21.4",
 	"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-	"@storybook/addon-actions": "^6.5.16",
-	"@storybook/addon-essentials": "^6.5.16",
-	"@storybook/addon-interactions": "^6.5.16",
-	"@storybook/addon-links": "^6.5.16",
-	"@storybook/builder-webpack4": "^6.5.16",
-	"@storybook/html": "^6.5.16",
-	"@storybook/manager-webpack4": "^6.5.16",
-	"@storybook/testing-library": "^0.0.13",
-	"@types/jest": "^27.0.3",
+	"@storybook/addon-actions": "^7.0.4",
+	"@storybook/addon-essentials": "^7.0.4",
+	"@storybook/addon-interactions": "^7.0.4",
+	"@storybook/addon-links": "^7.0.4",
+	"@storybook/html": "^7.0.4",
+	"@storybook/html-webpack5": "^7.0.4",
+	"@storybook/jest": "^0.1.0",
+	"@storybook/testing-library": "^0.1.0",
+	"@types/jest": "27.0.3",
+	"@types/node": "^18.15.11",
+	"@types/react": "^18.0.37",
+	"@types/react-dom": "^18.0.11",
 	"auto-changelog": "^2.4.0",
 	concurrently: "^7.6.0",
 	jest: "^27.4.5",
 	"jest-cli": "^27.4.5",
 	puppeteer: "^10.0.0",
-	"release-it": "^15.6.0"
+	react: "^18.2.0",
+	"react-dom": "^18.2.0",
+	"release-it": "^15.6.0",
+	storybook: "^7.0.4"
 };
 const license = "MIT";
 const packageJson = {
@@ -106,6 +114,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
     this.paymentMethodStyleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -167,7 +176,9 @@ const PaymentMethodForm = class {
   }
   ;
   getIframeSrc() {
-    let iframeSrc = `https://js.justifi.ai/v2/${this.paymentMethodFormType}`;
+    const productionIframeOrigin = 'https://js.justifi.ai/v2';
+    const iframeOrigin = this.iframeOrigin || productionIframeOrigin;
+    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     if (this.paymentMethodFormValidationStrategy) {
       iframeSrc += `?validationStrategy=${this.paymentMethodFormValidationStrategy}`;
     }

package/dist/esm/justifi-payments-list.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-05706eb5.js';
+import { r as registerInstance, h, H as Host } from './index-3ce5521c.js';
+import { a as Payment } from './Payment-3f7570a8.js';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -106,74 +107,6 @@ function handleError(requestUrl) {
   console.error(`Error fetching from ${requestUrl}`);
 }
 
-var CaptureStrategy;
-(function (CaptureStrategy) {
-  CaptureStrategy["automatic"] = "automatic";
-  CaptureStrategy["manual"] = "manual";
-})(CaptureStrategy || (CaptureStrategy = {}));
-var PaymentMethodTypes;
-(function (PaymentMethodTypes) {
-  PaymentMethodTypes["card"] = "card";
-  PaymentMethodTypes["bankAccount"] = "bank_account";
-})(PaymentMethodTypes || (PaymentMethodTypes = {}));
-var PaymentStatuses;
-(function (PaymentStatuses) {
-  PaymentStatuses["pending"] = "pending";
-  PaymentStatuses["authorized"] = "authorized";
-  PaymentStatuses["succeeded"] = "succeeded";
-  PaymentStatuses["failed"] = "failed";
-  PaymentStatuses["disputed"] = "disputed";
-  PaymentStatuses["fully_refunded"] = "fully_refunded";
-  PaymentStatuses["partially_refunded"] = "partially_refunded";
-})(PaymentStatuses || (PaymentStatuses = {}));
-var PaymentDisputedStatuses;
-(function (PaymentDisputedStatuses) {
-  // if a dispute is 'won', we don't show a dispute status, just general status
-  PaymentDisputedStatuses["lost"] = "lost";
-  PaymentDisputedStatuses["open"] = "open";
-})(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
-class Payment {
-  constructor(payment) {
-    this.id = payment.id;
-    this.account_id = payment.account_id;
-    this.amount = payment.amount;
-    this.amount_disputed = payment.amount_disputed;
-    this.amount_refundable = payment.amount_refundable;
-    this.amount_refunded = payment.amount_refunded;
-    this.balance = payment.balance;
-    this.captured = payment.captured;
-    this.capture_strategy = payment.capture_strategy;
-    this.currency = payment.currency;
-    this.description = payment.description;
-    this.disputed = payment.disputed;
-    this.disputes = payment.disputes;
-    this.error_code = payment.error_code;
-    this.error_description = payment.error_description;
-    this.fee_amount = payment.fee_amount;
-    this.is_test = payment.is_test;
-    this.metadata = payment.metadata;
-    this.payment_method = payment.payment_method;
-    this.payment_intent_id = payment.payment_intent_id;
-    this.refunded = payment.refunded;
-    this.status = payment.status;
-    this.created_at = payment.created_at;
-    this.updated_at = payment.updated_at;
-  }
-  get disputedStatus() {
-    const lost = this.disputes.some((dispute) => dispute.status === PaymentDisputedStatuses.lost);
-    // if a dispute is 'won', we don't show a dispute status, just general status
-    if (!this.disputed) {
-      return null;
-    }
-    else if (lost) {
-      return PaymentDisputedStatuses.lost;
-    }
-    else {
-      return PaymentDisputedStatuses.open;
-    }
-  }
-}
-
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
     return NaN;

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-05706eb5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3ce5521c.js';
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["justifi-billing-form",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[0,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/esm/select-input_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-05706eb5.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3ce5521c.js';
 
 const selectInputCss = ":host{display:block}label{display:block}";
 
@@ -20,9 +20,7 @@ const SelectInput = class {
   }
   ;
   render() {
-    return (h(Host, null, h("label", null, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => {
-      return (h("option", { value: option.value }, option.label));
-    })), this.error && h("div", { style: { color: 'red' } }, this.error)));
+    return (h(Host, null, h("label", null, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { style: { color: 'red' } }, this.error)));
   }
 };
 SelectInput.style = selectInputCss;

package/dist/esm/webcomponents.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-05706eb5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3ce5521c.js';
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["justifi-billing-form",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[0,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });

package/dist/types/api/Payment.d.ts

@@ -4,7 +4,7 @@ export declare enum CaptureStrategy {
 }
 export declare enum PaymentMethodTypes {
   card = "card",
-  bankAccount = "bank_account"
+  bankAccount = "bankAccount"
 }
 export declare enum PaymentStatuses {
   pending = "pending",

package/dist/types/components/bank-account-form/bank-account-form.d.ts

@@ -3,6 +3,7 @@ import { Theme } from '../payment-method-form/theme';
 export declare class BankAccountForm {
   validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   styleOverrides?: string;
+  iframeOrigin?: string;
   internalStyleOverrides: Theme;
   bankAccountFormReady: EventEmitter;
   bankAccountFormTokenize: EventEmitter<{

package/dist/types/components/billing-form/billing-form-schema.d.ts

@@ -1,4 +1,11 @@
 export declare const RegExZip: RegExp;
+export interface BillingFormFields {
+  address_line1: string;
+  address_line2?: string;
+  address_city: string;
+  address_state: string;
+  address_postal_code: string;
+}
 declare const BillingFormSchema: import("yup").ObjectSchema<{
   address_line1: string;
   address_line2: string;

package/dist/types/components/billing-form/billing-form.d.ts

@@ -1,17 +1,14 @@
-interface BillingFormFields {
-  address_line1: string;
-  address_line2?: string;
-  address_city: string;
-  address_state: string;
-  address_postal_code: string;
-}
+import { BillingFormFields } from './billing-form-schema';
 export declare class BillingForm {
+  legend?: string;
   billingFields: BillingFormFields;
   billingFieldsErrors: any;
   setFormValue(event: any): void;
+  fill(fields: BillingFormFields): Promise<void>;
   validate(): Promise<{
     isValid: boolean;
   }>;
+  getValues(): Promise<BillingFormFields>;
+  legendBlock: any;
   render(): any;
 }
-export {};

package/dist/types/components/billing-form/billing-form.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {};
+};
+export default _default;
+export declare const Basic: any;

package/dist/types/components/card-form/card-form.d.ts

@@ -3,6 +3,7 @@ import { Theme } from '../payment-method-form/theme';
 export declare class CardForm {
   validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   styleOverrides?: string;
+  iframeOrigin?: string;
   internalStyleOverrides: Theme;
   cardFormReady: EventEmitter;
   cardFormTokenize: EventEmitter<{

package/dist/types/components/card-form/card-form.stories.d.ts

@@ -12,3 +12,4 @@ export default _default;
 export declare const Basic: any;
 export declare const Embedded: any;
 export declare const Styled: any;
+export declare const Completed: any;

package/dist/types/components/payment-form/payment-form.d.ts

@@ -1,4 +1,20 @@
+import { PaymentMethodTypes } from '../../api';
+import { BillingFormFields } from '../billing-form/billing-form-schema';
 export declare class PaymentForm {
-  validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  bankAccount?: boolean;
+  card?: boolean;
+  iframeOrigin?: string;
+  selectedPaymentMethodType: PaymentMethodTypes;
+  allowedPaymentMethodTypes: PaymentMethodTypes[];
+  private paymentMethodFormRef?;
+  private billingFormRef?;
+  connectedCallback(): void;
+  paymentMethodSelectedHandler(event: CustomEvent): void;
+  fillBillingForm(fields: BillingFormFields): Promise<void>;
+  submit(args: {
+    clientId: string;
+    paymentMethodData: any;
+    accountId?: string;
+  }): Promise<any>;
   render(): any;
 }

package/dist/types/components/payment-form/payment-form.stories.d.ts

@@ -0,0 +1,44 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    'bank-account': {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    card: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    accountId: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    clientId: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    paymentMethodData: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: any[];
+    };
+  };
+  decorators: ((story: any) => any)[];
+};
+export default _default;
+export declare const Basic: any;

package/dist/types/components/payment-form/payment-method-selector.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PaymentMethodTypes } from '../../api';
+export declare class PaymentMethodSelector {
+  paymentMethodTypes: PaymentMethodTypes[];
+  selectedPaymentMethodType: PaymentMethodTypes;
+  paymentMethodSelected: EventEmitter;
+  defaultRadioButtonOption: HTMLInputElement;
+  onChangeHandler(event: any): void;
+  render(): any;
+}

package/dist/types/components/payment-form/tokenize.d.ts

@@ -0,0 +1,5 @@
+export interface TokenizeArguments {
+  clientId: string;
+  paymentMethodData: any;
+  accountId?: string;
+}

package/dist/types/components/payment-method-form/payment-method-form.d.ts

@@ -4,6 +4,7 @@ export declare class PaymentMethodForm {
   paymentMethodFormType: 'card' | 'bankAccount';
   paymentMethodFormValidationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   paymentMethodStyleOverrides: Theme | undefined;
+  iframeOrigin?: string;
   paymentMethodFormReady: EventEmitter;
   paymentMethodFormTokenize: EventEmitter<{
     data: any;

package/dist/types/components.d.ts

@@ -5,34 +5,50 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { BillingFormFields } from "./components/billing-form/billing-form-schema";
 import { ValidationError } from "yup";
 import { Theme } from "./components/payment-method-form/theme";
+import { PaymentMethodTypes } from "./api";
 export namespace Components {
     interface JustifiBankAccountForm {
+        "iframeOrigin"?: string;
         "styleOverrides"?: string;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
         "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
+        "fill": (fields: BillingFormFields) => Promise<void>;
+        "getValues": () => Promise<BillingFormFields>;
+        "legend"?: string;
         "validate": () => Promise<{ isValid: boolean; }>;
     }
     interface JustifiCardForm {
+        "iframeOrigin"?: string;
         "styleOverrides"?: string;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
         "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {
-        "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "bankAccount"?: boolean;
+        "card"?: boolean;
+        "fillBillingForm": (fields: BillingFormFields) => Promise<void>;
+        "iframeOrigin"?: string;
+        "submit": (args: { clientId: string; paymentMethodData: any; accountId?: string; }) => Promise<any>;
     }
     interface JustifiPaymentMethodForm {
+        "iframeOrigin"?: string;
         "paymentMethodFormType": 'card' | 'bankAccount';
         "paymentMethodFormValidationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
         "paymentMethodStyleOverrides": Theme | undefined;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
     }
+    interface JustifiPaymentMethodSelector {
+        "paymentMethodTypes": PaymentMethodTypes[];
+        "selectedPaymentMethodType": PaymentMethodTypes;
+    }
     interface JustifiPaymentsList {
         "accountId": string;
         "auth": { token?: string };
@@ -63,6 +79,10 @@ export interface JustifiPaymentMethodFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJustifiPaymentMethodFormElement;
 }
+export interface JustifiPaymentMethodSelectorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJustifiPaymentMethodSelectorElement;
+}
 export interface SelectInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSelectInputElement;
@@ -102,6 +122,12 @@ declare global {
         prototype: HTMLJustifiPaymentMethodFormElement;
         new (): HTMLJustifiPaymentMethodFormElement;
     };
+    interface HTMLJustifiPaymentMethodSelectorElement extends Components.JustifiPaymentMethodSelector, HTMLStencilElement {
+    }
+    var HTMLJustifiPaymentMethodSelectorElement: {
+        prototype: HTMLJustifiPaymentMethodSelectorElement;
+        new (): HTMLJustifiPaymentMethodSelectorElement;
+    };
     interface HTMLJustifiPaymentsListElement extends Components.JustifiPaymentsList, HTMLStencilElement {
     }
     var HTMLJustifiPaymentsListElement: {
@@ -126,6 +152,7 @@ declare global {
         "justifi-card-form": HTMLJustifiCardFormElement;
         "justifi-payment-form": HTMLJustifiPaymentFormElement;
         "justifi-payment-method-form": HTMLJustifiPaymentMethodFormElement;
+        "justifi-payment-method-selector": HTMLJustifiPaymentMethodSelectorElement;
         "justifi-payments-list": HTMLJustifiPaymentsListElement;
         "select-input": HTMLSelectInputElement;
         "text-input": HTMLTextInputElement;
@@ -133,6 +160,7 @@ declare global {
 }
 declare namespace LocalJSX {
     interface JustifiBankAccountForm {
+        "iframeOrigin"?: string;
         "onBankAccountFormReady"?: (event: JustifiBankAccountFormCustomEvent<any>) => void;
         "onBankAccountFormTokenize"?: (event: JustifiBankAccountFormCustomEvent<{ data: any }>) => void;
         "onBankAccountFormValidate"?: (event: JustifiBankAccountFormCustomEvent<{ data: { isValid: boolean } }>) => void;
@@ -140,8 +168,10 @@ declare namespace LocalJSX {
         "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
+        "legend"?: string;
     }
     interface JustifiCardForm {
+        "iframeOrigin"?: string;
         "onCardFormReady"?: (event: JustifiCardFormCustomEvent<any>) => void;
         "onCardFormTokenize"?: (event: JustifiCardFormCustomEvent<{ data: any }>) => void;
         "onCardFormValidate"?: (event: JustifiCardFormCustomEvent<{ data: { isValid: boolean } }>) => void;
@@ -149,15 +179,23 @@ declare namespace LocalJSX {
         "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {
-        "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "bankAccount"?: boolean;
+        "card"?: boolean;
+        "iframeOrigin"?: string;
     }
     interface JustifiPaymentMethodForm {
+        "iframeOrigin"?: string;
         "onPaymentMethodFormReady"?: (event: JustifiPaymentMethodFormCustomEvent<any>) => void;
         "onPaymentMethodFormTokenize"?: (event: JustifiPaymentMethodFormCustomEvent<{ data: any }>) => void;
         "paymentMethodFormType"?: 'card' | 'bankAccount';
         "paymentMethodFormValidationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
         "paymentMethodStyleOverrides"?: Theme | undefined;
     }
+    interface JustifiPaymentMethodSelector {
+        "onPaymentMethodSelected"?: (event: JustifiPaymentMethodSelectorCustomEvent<any>) => void;
+        "paymentMethodTypes"?: PaymentMethodTypes[];
+        "selectedPaymentMethodType"?: PaymentMethodTypes;
+    }
     interface JustifiPaymentsList {
         "accountId"?: string;
         "auth"?: { token?: string };
@@ -183,6 +221,7 @@ declare namespace LocalJSX {
         "justifi-card-form": JustifiCardForm;
         "justifi-payment-form": JustifiPaymentForm;
         "justifi-payment-method-form": JustifiPaymentMethodForm;
+        "justifi-payment-method-selector": JustifiPaymentMethodSelector;
         "justifi-payments-list": JustifiPaymentsList;
         "select-input": SelectInput;
         "text-input": TextInput;
@@ -197,6 +236,7 @@ declare module "@stencil/core" {
             "justifi-card-form": LocalJSX.JustifiCardForm & JSXBase.HTMLAttributes<HTMLJustifiCardFormElement>;
             "justifi-payment-form": LocalJSX.JustifiPaymentForm & JSXBase.HTMLAttributes<HTMLJustifiPaymentFormElement>;
             "justifi-payment-method-form": LocalJSX.JustifiPaymentMethodForm & JSXBase.HTMLAttributes<HTMLJustifiPaymentMethodFormElement>;
+            "justifi-payment-method-selector": LocalJSX.JustifiPaymentMethodSelector & JSXBase.HTMLAttributes<HTMLJustifiPaymentMethodSelectorElement>;
             "justifi-payments-list": LocalJSX.JustifiPaymentsList & JSXBase.HTMLAttributes<HTMLJustifiPaymentsListElement>;
             "select-input": LocalJSX.SelectInput & JSXBase.HTMLAttributes<HTMLSelectInputElement>;
             "text-input": LocalJSX.TextInput & JSXBase.HTMLAttributes<HTMLTextInputElement>;

package/dist/webcomponents/p-21e020a8.js

@@ -0,0 +1 @@
+var t,i,s,h;!function(t){t.automatic="automatic",t.manual="manual"}(t||(t={})),function(t){t.card="card",t.bankAccount="bankAccount"}(i||(i={})),function(t){t.pending="pending",t.authorized="authorized",t.succeeded="succeeded",t.failed="failed",t.disputed="disputed",t.fully_refunded="fully_refunded",t.partially_refunded="partially_refunded"}(s||(s={})),function(t){t.lost="lost",t.open="open"}(h||(h={}));class n{constructor(t){this.id=t.id,this.account_id=t.account_id,this.amount=t.amount,this.amount_disputed=t.amount_disputed,this.amount_refundable=t.amount_refundable,this.amount_refunded=t.amount_refunded,this.balance=t.balance,this.captured=t.captured,this.capture_strategy=t.capture_strategy,this.currency=t.currency,this.description=t.description,this.disputed=t.disputed,this.disputes=t.disputes,this.error_code=t.error_code,this.error_description=t.error_description,this.fee_amount=t.fee_amount,this.is_test=t.is_test,this.metadata=t.metadata,this.payment_method=t.payment_method,this.payment_intent_id=t.payment_intent_id,this.refunded=t.refunded,this.status=t.status,this.created_at=t.created_at,this.updated_at=t.updated_at}get disputedStatus(){const t=this.disputes.some((t=>t.status===h.lost));return this.disputed?t?h.lost:h.open:null}}export{i as P,n as a}