npm - @justifi/webcomponents - Versions diffs - 4.0.6 → 4.2.0-rc.0 - Mend

@justifi/webcomponents 4.0.6 → 4.2.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

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

@@ -65,6 +65,9 @@ export class PaymentMethodForm {
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   composeQueryParams(values) {
     const queryParams = values.map(value => {
       if (value === values[0]) {
@@ -77,7 +80,7 @@ export class PaymentMethodForm {
     return queryParams.join('');
   }
   getIframeSrc() {
-    const iframeOrigin = process.env.IFRAME_ORIGIN;
+    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {
@@ -258,6 +261,22 @@ export class PaymentMethodForm {
           "text": "",
           "tags": []
         }
+      },
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/payment-method-form/payment-method-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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~~IAC/C~~,IAAI,SAAS,GAAG,GAAG,YAAY,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAChE,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,IAAI,CAAC,+BAA+B,EAAE;MACxC,UAAU,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,+BAA+B,EAAE,CAAC,CAAC;KAC3E;IACD,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,UAAU,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;KAClD;IAED,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC;EAC/D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,EAAE,EAAE,+BAA+B,IAAI,CAAC,qBAAqB,EAAE,EAC/D,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,EACxB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,GACX,CACL,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n @Method()\n async resize(): Promise<any> {\n this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = this.iframeOrigin \|\| process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"]}

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

@@ -39,6 +39,15 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
     }
     return this.childRef.validate();
   }
+  /**
+  *  Manually resizes the iframe to fit the contents of the iframe
+  */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
@@ -51,7 +60,8 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
     "iframeOrigin": [1025, "iframe-origin"],
     "internalStyleOverrides": [32],
     "tokenize": [64],
-    "validate": [64]
+    "validate": [64],
+    "resize": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/justifi-bank-account-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-bank-account-form.js","mappings":";;;MAQa,eAAe;;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-bank-account-form',\n shadow: false,\n})\nexport class BankAccountForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-bank-account-form#bankAccountFormReady\n /\n @Event() bankAccountFormReady: EventEmitter<any>;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-bank-account-form#bankAccountFormTokenize\n /\n @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-bank-account-form#bankAccountFormValidate\n /\n @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.bankAccountFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.bankAccountFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n */\n @Method()\n async validate() {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"bankAccount\"\n payment-method-form-ready={this.bankAccountFormReady}\n payment-method-form-tokenize={this.bankAccountFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-bank-account-form.js","mappings":";;;MAQa,eAAe;;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-bank-account-form',\n shadow: false,\n})\nexport class BankAccountForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-bank-account-form#bankAccountFormReady\n /\n @Event() bankAccountFormReady: EventEmitter<any>;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-bank-account-form#bankAccountFormTokenize\n /\n @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-bank-account-form#bankAccountFormValidate\n /\n @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.bankAccountFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.bankAccountFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n /\n @Method()\n async validate() {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n /\n Manually resizes the iframe to fit the contents of the iframe\n */\n @Method()\n async resize(): Promise<void> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.resize();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"bankAccount\"\n payment-method-form-ready={this.bankAccountFormReady}\n payment-method-form-tokenize={this.bankAccountFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}

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

@@ -40,6 +40,15 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
     }
     return this.childRef.validate();
   }
+  /**
+    *  Manually resizes the iframe to fit the contents of the iframe
+    */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
@@ -53,7 +62,8 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
     "singleLine": [4, "single-line"],
     "internalStyleOverrides": [32],
     "tokenize": [64],
-    "validate": [64]
+    "validate": [64],
+    "resize": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/justifi-card-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-card-form.js","mappings":";;;MAQa,QAAQ;;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-card-form',\n shadow: false,\n})\nexport class CardForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n /\n Boolean indicating if the Card Form should render in a single line\n /\n @Prop() singleLine: boolean = false;\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-card-form#cardFormReady\n /\n\n @Event() cardFormReady: EventEmitter;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.cardFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.cardFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n */\n @Method()\n async validate(): Promise<{ isValid: boolean }> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"card\"\n single-line={this.singleLine}\n payment-method-form-ready={this.cardFormReady}\n payment-method-form-tokenize={this.cardFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-card-form.js","mappings":";;;MAQa,QAAQ;;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-card-form',\n shadow: false,\n})\nexport class CardForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n /\n Boolean indicating if the Card Form should render in a single line\n /\n @Prop() singleLine: boolean = false;\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-card-form#cardFormReady\n /\n\n @Event() cardFormReady: EventEmitter;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.cardFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.cardFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n /\n @Method()\n async validate(): Promise<{ isValid: boolean }> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n /\n Manually resizes the iframe to fit the contents of the iframe\n */\n @Method()\n async resize(): Promise<void> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.resize();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"card\"\n single-line={this.singleLine}\n payment-method-form-ready={this.cardFormReady}\n payment-method-form-tokenize={this.cardFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}

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

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 const name = "@justifi/webcomponents";
-const version = "4.0.6";
+const version = "4.2.0-rc.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/components/index.js";
@@ -233,6 +233,9 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class PaymentMethodFo
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   composeQueryParams(values) {
     const queryParams = values.map(value => {
       if (value === values[0]) {
@@ -245,7 +248,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class PaymentMethodFo
     return queryParams.join('');
   }
   getIframeSrc() {
-    const iframeOrigin = undefined;
+    const iframeOrigin = this.iframeOrigin || undefined;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {
@@ -267,7 +270,8 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class PaymentMethodFo
     "singleLine": [4, "single-line"],
     "height": [32],
     "tokenize": [64],
-    "validate": [64]
+    "validate": [64],
+    "resize": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/payment-method-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"payment-method-form.js","mappings":"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","names":[],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n card: {\n ready: 'justifi.card.ready',\n tokenize: 'justifi.card.tokenize',\n validate: 'justifi.card.validate',\n resize: 'justifi.card.resize',\n styleOverrides: 'justifi.card.styleOverrides',\n },\n bankAccount: {\n ready: 'justifi.bankAccount.ready',\n tokenize: 'justifi.bankAccount.tokenize',\n validate: 'justifi.bankAccount.validate',\n resize: 'justifi.bankAccount.resize',\n styleOverrides: 'justifi.bankAccount.styleOverrides',\n },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n const computedStyles = getComputedStyle(document.body);\n\n const computedTheme: Theme = {\n layout: {\n padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n },\n formControl: {\n backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n },\n formLabel: {\n color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n },\n errorMessage: {\n color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n },\n };\n\n return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n display: block;\n}\n\njustifi-payment-method-form iframe {\n border: none;\n width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"payment-method-form.js","mappings":"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","names":[],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n card: {\n ready: 'justifi.card.ready',\n tokenize: 'justifi.card.tokenize',\n validate: 'justifi.card.validate',\n resize: 'justifi.card.resize',\n styleOverrides: 'justifi.card.styleOverrides',\n },\n bankAccount: {\n ready: 'justifi.bankAccount.ready',\n tokenize: 'justifi.bankAccount.tokenize',\n validate: 'justifi.bankAccount.validate',\n resize: 'justifi.bankAccount.resize',\n styleOverrides: 'justifi.bankAccount.styleOverrides',\n },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n const computedStyles = getComputedStyle(document.body);\n\n const computedTheme: Theme = {\n layout: {\n padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n },\n formControl: {\n backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n },\n formLabel: {\n color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n },\n errorMessage: {\n color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n },\n };\n\n return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n display: block;\n}\n\njustifi-payment-method-form iframe {\n border: none;\n width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n @Method()\n async resize(): Promise<any> {\n this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = this.iframeOrigin \|\| process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/justifi-bank-account-form.entry.js CHANGED Viewed

@@ -37,6 +37,15 @@ const BankAccountForm = class {
     }
     return this.childRef.validate();
   }
+  /**
+  *  Manually resizes the iframe to fit the contents of the iframe
+  */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {

package/dist/esm/justifi-bank-account-form.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-bank-account-form.entry.js","mappings":";;MAQa,eAAe;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":[],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-bank-account-form',\n shadow: false,\n})\nexport class BankAccountForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-bank-account-form#bankAccountFormReady\n /\n @Event() bankAccountFormReady: EventEmitter<any>;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-bank-account-form#bankAccountFormTokenize\n /\n @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-bank-account-form#bankAccountFormValidate\n /\n @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.bankAccountFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.bankAccountFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n */\n @Method()\n async validate() {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"bankAccount\"\n payment-method-form-ready={this.bankAccountFormReady}\n payment-method-form-tokenize={this.bankAccountFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-bank-account-form.entry.js","mappings":";;MAQa,eAAe;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":[],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-bank-account-form',\n shadow: false,\n})\nexport class BankAccountForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-bank-account-form#bankAccountFormReady\n /\n @Event() bankAccountFormReady: EventEmitter<any>;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-bank-account-form#bankAccountFormTokenize\n /\n @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-bank-account-form#bankAccountFormValidate\n /\n @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.bankAccountFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.bankAccountFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n /\n @Method()\n async validate() {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n /\n Manually resizes the iframe to fit the contents of the iframe\n */\n @Method()\n async resize(): Promise<void> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.resize();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"bankAccount\"\n payment-method-form-ready={this.bankAccountFormReady}\n payment-method-form-tokenize={this.bankAccountFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}

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

@@ -38,6 +38,15 @@ const CardForm = class {
     }
     return this.childRef.validate();
   }
+  /**
+    *  Manually resizes the iframe to fit the contents of the iframe
+    */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {

package/dist/esm/justifi-card-form.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-card-form.entry.js","mappings":";;MAQa,QAAQ;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":[],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-card-form',\n shadow: false,\n})\nexport class CardForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n /\n Boolean indicating if the Card Form should render in a single line\n /\n @Prop() singleLine: boolean = false;\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-card-form#cardFormReady\n /\n\n @Event() cardFormReady: EventEmitter;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.cardFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.cardFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n */\n @Method()\n async validate(): Promise<{ isValid: boolean }> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"card\"\n single-line={this.singleLine}\n payment-method-form-ready={this.cardFormReady}\n payment-method-form-tokenize={this.cardFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-card-form.entry.js","mappings":";;MAQa,QAAQ;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,mCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":[],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n tag: 'justifi-card-form',\n shadow: false,\n})\nexport class CardForm {\n /*\n When to trigger validation of the form.\n /\n @Prop({ mutable: true }) validationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n\n /\n URL for the rendered iFrame. End-users need not use this.\n /\n @Prop({ mutable: true }) iframeOrigin?: string;\n\n /\n Boolean indicating if the Card Form should render in a single line\n /\n @Prop() singleLine: boolean = false;\n @State() internalStyleOverrides: Theme;\n\n /\n Triggered when iframe has loaded\n * @event justifi-card-form#cardFormReady\n /\n\n @Event() cardFormReady: EventEmitter;\n\n /\n Triggered when the tokenize method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n /\n Triggered when the validate method is called on the component\n * @event justifi-card-form#cardFormTokenize\n /\n @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n @Listen('paymentMethodFormReady')\n readyHandler(event: CustomEvent) {\n this.cardFormReady.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n this.cardFormValidate.emit(event);\n }\n\n private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n /\n Makes a tokenization request to the iframe\n /\n @Method()\n async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n if (!this.childRef) {\n throw new Error('Cannot call tokenize');\n }\n return this.childRef.tokenize(...args);\n }\n\n /\n Runs a validation on the form and shows errors if any\n /\n @Method()\n async validate(): Promise<{ isValid: boolean }> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.validate();\n }\n\n /\n Manually resizes the iframe to fit the contents of the iframe\n */\n @Method()\n async resize(): Promise<void> {\n if (!this.childRef) {\n throw new Error('Cannot call validate');\n }\n return this.childRef.resize();\n }\n\n render() {\n return (\n <justifi-payment-method-form\n ref={el => {\n if (el) {\n this.childRef = el;\n }\n }}\n iframe-origin={this.iframeOrigin}\n payment-method-form-type=\"card\"\n single-line={this.singleLine}\n payment-method-form-ready={this.cardFormReady}\n payment-method-form-tokenize={this.cardFormTokenize}\n payment-method-form-validation-mode={this.validationMode \|\| 'onSubmit'}\n />\n );\n }\n}\n"],"version":3}

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

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 const name = "@justifi/webcomponents";
-const version = "4.0.6";
+const version = "4.2.0-rc.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/components/index.js";
@@ -232,6 +232,9 @@ const PaymentMethodForm = class {
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   composeQueryParams(values) {
     const queryParams = values.map(value => {
       if (value === values[0]) {
@@ -244,7 +247,7 @@ const PaymentMethodForm = class {
     return queryParams.join('');
   }
   getIframeSrc() {
-    const iframeOrigin = undefined;
+    const iframeOrigin = this.iframeOrigin || undefined;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {

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

	@@ -1 +1 @@
1	- {"file":"justifi-payment-method-form.entry.js","mappings":"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","names":[],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n card: {\n ready: 'justifi.card.ready',\n tokenize: 'justifi.card.tokenize',\n validate: 'justifi.card.validate',\n resize: 'justifi.card.resize',\n styleOverrides: 'justifi.card.styleOverrides',\n },\n bankAccount: {\n ready: 'justifi.bankAccount.ready',\n tokenize: 'justifi.bankAccount.tokenize',\n validate: 'justifi.bankAccount.validate',\n resize: 'justifi.bankAccount.resize',\n styleOverrides: 'justifi.bankAccount.styleOverrides',\n },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n const computedStyles = getComputedStyle(document.body);\n\n const computedTheme: Theme = {\n layout: {\n padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n },\n formControl: {\n backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n },\n formLabel: {\n color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n },\n errorMessage: {\n color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n },\n };\n\n return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n display: block;\n}\n\njustifi-payment-method-form iframe {\n border: none;\n width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"justifi-payment-method-form.entry.js","mappings":"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","names":[],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n card: {\n ready: 'justifi.card.ready',\n tokenize: 'justifi.card.tokenize',\n validate: 'justifi.card.validate',\n resize: 'justifi.card.resize',\n styleOverrides: 'justifi.card.styleOverrides',\n },\n bankAccount: {\n ready: 'justifi.bankAccount.ready',\n tokenize: 'justifi.bankAccount.tokenize',\n validate: 'justifi.bankAccount.validate',\n resize: 'justifi.bankAccount.resize',\n styleOverrides: 'justifi.bankAccount.styleOverrides',\n },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n const computedStyles = getComputedStyle(document.body);\n\n const computedTheme: Theme = {\n layout: {\n padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n },\n formControl: {\n backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n },\n formLabel: {\n color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n },\n errorMessage: {\n color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n },\n };\n\n return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n display: block;\n}\n\njustifi-payment-method-form iframe {\n border: none;\n width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n tag: 'justifi-payment-method-form',\n styleUrl: 'payment-method-form.css',\n shadow: false,\n})\nexport class PaymentMethodForm {\n @Prop() paymentMethodFormType: 'card' \| 'bankAccount';\n @Prop({\n mutable: true,\n })\n paymentMethodFormValidationMode: 'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all';\n @Prop() iframeOrigin?: string;\n @Prop() singleLine: boolean;\n @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n @State() height: number = 55;\n\n private computedTheme: Theme = getComputedTheme();\n\n iframeElement!: HTMLIFrameElement;\n\n connectedCallback() {\n window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n }\n\n componentShouldUpdate() {\n this.sendStyleOverrides();\n }\n\n sendStyleOverrides() {\n if (this.computedTheme) {\n this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n }\n }\n\n private dispatchMessageEvent(messageEvent: MessageEvent) {\n const messagePayload = messageEvent.data;\n const messageType = messagePayload.eventType;\n const messageData = messagePayload.data;\n\n if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n this.paymentMethodFormReady.emit(messageData);\n }\n\n if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n this.height = messageData.height;\n }\n }\n\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n @Method()\n async resize(): Promise<any> {\n this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n }\n\n private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = this.iframeOrigin \|\| process.env.IFRAME_ORIGIN;\n let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n let paramsList = [];\n if (this.paymentMethodFormValidationMode) {\n paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n }\n if (this.singleLine) {\n paramsList.push(`singleLine=${this.singleLine}`);\n }\n\n return iframeSrc.concat(this.composeQueryParams(paramsList));\n }\n\n render() {\n return (\n <Host>\n <iframe\n id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n src={this.getIframeSrc()}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n height={this.height}\n ></iframe>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/loader.js CHANGED Viewed

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"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",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64],"resize":[64]}]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
   });
 };

package/dist/esm/webcomponents.js CHANGED Viewed

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"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",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64],"resize":[64]}]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map

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

@@ -48,5 +48,9 @@ export declare class BankAccountForm {
    *  Runs a validation on the form and shows errors if any
    */
   validate(): Promise<any>;
+  /**
+  *  Manually resizes the iframe to fit the contents of the iframe
+  */
+  resize(): Promise<void>;
   render(): any;
 }

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

@@ -54,5 +54,9 @@ export declare class CardForm {
   validate(): Promise<{
     isValid: boolean;
   }>;
+  /**
+    *  Manually resizes the iframe to fit the contents of the iframe
+    */
+  resize(): Promise<void>;
   render(): any;
 }

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

@@ -21,6 +21,7 @@ export declare class PaymentMethodForm {
   private postMessageWithResponseListener;
   tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse>;
   validate(): Promise<any>;
+  resize(): Promise<any>;
   private composeQueryParams;
   private getIframeSrc;
   render(): any;

package/dist/types/components.d.ts CHANGED Viewed

@@ -21,6 +21,10 @@ export namespace Components {
           * URL for the rendered iFrame. End-users need not use this.
          */
         "iframeOrigin"?: string;
+        /**
+          * Manually resizes the iframe to fit the contents of the iframe
+         */
+        "resize": () => Promise<void>;
         /**
           * Makes a tokenization request to the iframe
          */
@@ -77,6 +81,10 @@ export namespace Components {
           * URL for the rendered iFrame. End-users need not use this.
          */
         "iframeOrigin"?: string;
+        /**
+          * Manually resizes the iframe to fit the contents of the iframe
+         */
+        "resize": () => Promise<void>;
         /**
           * Boolean indicating if the Card Form should render in a single line
          */
@@ -109,6 +117,7 @@ export namespace Components {
         "iframeOrigin"?: string;
         "paymentMethodFormType": 'card' | 'bankAccount';
         "paymentMethodFormValidationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "resize": () => Promise<any>;
         "singleLine": boolean;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>;
         "validate": () => Promise<any>;

package/dist/webcomponents/{p-16b4e90a.entry.js → p-0969db8f.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e}from"./p-3aa91155.js";const r=class{constructor(e){t(this,e);this.cardFormReady=i(this,"cardFormReady",7);this.cardFormTokenize=i(this,"cardFormTokenize",7);this.cardFormValidate=i(this,"cardFormValidate",7);this.validationMode=undefined;this.iframeOrigin=undefined;this.singleLine=false;this.internalStyleOverrides=undefined}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(t)}async tokenize(...t){if(!this.childRef){throw new Error("Cannot call tokenize")}return this.childRef.tokenize(...t)}async validate(){if(!this.childRef){throw new Error("Cannot call validate")}return this.childRef.validate()}render(){return e("justifi-payment-method-form",{ref:t=>{if(t){this.childRef=t}},"iframe-origin":this.iframeOrigin,"payment-method-form-type":"card","single-line":this.singleLine,"payment-method-form-ready":this.cardFormReady,"payment-method-form-tokenize":this.cardFormTokenize,"payment-method-form-validation-mode":this.validationMode||"onSubmit"})}};export{r as justifi_card_form};
-//# sourceMappingURL=p-16b4e90a.entry.js.map
+import{r as t,c as i,h as e}from"./p-3aa91155.js";const r=class{constructor(e){t(this,e);this.cardFormReady=i(this,"cardFormReady",7);this.cardFormTokenize=i(this,"cardFormTokenize",7);this.cardFormValidate=i(this,"cardFormValidate",7);this.validationMode=undefined;this.iframeOrigin=undefined;this.singleLine=false;this.internalStyleOverrides=undefined}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(t)}async tokenize(...t){if(!this.childRef){throw new Error("Cannot call tokenize")}return this.childRef.tokenize(...t)}async validate(){if(!this.childRef){throw new Error("Cannot call validate")}return this.childRef.validate()}async resize(){if(!this.childRef){throw new Error("Cannot call validate")}return this.childRef.resize()}render(){return e("justifi-payment-method-form",{ref:t=>{if(t){this.childRef=t}},"iframe-origin":this.iframeOrigin,"payment-method-form-type":"card","single-line":this.singleLine,"payment-method-form-ready":this.cardFormReady,"payment-method-form-tokenize":this.cardFormTokenize,"payment-method-form-validation-mode":this.validationMode||"onSubmit"})}};export{r as justifi_card_form};
+//# sourceMappingURL=p-0969db8f.entry.js.map