@justifi/webcomponents 0.0.10 → 0.0.12

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;
@@ -62,4 +65,4 @@ function defineCustomElement$1() {
 const JustifiBankAccountForm = BankAccountForm;
 const defineCustomElement = defineCustomElement$1;
 
-export { BankAccountForm as B, JustifiBankAccountForm, defineCustomElement };
+export { JustifiBankAccountForm, defineCustomElement };

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

@@ -1,17 +1,23 @@
 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);
+  }
+  tokenizeHandler(event) {
+    this.cardFormTokenize.emit(event);
+  }
+  validateHandler(event) {
+    this.cardFormValidate.emit(event);
   }
   async tokenize(...args) {
     if (!this.childRef) {
@@ -19,18 +25,24 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     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]
-  }]);
+    "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;
@@ -53,4 +65,4 @@ function defineCustomElement$1() {
 const JustifiCardForm = CardForm;
 const defineCustomElement = defineCustomElement$1;
 
-export { CardForm as C, JustifiCardForm, defineCustomElement };
+export { JustifiCardForm, defineCustomElement };

package/dist/components/justifi-payments-list.js

@@ -4250,4 +4250,4 @@ function defineCustomElement$1() {
 const JustifiPaymentsList = PaymentsList;
 const defineCustomElement = defineCustomElement$1;
 
-export { JustifiPaymentsList, PaymentsList as P, defineCustomElement };
+export { JustifiPaymentsList, defineCustomElement };

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

@@ -1,23 +1,28 @@
 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',
+  },
+  bankAccount: {
+    ready: 'justifi.bank_account.ready',
+    tokenize: 'justifi.bank_account.tokenize',
+    validate: 'justifi.bank_account.validate',
+  }
+};
+
 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;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -29,48 +34,52 @@ 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;
-    }
-  }
-  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].ready) {
+      this.paymentMethodFormReady.emit(messageData);
     }
   }
-  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 })));
   }
   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"],
+    "tokenize": [64],
+    "validate": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/esm/{index-e279d85e.js → index-3d88d85c.js}

@@ -41,6 +41,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -49,7 +61,6 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
@@ -197,6 +208,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -216,6 +228,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -1136,6 +1153,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1215,6 +1233,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -1259,6 +1282,13 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
 };
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1369,4 +1399,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r };
+export { Host as H, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1,2 +1 @@
-export { B as BankAccountForm, C as CardForm, P as PaymentsList } from './payments-list-91eba70b.js';
-import './index-e279d85e.js';
+