@justifi/webcomponents 4.4.0 → 4.5.1

package/dist/collection/components/payment-details/payment-details.js

@@ -0,0 +1,129 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { DetailItem, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { DetailSection } from "../details/utils";
+/**
+  * @exportedPart detail-loading-spinner
+  * @exportedPart detail-loading-state
+  * @exportedPart detail-empty-state
+  * @exportedPart detail-head
+  * @exportedPart detail-title
+  * @exportedPart detail-method
+  * @exportedPart detail-info
+  * @exportedPart detail-info-item
+  * @exportedPart detail-info-item-title
+  * @exportedPart detail-info-item-data
+  * @exportedPart detail-metadata
+  * @exportedPart detail-metadata-title
+  * @exportedPart detail-method-title
+  * @exportedPart detail-method-data
+*/
+export class PaymentDetails {
+  constructor() {
+    this.paymentId = undefined;
+    this.authToken = undefined;
+    this.payment = undefined;
+    this.loading = true;
+    this.errorMessage = undefined;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.errorMessage = '';
+    if (!this.paymentId || !this.authToken) {
+      this.errorMessage = "Can not fetch any data without a PaymentID and an AuthToken";
+      this.loading = false;
+      return;
+    }
+    this.loading = true;
+    const endpoint = `payments/${this.paymentId}`;
+    const response = await Api(this.authToken).get(endpoint);
+    if (!response.error) {
+      this.payment = response.data;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+    this.loading = false;
+  }
+  render() {
+    var _a;
+    return (h(Host, null, this.loading ? LoadingState :
+      !this.payment ? ErrorState(this.errorMessage) :
+        h("justifi-details", { "error-message": this.errorMessage, entity: {
+            metadata: this.payment.metadata
+          } }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: this.payment.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.card.name }))))));
+  }
+  static get is() { return "justifi-payment-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["payment-details.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["payment-details.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paymentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "payment-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "payment": {},
+      "loading": {},
+      "errorMessage": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "paymentId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=payment-details.js.map

package/dist/collection/components/payment-details/payment-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-details.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { DetailItem, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { DetailSection } from '../details/utils';\n\n/**\n  * @exportedPart detail-loading-spinner\n  * @exportedPart detail-loading-state\n  * @exportedPart detail-empty-state\n  * @exportedPart detail-head\n  * @exportedPart detail-title\n  * @exportedPart detail-method\n  * @exportedPart detail-info\n  * @exportedPart detail-info-item\n  * @exportedPart detail-info-item-title\n  * @exportedPart detail-info-item-data\n  * @exportedPart detail-metadata\n  * @exportedPart detail-metadata-title\n  * @exportedPart detail-method-title\n  * @exportedPart detail-method-data\n*/\n@Component({\n  tag: 'justifi-payment-details',\n  styleUrl: 'payment-details.scss',\n  shadow: true,\n})\n\nexport class PaymentDetails {\n  @Prop() paymentId: string;\n  @Prop() authToken: string;\n  @State() payment: Payment;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('paymentId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchData(): Promise<void> {\n    this.errorMessage = '';\n    if (!this.paymentId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without a PaymentID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `payments/${this.paymentId}`;\n\n    const response: IApiResponseCollection<Payment> = await Api(this.authToken).get(endpoint);\n    if (!response.error) {\n      this.payment = response.data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {\n          this.loading ? LoadingState :\n          !this.payment ? ErrorState(this.errorMessage) :\n          <justifi-details\n            error-message={this.errorMessage}\n            entity={{\n              metadata: this.payment.metadata\n            }}\n          >\n            <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPaymentStatusToBadge(this.payment?.status)} />} title={`${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}`}>\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Updated At\"\n                value={`${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}`}\n              />\n              <EntityHeadInfoItem\n                classes=\"border-1 border-end\"\n                title=\"Created At\"\n                value={`${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}`}\n              />\n              <EntityHeadInfoItem title=\"ID\" value={this.payment.id} />\n            </EntityHeadInfo>\n            <div slot='detail-sections'>\n              <DetailSection sectionTitle=\"Details\">\n                <DetailItem title=\"Amount\" value={formatCurrency(this.payment.amount)} />\n                <DetailItem title=\"Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                <DetailItem title=\"Refunded\" value={formatCurrency(this.payment.amount_refunded)} />\n                <DetailItem title=\"Net\" value={formatCurrency(this.payment.balance)} />\n                <DetailItem title=\"Status\" value={MapPaymentStatusToBadge(this.payment.status)} />\n                <DetailItem title=\"Payment ID\" value={this.payment.id} />\n                <DetailItem title=\"Processing Fees\" value={formatCurrency(this.payment.fee_amount)} />\n                <DetailItem title=\"Statement Descriptor\" value={this.payment.statement_descriptor} />\n                <DetailItem title=\"Description\" value={this.payment.description} />\n              </DetailSection>\n              <DetailSection sectionTitle=\"Payment Method\">\n                <DetailItem title=\"ID\" value={this.payment.payment_method.card.id} />\n                <DetailItem title=\"Payment Type\" value=\"Card\" />\n                <DetailItem title=\"Last 4 Numbers\" value={this.payment.payment_method.card.acct_last_four} />\n                <DetailItem title=\"Brand\" value={this.payment.payment_method.card.brand} />\n                <DetailItem title=\"Cardholder\" value={this.payment.payment_method.card.name} />\n              </DetailSection>\n            </div>\n          </justifi-details>\n          }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/payment-details/payment-details.stories.js

@@ -0,0 +1,47 @@
+export default {
+  title: 'dev/Components/PaymentDetails',
+  component: 'justifi-payment-details',
+  parameters: {},
+};
+class PaymentDetailsArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['payment-id'] = args['payment-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-payment-details
+      data-testid="justifi-payment-details"
+      auth-token="${args['auth-token']}"
+      payment-id="${args['payment-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new PaymentDetailsArgs({});
+export const Styled = Template.bind({});
+Styled.args = new PaymentDetailsArgs({});
+Styled.decorators = [
+  (Story) => `
+    ${Story()}
+    <style>
+      justifi-payment-details::part(detail-head) {
+        background-color: rgba(100, 200, 250, 0.2);
+        border-left: 4px solid rgba(100, 200, 250, 1);
+      }
+      justifi-payment-details::part(detail-info-item-title),
+      justifi-payment-details::part(detail-method-item-title) {
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.8);
+        text-align: center;
+        padding: 0 10px;
+        color: white !important;
+      }
+      justifi-payment-details::part(detail-metadata) {
+        background-color: rgba(100,100,100,0.2)
+      }
+    </style>
+  `
+];
+//# sourceMappingURL=payment-details.stories.js.map

package/dist/collection/components/payment-details/payment-details.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-details.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,+BAA+B;EACtC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,kBAAkB;EAItB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAwB,EAAE,EAAE;EAC5C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,kBAAkB,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,kBAAkB,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;GAkBV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/PaymentDetails',\n  component: 'justifi-payment-details',\n  parameters: {},\n};\n\nclass PaymentDetailsArgs {\n  'auth-token': string;\n  'payment-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['payment-id'] = args['payment-id'] || '';\n  }\n}\n\nconst Template = (args: PaymentDetailsArgs) => {\n  return (`\n    <justifi-payment-details\n      data-testid=\"justifi-payment-details\"\n      auth-token=\"${args['auth-token']}\"\n      payment-id=\"${args['payment-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentDetailsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentDetailsArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-payment-details::part(detail-head) {\n        background-color: rgba(100, 200, 250, 0.2);\n        border-left: 4px solid rgba(100, 200, 250, 1);\n      }\n      justifi-payment-details::part(detail-info-item-title),\n      justifi-payment-details::part(detail-method-item-title) {\n        border-radius: 3px;\n        background-color: rgba(0, 0, 0, 0.8);\n        text-align: center;\n        padding: 0 10px;\n        color: white !important;\n      }\n      justifi-payment-details::part(detail-metadata) {\n        background-color: rgba(100,100,100,0.2)\n      }\n    </style>\n  `\n]\n"]}

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

@@ -6,3 +6,8 @@ justifi-payment-method-form iframe {
   border: none;
   width: 100%;
 }
+
+iframe {
+  width: 1px;
+  min-width: 100%;
+}

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import iFrameResize from "iframe-resizer/js/iframeResizer";
 import { MessageEventType } from "./message-event-types";
 import packageJson from "../../../package.json";
 import getComputedTheme from "./get-computed-theme";
@@ -9,7 +10,6 @@ export class PaymentMethodForm {
     this.paymentMethodFormValidationMode = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.height = 55;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -17,10 +17,6 @@ export class PaymentMethodForm {
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
-  componentShouldUpdate() {
-    this.sendStyleOverrides();
-    this.resize();
-  }
   sendStyleOverrides() {
     if (this.computedTheme) {
       this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
@@ -33,14 +29,14 @@ export class PaymentMethodForm {
     if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
       this.paymentMethodFormReady.emit(messageData);
     }
-    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {
-      this.height = messageData.height;
-    }
   }
   postMessage(eventType, payload) {
     var _a, _b;
     (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise(resolve => {
       const responseListener = (event) => {
@@ -66,9 +62,6 @@ 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]) {
@@ -93,9 +86,11 @@ export class PaymentMethodForm {
     return iframeSrc.concat(this.composeQueryParams(paramsList));
   }
   render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => (this.iframeElement = el), height: this.height, onLoad: () => {
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        this.iframeElement = el;
+      }, onLoad: () => {
+        iFrameResize({ log: true }, this.iframeElement);
         this.sendStyleOverrides();
-        this.resize();
       } })));
   }
   static get is() { return "justifi-payment-method-form"; }
@@ -181,11 +176,6 @@ export class PaymentMethodForm {
       }
     };
   }
-  static get states() {
-    return {
-      "height": {}
-    };
-  }
   static get events() {
     return [{
         "method": "paymentMethodFormReady",
@@ -221,6 +211,23 @@ export class PaymentMethodForm {
   }
   static get methods() {
     return {
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "tokenize": {
         "complexType": {
           "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
@@ -268,23 +275,6 @@ export class PaymentMethodForm {
           "text": "",
           "tags": []
         }
-      },
-      "resize": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
       }
     };
   }

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

@@ -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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","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    this.resize();\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 }, this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');\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 || 'https://js.justifi.ai/v2';\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          onLoad={() => {\n            this.sendStyleOverrides();\n            this.resize();\n          }}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"]}
+{"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 } from '@stencil/core';\nimport iFrameResize from 'iframe-resizer/js/iframeResizer';\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\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  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\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\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 = this.iframeOrigin || process.env.IFRAME_ORIGIN || 'https://js.justifi.ai/v2';\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 => {\n            this.iframeElement = el as HTMLIFrameElement;\n          }}\n          onLoad={() => {\n            iFrameResize({ log: true }, this.iframeElement);\n            this.sendStyleOverrides();\n          }}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -9,7 +9,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -20,7 +20,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -31,7 +31,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
+      <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -42,7 +42,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
+        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -53,7 +53,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
+        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -64,7 +64,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -75,7 +75,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
+        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
       </justifi-payment-method-form>
     `);
   });

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n  it('renders an iframe', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe when paymentMethodFormType is card', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;EAC3C,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,MAAM,GAA+B;KACzG,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;GAI/B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;IACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,MAAM,GAA+B;KACzG,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;GAI/B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;IACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,aAAa,GAA+B;KAChH,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;GAI/B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yHAAyH,EAAE,KAAK,IAAI,EAAE;IACvI,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,aAAa,EAAC,+BAA+B,EAAC,UAAU,GAA+B;KAC3J,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yHAAyH,EAAE,KAAK,IAAI,EAAE;IACvI,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,aAAa,EAAC,+BAA+B,EAAC,QAAQ,GAA+B;KACzJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oGAAoG,EAAE,KAAK,IAAI,EAAE;IAClH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,MAAM,EAAC,YAAY,EAAC,0BAA0B,GAA+B;KACjJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gGAAgG,EAAE,KAAK,IAAI,EAAE;IAC9G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,mCAA6B,qBAAqB,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,GAAgC;KAC3H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n  it('renders an iframe', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe when paymentMethodFormType is card', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n});\n"]}