@justifi/webcomponents 0.0.8 → 0.0.10

package/dist/cjs/{index-ee888432.js → index-68222998.js}

@@ -717,6 +717,15 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
     let promise;
+    if (isInitialLoad) {
+        {
+            hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
+            if (hostRef.$queuedListeners$) {
+                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$ = null;
+            }
+        }
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1123,6 +1132,10 @@ const connectedCallback = (elm) => {
             }
         }
         else {
+            // not the first time this has connected
+            // reattach any event listeners to the host
+            // since they would have been removed when disconnected
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
             // fire off connectedCallback() on component instance
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
@@ -1133,6 +1146,12 @@ const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
         const instance = hostRef.$lazyInstance$ ;
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$.map((rmListener) => rmListener());
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
         {
             safeCall(instance, 'disconnectedCallback');
         }
@@ -1162,6 +1181,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }
@@ -1230,6 +1252,35 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = elm;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1248,6 +1299,7 @@ const registerHost = (elm, cmpMeta) => {
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;

package/dist/cjs/index.cjs.js

@@ -1,2 +1,12 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const paymentsList = require('./payments-list-d2dfcef1.js');
+require('./index-68222998.js');
+
+
+
+exports.BankAccountForm = paymentsList.BankAccountForm;
+exports.CardForm = paymentsList.CardForm;
+exports.PaymentsList = paymentsList.PaymentsList;

package/dist/cjs/justifi-bank-account-form_4.cjs.entry.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const paymentsList = require('./payments-list-d2dfcef1.js');
+const index = require('./index-68222998.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.paymentMethodFormReady = index.createEvent(this, "paymentMethodFormReady", 7);
+    this.paymentMethodFormChange = index.createEvent(this, "paymentMethodFormChange", 7);
+    this.paymentMethodFormBlur = index.createEvent(this, "paymentMethodFormBlur", 7);
+    this.paymentMethodFormTokenize = index.createEvent(this, "paymentMethodFormTokenize", 7);
+    this.iframeOrigin = undefined;
+  }
+  connectedCallback() {
+    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  dispatchMessageEvent(messageEvent) {
+    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;
+    }
+  }
+  triggerTokenization(clientKey, paymentMethodMetadata, account) {
+    if (this.iframeElement && this.iframeElement.contentWindow) {
+      this.iframeElement.contentWindow.postMessage({
+        eventType: DispatchedEventTypes.tokenize,
+        clientKey: clientKey,
+        paymentMethodMetadata: paymentMethodMetadata,
+        account: account
+      }, '*');
+    }
+  }
+  async tokenize(clientKey, paymentMethodMetadata, account) {
+    return new Promise((resolve) => {
+      const tokenizeEventListener = (event) => {
+        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+          return;
+        window.removeEventListener('message', tokenizeEventListener);
+        resolve(event.data.data);
+      };
+      window.addEventListener('message', tokenizeEventListener);
+      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
+    });
+  }
+  ;
+  render() {
+    return (index.h(index.Host, null, index.h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+  }
+};
+PaymentMethodForm.style = paymentMethodFormCss;
+
+exports.justifi_bank_account_form = paymentsList.BankAccountForm;
+exports.justifi_card_form = paymentsList.CardForm;
+exports.justifi_payments_list = paymentsList.PaymentsList;
+exports.justifi_payment_method_form = PaymentMethodForm;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ee888432.js');
+const index = require('./index-68222998.js');
 
 /*
- Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-card-form_2.cjs",[[0,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]]], options);
+  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormChange","changeHandler"],[0,"paymentMethodFormBlur","blurHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"]]],[0,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}]]]], options);
   });
 };
 

package/dist/cjs/{justifi-card-form_2.cjs.entry.js → payments-list-d2dfcef1.js}

@@ -1,18 +1,45 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-68222998.js');
 
-const index = require('./index-ee888432.js');
+const BankAccountForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bankAccountFormReady = index.createEvent(this, "bankAccountFormReady", 7);
+    this.bankAccountFormChange = index.createEvent(this, "bankAccountFormChange", 7);
+    this.bankAccountFormBlur = index.createEvent(this, "bankAccountFormBlur", 7);
+    this.bankAccountFormTokenize = index.createEvent(this, "bankAccountFormTokenize", 7);
+    this.iframeOrigin = 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);
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  render() {
+    return (index.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 }));
+  }
+};
 
-const cardFormCss = ":host{display:block}iframe{border:none;height:55px;width:100%}";
+const cardFormCss = "justifi-card-form iframe{height:55px}";
 
-var DispatchedEventTypes;
-(function (DispatchedEventTypes) {
-  DispatchedEventTypes["blur"] = "blur";
-  DispatchedEventTypes["change"] = "change";
-  DispatchedEventTypes["ready"] = "ready";
-  DispatchedEventTypes["tokenize"] = "tokenize";
-})(DispatchedEventTypes || (DispatchedEventTypes = {}));
 const CardForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -22,53 +49,18 @@ const CardForm = class {
     this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
     this.iframeOrigin = undefined;
   }
-  connectedCallback() {
-    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  dispatchMessageEvent(messageEvent) {
-    const messagePayload = messageEvent.data;
-    const messageType = messagePayload.eventType;
-    const messageData = messagePayload.data;
-    switch (messageType) {
-      case DispatchedEventTypes.ready:
-        this.cardFormReady.emit(messageData);
-        break;
-      case DispatchedEventTypes.change:
-        this.cardFormChange.emit(messageData);
-        break;
-      case DispatchedEventTypes.blur:
-        this.cardFormBlur.emit(messageData);
-        break;
-    }
-  }
-  triggerTokenization(clientKey, paymentMethodMetadata, account) {
-    if (this.iframeElement && this.iframeElement.contentWindow) {
-      this.iframeElement.contentWindow.postMessage({
-        eventType: DispatchedEventTypes.tokenize,
-        clientKey: clientKey,
-        paymentMethodMetadata: paymentMethodMetadata,
-        account: account
-      }, '*');
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
     }
+    return this.childRef.tokenize(...args);
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
-    return new Promise((resolve) => {
-      const tokenizeEventListener = (event) => {
-        if (event.data.eventType !== DispatchedEventTypes.tokenize)
-          return;
-        window.removeEventListener('message', tokenizeEventListener);
-        resolve(event.data.data);
-      };
-      window.addEventListener('message', tokenizeEventListener);
-      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
-    });
-  }
-  ;
   render() {
-    return (index.h(index.Host, null, index.h("iframe", { id: "justifi-card-form", src: this.iframeOrigin || 'https://js.justifi.ai', ref: (el) => this.iframeElement = el })));
+    return (index.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 }));
   }
 };
 CardForm.style = cardFormCss;
@@ -4301,5 +4293,6 @@ const PaymentsList = class {
 };
 PaymentsList.style = paymentsListCss;
 
-exports.justifi_card_form = CardForm;
-exports.justifi_payments_list = PaymentsList;
+exports.BankAccountForm = BankAccountForm;
+exports.CardForm = CardForm;
+exports.PaymentsList = PaymentsList;

package/dist/cjs/webcomponents.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-ee888432.js');
+const index = require('./index-68222998.js');
 
 /*
- Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('webcomponents.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-card-form_2.cjs",[[0,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]]], options);
+  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormChange","changeHandler"],[0,"paymentMethodFormBlur","blurHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"]]],[0,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,12 +1,14 @@
 {
   "entries": [
+    "./components/bank-account-form/bank-account-form.js",
     "./components/card-form/card-form.js",
-    "./components/payments-list/payments-list.js"
+    "./components/payments-list/payments-list.js",
+    "./components/payment-method-form/payment-method-form.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.3",
-    "typescriptVersion": "4.7.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

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

@@ -0,0 +1,172 @@
+import { h } from '@stencil/core';
+export class BankAccountForm {
+  constructor() {
+    this.iframeOrigin = 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);
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  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 }));
+  }
+  static get is() { return "justifi-bank-account-form"; }
+  static get properties() {
+    return {
+      "iframeOrigin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iframe-origin",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bankAccountFormReady",
+        "name": "bankAccountFormReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bankAccountFormChange",
+        "name": "bankAccountFormChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bankAccountFormBlur",
+        "name": "bankAccountFormBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bankAccountFormTokenize",
+        "name": "bankAccountFormTokenize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ data: any }",
+          "resolved": "{ data: any; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "tokenize": {
+        "complexType": {
+          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Parameters": {
+              "location": "global"
+            },
+            "HTMLJustifiPaymentMethodFormElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "paymentMethodFormReady",
+        "method": "readyHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "paymentMethodFormChange",
+        "method": "changeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "paymentMethodFormBlur",
+        "method": "blurHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "paymentMethodFormTokenize",
+        "method": "tokenizeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -1,9 +1,3 @@
-:host {
-  display: block;
-}
-
-iframe {
-  border: none;
+justifi-card-form iframe {
   height: 55px;
-  width: 100%;
 }

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

@@ -1,64 +1,20 @@
-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 { h } from '@stencil/core';
 export class CardForm {
   constructor() {
     this.iframeOrigin = undefined;
   }
-  connectedCallback() {
-    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  dispatchMessageEvent(messageEvent) {
-    const messagePayload = messageEvent.data;
-    const messageType = messagePayload.eventType;
-    const messageData = messagePayload.data;
-    switch (messageType) {
-      case DispatchedEventTypes.ready:
-        this.cardFormReady.emit(messageData);
-        break;
-      case DispatchedEventTypes.change:
-        this.cardFormChange.emit(messageData);
-        break;
-      case DispatchedEventTypes.blur:
-        this.cardFormBlur.emit(messageData);
-        break;
-      default:
-        break;
-    }
-  }
-  triggerTokenization(clientKey, paymentMethodMetadata, account) {
-    if (this.iframeElement && this.iframeElement.contentWindow) {
-      this.iframeElement.contentWindow.postMessage({
-        eventType: DispatchedEventTypes.tokenize,
-        clientKey: clientKey,
-        paymentMethodMetadata: paymentMethodMetadata,
-        account: account
-      }, '*');
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
     }
+    return this.childRef.tokenize(...args);
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
-    return new Promise((resolve) => {
-      const tokenizeEventListener = (event) => {
-        if (event.data.eventType !== DispatchedEventTypes.tokenize)
-          return;
-        window.removeEventListener('message', tokenizeEventListener);
-        resolve(event.data.data);
-      };
-      window.addEventListener('message', tokenizeEventListener);
-      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
-    });
-  }
-  ;
   render() {
-    return (h(Host, null, h("iframe", { id: "justifi-card-form", src: this.iframeOrigin || 'https://js.justifi.ai', ref: (el) => this.iframeElement = el })));
+    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 }));
   }
   static get is() { return "justifi-card-form"; }
   static get originalStyleUrls() {
@@ -159,26 +115,23 @@ export class CardForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<unknown>",
+          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
           "parameters": [{
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {
               "location": "global"
             },
-            "MessageEvent": {
+            "Parameters": {
+              "location": "global"
+            },
+            "HTMLJustifiPaymentMethodFormElement": {
               "location": "global"
             }
           },
-          "return": "Promise<unknown>"
+          "return": "Promise<any>"
         },
         "docs": {
           "text": "",

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

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+justifi-payment-method-form iframe {
+  border: none;
+  width: 100%;
+}