@justifi/webcomponents 0.0.11 → 0.0.13

package/dist/collection/components/card-form/card-form.js

@@ -1,52 +1,45 @@
 import { h } from '@stencil/core';
 export class CardForm {
   constructor() {
-    this.iframeOrigin = undefined;
+    this.validationStrategy = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
   }
-  changeHandler(event) {
-    this.cardFormChange.emit(event);
-  }
-  blurHandler(event) {
-    this.cardFormBlur.emit(event);
-  }
   tokenizeHandler(event) {
     this.cardFormTokenize.emit(event);
   }
+  validateHandler(event) {
+    this.cardFormValidate.emit(event);
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin || 'https://js.justifi.ai/card', "payment-method-form-ready": this.cardFormReady, "payment-method-form-change": this.cardFormChange, "payment-method-form-blur": this.cardFormBlur, "payment-method-form-tokenize": this.cardFormTokenize }));
+      }, "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' }));
   }
   static get is() { return "justifi-card-form"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["card-form.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["card-form.css"]
-    };
-  }
   static get properties() {
     return {
-      "iframeOrigin": {
+      "validationStrategy": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
+          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
           "references": {}
         },
         "required": false,
@@ -55,7 +48,7 @@ export class CardForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "iframe-origin",
+        "attribute": "validation-strategy",
         "reflect": false
       }
     };
@@ -77,23 +70,8 @@ export class CardForm {
           "references": {}
         }
       }, {
-        "method": "cardFormChange",
-        "name": "cardFormChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "cardFormBlur",
-        "name": "cardFormBlur",
+        "method": "cardFormTokenize",
+        "name": "cardFormTokenize",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -102,13 +80,13 @@ export class CardForm {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{ data: any }",
+          "resolved": "{ data: any; }",
           "references": {}
         }
       }, {
-        "method": "cardFormTokenize",
-        "name": "cardFormTokenize",
+        "method": "cardFormValidate",
+        "name": "cardFormValidate",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -117,8 +95,8 @@ export class CardForm {
           "text": ""
         },
         "complexType": {
-          "original": "{ data: any }",
-          "resolved": "{ data: any; }",
+          "original": "{ data: { isValid: boolean } }",
+          "resolved": "{ data: { isValid: boolean; }; }",
           "references": {}
         }
       }];
@@ -149,6 +127,22 @@ export class CardForm {
           "text": "",
           "tags": []
         }
+      },
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
@@ -160,20 +154,14 @@ export class CardForm {
         "capture": false,
         "passive": false
       }, {
-        "name": "paymentMethodFormChange",
-        "method": "changeHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "paymentMethodFormBlur",
-        "method": "blurHandler",
+        "name": "paymentMethodFormTokenize",
+        "method": "tokenizeHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "paymentMethodFormTokenize",
-        "method": "tokenizeHandler",
+        "name": "paymentMethodFormValidate",
+        "method": "validateHandler",
         "target": undefined,
         "capture": false,
         "passive": false

package/dist/collection/components/payment-method-form/message-event-types.js

@@ -0,0 +1,14 @@
+export const MessageEventType = {
+  card: {
+    ready: 'justifi.card.ready',
+    tokenize: 'justifi.card.tokenize',
+    validate: 'justifi.card.validate',
+    resize: 'justifi.card.resize',
+  },
+  bankAccount: {
+    ready: 'justifi.bankAccount.ready',
+    tokenize: 'justifi.bankAccount.tokenize',
+    validate: 'justifi.bankAccount.validate',
+    resize: 'justifi.bankAccount.resize',
+  }
+};

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -1,14 +1,10 @@
 import { Host, h } from '@stencil/core';
-var DispatchedEventTypes;
-(function (DispatchedEventTypes) {
-  DispatchedEventTypes["blur"] = "blur";
-  DispatchedEventTypes["change"] = "change";
-  DispatchedEventTypes["ready"] = "ready";
-  DispatchedEventTypes["tokenize"] = "tokenize";
-})(DispatchedEventTypes || (DispatchedEventTypes = {}));
+import { MessageEventType } from './message-event-types';
 export class PaymentMethodForm {
   constructor() {
-    this.iframeOrigin = undefined;
+    this.paymentMethodFormType = undefined;
+    this.paymentMethodFormValidationStrategy = undefined;
+    this.height = 55;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -20,45 +16,48 @@ export class PaymentMethodForm {
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
     const messageData = messagePayload.data;
-    switch (messageType) {
-      case DispatchedEventTypes.ready:
-        this.paymentMethodFormReady.emit(messageData);
-        break;
-      case DispatchedEventTypes.change:
-        this.paymentMethodFormChange.emit(messageData);
-        break;
-      case DispatchedEventTypes.blur:
-        this.paymentMethodFormBlur.emit(messageData);
-        break;
-      default:
-        break;
+    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
+      this.paymentMethodFormReady.emit(messageData);
     }
-  }
-  triggerTokenization(clientKey, paymentMethodMetadata, account) {
-    if (this.iframeElement && this.iframeElement.contentWindow) {
-      this.iframeElement.contentWindow.postMessage({
-        eventType: DispatchedEventTypes.tokenize,
-        clientKey: clientKey,
-        paymentMethodMetadata: paymentMethodMetadata,
-        account: account
-      }, '*');
+    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {
+      this.height = messageData.height;
     }
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
+  async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
-      const tokenizeEventListener = (event) => {
-        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+      const responseListener = (event) => {
+        if (event.data.eventType !== eventType)
           return;
-        window.removeEventListener('message', tokenizeEventListener);
+        window.removeEventListener('message', responseListener);
         resolve(event.data.data);
       };
-      window.addEventListener('message', tokenizeEventListener);
-      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
+      window.addEventListener('message', responseListener);
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
     });
   }
+  async tokenize(clientKey, paymentMethodMetadata, account) {
+    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
+    const payload = {
+      clientKey: clientKey,
+      paymentMethodMetadata: paymentMethodMetadata,
+      account: account
+    };
+    return this.postMessageWithResponseListener(eventType, payload);
+  }
+  ;
+  async validate() {
+    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
+  }
   ;
+  getIframeSrc() {
+    let iframeSrc = `https://js.justifi.ai/v2/${this.paymentMethodFormType}`;
+    if (this.paymentMethodFormValidationStrategy) {
+      iframeSrc += `?validationStrategy=${this.paymentMethodFormValidationStrategy}`;
+    }
+    return iframeSrc;
+  }
   render() {
-    return (h(Host, null, h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
   }
   static get is() { return "justifi-payment-method-form"; }
   static get originalStyleUrls() {
@@ -73,12 +72,12 @@ export class PaymentMethodForm {
   }
   static get properties() {
     return {
-      "iframeOrigin": {
+      "paymentMethodFormType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'card' | 'bankAccount'",
+          "resolved": "\"bankAccount\" | \"card\"",
           "references": {}
         },
         "required": false,
@@ -87,11 +86,33 @@ export class PaymentMethodForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "iframe-origin",
+        "attribute": "payment-method-form-type",
+        "reflect": false
+      },
+      "paymentMethodFormValidationStrategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
+          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "payment-method-form-validation-strategy",
         "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "height": {}
+    };
+  }
   static get events() {
     return [{
         "method": "paymentMethodFormReady",
@@ -108,36 +129,6 @@ export class PaymentMethodForm {
           "resolved": "any",
           "references": {}
         }
-      }, {
-        "method": "paymentMethodFormChange",
-        "name": "paymentMethodFormChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "paymentMethodFormBlur",
-        "name": "paymentMethodFormBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
       }, {
         "method": "paymentMethodFormTokenize",
         "name": "paymentMethodFormTokenize",
@@ -173,8 +164,21 @@ export class PaymentMethodForm {
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "MessageEvent": {
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
               "location": "global"
             }
           },

package/dist/components/index.d.ts

@@ -16,6 +16,15 @@ export { PaymentsList as JustifiPaymentsList } from '../types/components/payment
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { JustifiBankAccountForm, defineCustomElement as defineCustomElementJustifiBankAccountForm } from './justifi-bank-account-form.js';
 export { JustifiCardForm, defineCustomElement as defineCustomElementJustifiCardForm } from './justifi-card-form.js';
 export { JustifiPaymentMethodForm, defineCustomElement as defineCustomElementJustifiPaymentMethodForm } from './justifi-payment-method-form.js';

package/dist/components/justifi-bank-account-form.js

@@ -6,40 +6,43 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.bankAccountFormReady = createEvent(this, "bankAccountFormReady", 7);
-    this.bankAccountFormChange = createEvent(this, "bankAccountFormChange", 7);
-    this.bankAccountFormBlur = createEvent(this, "bankAccountFormBlur", 7);
     this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
-    this.iframeOrigin = undefined;
+    this.bankAccountFormValidate = createEvent(this, "bankAccountFormValidate", 7);
+    this.validationStrategy = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
   }
-  changeHandler(event) {
-    this.bankAccountFormChange.emit(event);
-  }
-  blurHandler(event) {
-    this.bankAccountFormBlur.emit(event);
-  }
   tokenizeHandler(event) {
     this.bankAccountFormTokenize.emit(event);
   }
+  validateHandler(event) {
+    this.bankAccountFormValidate.emit(event);
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin || 'https://js.justifi.ai/bank-account', "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-change": this.bankAccountFormChange, "payment-method-form-blur": this.bankAccountFormBlur, "payment-method-form-tokenize": this.bankAccountFormTokenize }));
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
   }
 }, [0, "justifi-bank-account-form", {
-    "iframeOrigin": [1, "iframe-origin"],
-    "tokenize": [64]
-  }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormChange", "changeHandler"], [0, "paymentMethodFormBlur", "blurHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"]]]);
+    "validationStrategy": [1, "validation-strategy"],
+    "tokenize": [64],
+    "validate": [64]
+  }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/justifi-card-form.js

@@ -1,48 +1,48 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './payment-method-form.js';
 
-const cardFormCss = "justifi-card-form iframe{height:55px}";
-
 const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.cardFormReady = createEvent(this, "cardFormReady", 7);
-    this.cardFormChange = createEvent(this, "cardFormChange", 7);
-    this.cardFormBlur = createEvent(this, "cardFormBlur", 7);
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
-    this.iframeOrigin = undefined;
+    this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
+    this.validationStrategy = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
   }
-  changeHandler(event) {
-    this.cardFormChange.emit(event);
-  }
-  blurHandler(event) {
-    this.cardFormBlur.emit(event);
-  }
   tokenizeHandler(event) {
     this.cardFormTokenize.emit(event);
   }
+  validateHandler(event) {
+    this.cardFormValidate.emit(event);
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin || 'https://js.justifi.ai/card', "payment-method-form-ready": this.cardFormReady, "payment-method-form-change": this.cardFormChange, "payment-method-form-blur": this.cardFormBlur, "payment-method-form-tokenize": this.cardFormTokenize }));
+      }, "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' }));
   }
-  static get style() { return cardFormCss; }
 }, [0, "justifi-card-form", {
-    "iframeOrigin": [1, "iframe-origin"],
-    "tokenize": [64]
-  }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormChange", "changeHandler"], [0, "paymentMethodFormBlur", "blurHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"]]]);
+    "validationStrategy": [1, "validation-strategy"],
+    "tokenize": [64],
+    "validate": [64]
+  }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/payment-method-form.js

@@ -1,23 +1,31 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
+const MessageEventType = {
+  card: {
+    ready: 'justifi.card.ready',
+    tokenize: 'justifi.card.tokenize',
+    validate: 'justifi.card.validate',
+    resize: 'justifi.card.resize',
+  },
+  bankAccount: {
+    ready: 'justifi.bankAccount.ready',
+    tokenize: 'justifi.bankAccount.tokenize',
+    validate: 'justifi.bankAccount.validate',
+    resize: 'justifi.bankAccount.resize',
+  }
+};
+
 const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";
 
-var DispatchedEventTypes;
-(function (DispatchedEventTypes) {
-  DispatchedEventTypes["blur"] = "blur";
-  DispatchedEventTypes["change"] = "change";
-  DispatchedEventTypes["ready"] = "ready";
-  DispatchedEventTypes["tokenize"] = "tokenize";
-})(DispatchedEventTypes || (DispatchedEventTypes = {}));
 const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
-    this.paymentMethodFormChange = createEvent(this, "paymentMethodFormChange", 7);
-    this.paymentMethodFormBlur = createEvent(this, "paymentMethodFormBlur", 7);
     this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
-    this.iframeOrigin = undefined;
+    this.paymentMethodFormType = undefined;
+    this.paymentMethodFormValidationStrategy = undefined;
+    this.height = 55;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -29,48 +37,56 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
     const messageData = messagePayload.data;
-    switch (messageType) {
-      case DispatchedEventTypes.ready:
-        this.paymentMethodFormReady.emit(messageData);
-        break;
-      case DispatchedEventTypes.change:
-        this.paymentMethodFormChange.emit(messageData);
-        break;
-      case DispatchedEventTypes.blur:
-        this.paymentMethodFormBlur.emit(messageData);
-        break;
+    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
+      this.paymentMethodFormReady.emit(messageData);
     }
-  }
-  triggerTokenization(clientKey, paymentMethodMetadata, account) {
-    if (this.iframeElement && this.iframeElement.contentWindow) {
-      this.iframeElement.contentWindow.postMessage({
-        eventType: DispatchedEventTypes.tokenize,
-        clientKey: clientKey,
-        paymentMethodMetadata: paymentMethodMetadata,
-        account: account
-      }, '*');
+    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {
+      this.height = messageData.height;
     }
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
+  async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
-      const tokenizeEventListener = (event) => {
-        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+      const responseListener = (event) => {
+        if (event.data.eventType !== eventType)
           return;
-        window.removeEventListener('message', tokenizeEventListener);
+        window.removeEventListener('message', responseListener);
         resolve(event.data.data);
       };
-      window.addEventListener('message', tokenizeEventListener);
-      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
+      window.addEventListener('message', responseListener);
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
     });
   }
+  async tokenize(clientKey, paymentMethodMetadata, account) {
+    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
+    const payload = {
+      clientKey: clientKey,
+      paymentMethodMetadata: paymentMethodMetadata,
+      account: account
+    };
+    return this.postMessageWithResponseListener(eventType, payload);
+  }
+  ;
+  async validate() {
+    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
+  }
   ;
+  getIframeSrc() {
+    let iframeSrc = `https://js.justifi.ai/v2/${this.paymentMethodFormType}`;
+    if (this.paymentMethodFormValidationStrategy) {
+      iframeSrc += `?validationStrategy=${this.paymentMethodFormValidationStrategy}`;
+    }
+    return iframeSrc;
+  }
   render() {
-    return (h(Host, null, h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
   }
   static get style() { return paymentMethodFormCss; }
 }, [0, "justifi-payment-method-form", {
-    "iframeOrigin": [1, "iframe-origin"],
-    "tokenize": [64]
+    "paymentMethodFormType": [1, "payment-method-form-type"],
+    "paymentMethodFormValidationStrategy": [1, "payment-method-form-validation-strategy"],
+    "height": [32],
+    "tokenize": [64],
+    "validate": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {