@justifi/webcomponents 0.0.11 → 0.0.12

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

@@ -63,6 +63,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)
@@ -71,7 +83,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) => {
@@ -219,6 +230,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
@@ -238,6 +250,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) {
@@ -1158,6 +1175,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1237,6 +1255,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
@@ -1281,6 +1304,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);
@@ -1397,3 +1427,4 @@ exports.createEvent = createEvent;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
+exports.setNonce = setNonce;

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

@@ -2,100 +2,106 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68222998.js');
+const index = require('./index-4f753ffd.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;
+    this.bankAccountFormValidate = index.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 (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 }));
+      }, "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' }));
   }
 };
 
-const cardFormCss = "justifi-card-form iframe{height:55px}";
-
 const CardForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cardFormReady = index.createEvent(this, "cardFormReady", 7);
-    this.cardFormChange = index.createEvent(this, "cardFormChange", 7);
-    this.cardFormBlur = index.createEvent(this, "cardFormBlur", 7);
     this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
-    this.iframeOrigin = undefined;
+    this.cardFormValidate = index.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 (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 }));
+      }, "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' }));
+  }
+};
+
+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',
   }
 };
-CardForm.style = cardFormCss;
 
 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;
+    this.paymentMethodFormType = undefined;
+    this.paymentMethodFormValidationStrategy = undefined;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -107,43 +113,45 @@ const PaymentMethodForm = class {
     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
-      }, '*');
-    }
-  }
-  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 (index.h(index.Host, null, index.h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+    return (index.h(index.Host, null, index.h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el })));
   }
 };
 PaymentMethodForm.style = paymentMethodFormCss;

package/dist/cjs/loader.cjs.js

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

package/dist/cjs/webcomponents.cjs.js

@@ -1,9 +1,11 @@
 'use strict';
 
-const index = require('./index-68222998.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4f753ffd.js');
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.1 | 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 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormChange","changeHandler"],[0,"paymentMethodFormBlur","blurHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"tokenize":[64],"validate":[64]}]]]], options);
 });
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,8 +7,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.22.1",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

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

@@ -1,42 +1,45 @@
 import { h } from '@stencil/core';
 export class BankAccountForm {
   constructor() {
-    this.iframeOrigin = undefined;
+    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' }));
   }
   static get is() { return "justifi-bank-account-form"; }
   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,
@@ -45,7 +48,7 @@ export class BankAccountForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "iframe-origin",
+        "attribute": "validation-strategy",
         "reflect": false
       }
     };
@@ -67,8 +70,8 @@ export class BankAccountForm {
           "references": {}
         }
       }, {
-        "method": "bankAccountFormChange",
-        "name": "bankAccountFormChange",
+        "method": "bankAccountFormTokenize",
+        "name": "bankAccountFormTokenize",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -77,13 +80,13 @@ export class BankAccountForm {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{ data: any }",
+          "resolved": "{ data: any; }",
           "references": {}
         }
       }, {
-        "method": "bankAccountFormBlur",
-        "name": "bankAccountFormBlur",
+        "method": "bankAccountFormValidate",
+        "name": "bankAccountFormValidate",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -92,23 +95,8 @@ export class BankAccountForm {
           "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; }",
+          "original": "{ data: { isValid: boolean } }",
+          "resolved": "{ data: { isValid: boolean; }; }",
           "references": {}
         }
       }];
@@ -139,6 +127,22 @@ export class BankAccountForm {
           "text": "",
           "tags": []
         }
+      },
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
@@ -150,20 +154,14 @@ export class BankAccountForm {
         "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