@justifi/webcomponents 5.3.0 → 5.3.2

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

@@ -1,5 +1,8 @@
 import { h, Host } from "@stencil/core";
 export class CardForm {
+    constructor() {
+        this.iframeOrigin = undefined;
+    }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
         const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
@@ -11,9 +14,30 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '279551d81ed11cde65d51e28d9dc9be9d5f0d422', class: "container-fluid p-0" }, h("div", { key: '2ab4164df7fd258243a89b02fe4a634069f31670', class: "mb-3" }, h("iframe-input", { key: '0baf4772d66bc228ef0259487c5b7be67321ebf1', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${IFRAME_ORIGIN}/cardNumber` })), h("div", { key: 'ba458f877d837bd8c3302f9888e3ddfba58c2024', class: "row" }, h("div", { key: '960975abed4e4db2ed5428e81bd0771b7f18aca7', class: "col-4 align-content-end" }, h("iframe-input", { key: 'b609e584b00cced44db0cb44cb8436f3daa18a2e', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${IFRAME_ORIGIN}/expirationMonth` })), h("div", { key: '42725f5223920f9185a384f88ba17ca1e3215b30', class: "col-4 align-content-end" }, h("iframe-input", { key: '9c2c8410b3344dc44b4538881965f6b9e1a0b6c9', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${IFRAME_ORIGIN}/expirationYear` })), h("div", { key: 'f4c3a801b0f3088b0cee30914d6088d0b140b637', class: "col-4 align-content-end" }, h("iframe-input", { key: '7bb5ebec54d900539f2bfdb85537c6d3185d3419', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${IFRAME_ORIGIN}/CVV` })))));
+        return (h(Host, { key: '5dfd2c79d7691744614af89d0919e58db17434b3', class: "container-fluid p-0" }, h("div", { key: '307e9a7acd80285a59369e813bb0172627395cf6', class: "mb-3" }, h("iframe-input", { key: '42de95d9e8f6b785e0dfd7a9b79b23e8c1aab4ee', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '9ab568a45c652478daa2fdd936cb49258b8bdd18', class: "row" }, h("div", { key: 'ee106aa794d4fb0bbcab36f6daada68740bb4262', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c2edb5592c479763a47d399d4d0428d5468f6be5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'e9577f47e9d3fea9be62fbbde95dc890091c47e0', class: "col-4 align-content-end" }, h("iframe-input", { key: '2f623e190959ed454c3016637f90f38c531d9062', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '4522288e5e0f1b41dc89a690830bb78063ea4df0', class: "col-4 align-content-end" }, h("iframe-input", { key: '9036d997bcd4f8c73e63daa3997111803bc99a36', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` })))));
     }
     static get is() { return "card-form"; }
+    static get properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false
+            }
+        };
+    }
     static get methods() {
         return {
             "validate": {

package/dist/collection/components/checkout/checkout-core.js

@@ -31,6 +31,7 @@ export class CheckoutCore {
         this.getCheckout = undefined;
         this.complete = undefined;
         this.checkoutId = undefined;
+        this.iframeOrigin = undefined;
         this.disableCreditCard = undefined;
         this.disableBankAccount = undefined;
         this.disableBnpl = undefined;
@@ -116,14 +117,14 @@ export class CheckoutCore {
     }
     get paymentType() {
         var _a, _b, _c, _d, _e;
-        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled, iframeOrigin: this.iframeOrigin }))));
     }
     get summary() {
         var _a, _b;
         return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(StyledHost, { key: 'a3da58e301dbb938bad9785ef93deb58c9f8bc1c' }, h("div", { key: '1e27568848b163443823e475f60f024e0574d5a1', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '1626910a51278d3605d7478967bd5510f06ab0e8', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'a611cc9f961758d629ef9b60a7c721e779c2e7aa', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: '497cbf1fb357b5da2ba33355d8b216812ca462d8', class: "col-12" }, h("slot", { key: 'ee71b1f7ee82c5309c55367585be33d911d1a77a', name: "insurance" })), h("div", { key: '77f4b551f6f8caea04cedea4331dbac1b58cc2b2', class: "col-12 mt-4" }, h(Header2, { key: 'e03f34d1368468fc3712cf3adcb3254ac729ca2c', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '80b7ae6d2b965532e1def898369d9e294c9efa47', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'fbcbb06d2f706a4f317496afbb5f932c7a954285', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'e272325743370aa22ef9973523eb47829b9504f4', class: "col-12" }, h("div", { key: '0c0cfb11564c8008dfb05d0ec48e0c18ea63c589', class: "d-flex justify-content-end" }, h(Button, { key: '85860b67adb647db23b4944cefec1bcf0ec19d92', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '8f7bb796cec8a51b3a871ecc6f1d040636103503' }, h("div", { key: 'f616c1705dd8d9da854b496d5b028cebb4c88ce5', class: "row gy-3 jfi-checkout-core" }, h("div", { key: 'e374110371f020c9de996f4ca3932f7535e208ee', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'aa9227b3ff49dc43c6a42d1988ec0669b298cef0', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'e8e9cddcc4cb11c6d7c020c1dc18d7b5bfe457c3', class: "col-12" }, h("slot", { key: '69e623e8c23aec6f49430b395f86d7134ceeddc9', name: "insurance" })), h("div", { key: 'fea072a50acb658433a36d8234b27c1fd8415dc4', class: "col-12 mt-4" }, h(Header2, { key: '9b0a5c9e5e7db31a6d6cfda87cad18786d638bd9', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '2eeae1935b2b238573be4bf1edfc5d80700d9c80', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '5c9fd0558a37ff903ec7137beeb3c49d406bcd1d', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '2538670c227dc2e96c43d878ae09357a72a7e267', class: "col-12" }, h("div", { key: 'b51e39da64972578815a2cf0cf5342d292edaa45', class: "d-flex justify-content-end" }, h(Button, { key: 'abcb099a4ad152a38d05d99781e02292efd246e0', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
@@ -203,6 +204,23 @@ export class CheckoutCore {
                 "attribute": "checkout-id",
                 "reflect": false
             },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false
+            },
             "disableCreditCard": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/checkout/checkout.js

@@ -4,6 +4,7 @@ import { CheckoutService } from "../../api/services/checkout.service";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { config } from "../../../config";
 export class Checkout {
     constructor() {
         this.authToken = undefined;
@@ -13,6 +14,7 @@ export class Checkout {
         this.disableBnpl = undefined;
         this.disablePaymentMethodGroup = undefined;
         this.hideCardBillingForm = undefined;
+        this.iframeOrigin = config.iFrameOrigin;
         this.getCheckout = undefined;
         this.complete = undefined;
         this.errorMessage = '';
@@ -53,11 +55,11 @@ export class Checkout {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: 'd0f0e8bd7634b09e43d7b89fc9b62dad5a46698a', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, ref: el => {
+        return (h("justifi-checkout-core", { key: '911e807dc0be670c6bfe59e497cacd5399481981', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, iframeOrigin: this.iframeOrigin, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: 'c523d863b3c50a2a341c6afda034a847f172f64d', slot: "insurance" }, h("slot", { key: '7fc6851584286b771b300113065950fd3c36fe7b', name: "insurance" }))));
+            } }, h("div", { key: '29bcfd776e4dac5a7686a03488d0f8dad2d01a03', slot: "insurance" }, h("slot", { key: '993b8872e8a40dd5111ccaeb586686a396eab2ff', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -180,6 +182,24 @@ export class Checkout {
                 },
                 "attribute": "hide-card-billing-form",
                 "reflect": false
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iFrameOrigin"
             }
         };
     }

package/dist/collection/components/checkout/new-payment-method.js

@@ -16,6 +16,7 @@ export class NewPaymentMethod {
         this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
         this.hideCardBillingForm = undefined;
+        this.iframeOrigin = undefined;
         this.saveNewPaymentMethodChecked = false;
     }
     handleCheckboxChanged(event) {
@@ -75,11 +76,11 @@ export class NewPaymentMethod {
     showNewPaymentMethodForm() {
         var _a;
         const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("justifi-billing-form-wrapper", { ref: (el) => (this.billingFormWrapperRef = el), hideCardBillingForm: this.hideCardBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), h("div", { class: "mb-4" }, paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin }))), h("justifi-billing-form-wrapper", { ref: (el) => (this.billingFormWrapperRef = el), hideCardBillingForm: this.hideCardBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '08d8aac7f71c6f7e6f55b8e43a8987ad0e0604d2', class: "payment-method" }, h("div", { key: 'd38fb7c6591df0c552ec51137b4358a2fa5a2651', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '90725e78617ea8dcd40981cac815601a75256f7d', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: '17b922ca3b03d458a0e139be895db31b33c255ed', class: "payment-method" }, h("div", { key: '5d1bb3a05e7fc0516d29ade315f13c2f64d3afaf', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '165fd1b54a6d387be307f05ab67078e0d703f0b1', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -189,6 +190,23 @@ export class NewPaymentMethod {
                 },
                 "attribute": "hide-card-billing-form",
                 "reflect": false
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/checkout/payment-method-options.js

@@ -15,6 +15,7 @@ export class PaymentMethodOptions {
         this.savedPaymentMethods = [];
         this.paymentAmount = undefined;
         this.hideCardBillingForm = undefined;
+        this.iframeOrigin = undefined;
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
@@ -58,13 +59,13 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b83f8b54a8f5a15790b263047a5eb9acc416ae2c' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '24e7d418958eb61f9582317e615502e77b4090d0' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -295,6 +296,23 @@ export class PaymentMethodOptions {
                 },
                 "attribute": "hide-card-billing-form",
                 "reflect": false
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false
             }
         };
     }

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

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
 import { Button, StyledHost } from "../../ui-components";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
+import { config } from "../../../config";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
 export class TokenizePaymentMethod {
     constructor() {
         this.authToken = undefined;
@@ -13,6 +14,7 @@ export class TokenizePaymentMethod {
         this.disableBankAccount = undefined;
         this.hideSubmitButton = undefined;
         this.hideCardBillingForm = undefined;
+        this.iframeOrigin = config.iFrameOrigin;
         this.isLoading = false;
     }
     componentWillLoad() {
@@ -22,8 +24,9 @@ export class TokenizePaymentMethod {
     async tokenizePaymentMethod(event) {
         event && event.preventDefault();
         this.isLoading = true;
+        let tokenizeResponse;
         try {
-            const tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
+            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
             if (tokenizeResponse.error) {
                 this.errorEvent.emit({
                     errorCode: tokenizeResponse.error.code,
@@ -31,26 +34,26 @@ export class TokenizePaymentMethod {
                     severity: ComponentErrorSeverity.ERROR,
                 });
             }
-            else if (tokenizeResponse.token) {
-                this.submitEvent.emit({ response: tokenizeResponse });
-            }
         }
         catch (error) {
-            this.errorEvent.emit({
+            const errorData = {
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
                 severity: ComponentErrorSeverity.ERROR,
-            });
+            };
+            this.errorEvent.emit(errorData);
         }
         finally {
+            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
+            return tokenizeResponse;
         }
     }
     async fillBillingForm(fields) {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: 'bfeaea9cc19470d95c3c3b01d8a2f1d0686719f0' }, h("form", { key: '055830971e13041ddc826d104deaf082765736aa' }, h("fieldset", { key: '0cca44190920ef7d526bd3ddcdf72b0d1a7d82e7' }, h("div", { key: 'cb12a4423b5ddcffcc5fb4b3905f6ad37cf23c15', class: "row gy-3" }, h("div", { key: '6d1e36bb81d64d81f4440f3c1687b03a0383fbbb', class: "col-12" }, h("justifi-payment-method-options", { key: '312ad9fe09f65c2f5ec1d0c2bbe74bcf0f24aafb', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'ce18adbc0b9f868a3bff49a9f2d994b83be66b4c', class: "col-12" }, h(Button, { key: '1610a24c4ffb1a6e6ddd6eea1720b553c67a20f7', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: 'f0efb2ab8f051b0b5dafcb608c9c1b561f6f21bc' }, h("form", { key: 'b511a1af4e15175d7bec45c66dc030e693820563' }, h("fieldset", { key: '53b78e28371b6ed69140774b6b47afcee3cb7edd' }, h("div", { key: 'e37c7cb04912fac8bf24bae88cfd06fb00d22325', class: "row gy-3" }, h("div", { key: '103ef1da7228ab3d74065ca64ea070e1520799ff', class: "col-12" }, h("justifi-payment-method-options", { key: '58d614390f0dce90d1ca85b88ce888b841457753', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: '727317ff2fafaace929f6667934a649994fe037d', class: "col-12" }, h(Button, { key: '999ec3e29e37ce5027f6d1c4d75bae31beba6ab1', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -191,6 +194,24 @@ export class TokenizePaymentMethod {
                 },
                 "attribute": "hide-card-billing-form",
                 "reflect": false
+            },
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iFrameOrigin"
             }
         };
     }
@@ -216,8 +237,8 @@ export class TokenizePaymentMethod {
                     "references": {
                         "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -237,8 +258,8 @@ export class TokenizePaymentMethod {
                     "references": {
                         "ComponentSubmitEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentSubmitEvent"
                         }
                     }
                 }
@@ -248,7 +269,7 @@ export class TokenizePaymentMethod {
         return {
             "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(event?: CustomEvent) => Promise<void>",
+                    "signature": "(event?: CustomEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
                             "name": "event",
                             "type": "CustomEvent<any>",
@@ -259,17 +280,22 @@ export class TokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
                         "CustomEvent": {
                             "location": "global",
                             "id": "global::CustomEvent"
                         },
                         "ComponentErrorCodes": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentErrorCodes"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
@@ -291,8 +317,8 @@ export class TokenizePaymentMethod {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
                         }
                     },
                     "return": "Promise<void>"

package/dist/config.js

@@ -1,5 +1,6 @@
 export const config = {
     proxyApiOrigin: PROXY_API_ORIGIN,
+    iFrameOrigin: IFRAME_ORIGIN,
     proxyAuthToken: 'eyJraWQiOiJqdXN0aWZpLWUyNDgyMmU3ODE1MmEzZjRkMjU1IiwidHlwIjoiSldUIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguanVzdGlmaS5haS8iLCJhenAiOiJvYXNfMmlsWHBqOHQ2WVlEQ0xWU0FiVFczMiIsInN1YiI6Im9hc18yaWxYcGo4dDZZWURDTFZTQWJUVzMyQHNlc3Npb25zIiwiYXVkIjoiaHR0cHM6Ly9hcGkuanVzdGlmaS5haS92MSIsImd0eSI6ImNsaWVudC1jcmVkZW50aWFscyIsInBlcm1pc3Npb25zIjpbeyJyb2xlIjoicmVhZDphY2NvdW50IiwicmVzb3VyY2VfaWQiOiJhY2NfNUV0OWlYclNTQVpSMktTb3VRR0FXaSJ9LHsicm9sZSI6InJlYWQ6YnVzaW5lc3MiLCJyZXNvdXJjZV9pZCI6ImJpel8zYmg2OWJxMXJrM2RtWE5vQUtWb251In1dLCJleHAiOjE3MTE1NTk0MTQsImlhdCI6MTcwMzc4MzQxNCwicGxhdGZvcm1fYWNjb3VudF9pZCI6ImFjY18zcmVOYjRhTll5MmlXRFpRVmN6bXg0In0.oPOoDYxzrnpE8PRUaz-FCU4KqnSuNbFTeDkl3AtMscjUkIctP1OIFh-ZGBjbH5eVH5noXCbaiin0j92dS7jx4gLpxuYT2Q8gpZbuIsT7fa58elvGeRkUUJ-AC5ueZxlv90yPWMm0OIbyrV7XZhuwYyKbV-ZczEbl2JpvBMe40CM-LdClQV66d_-Kw9a23SabBVfYgP5V-5OsagOIESvzZoO-27tGlNkV2a-hxqddDCOZv0HvRYAtp5S7EQrmRdEBu5gCNbf1eRFG424hxZUFVr2LdetYuKQLxJjDdUjf86ZwEUecrEaDSupiN1VC3CitdOwBVf6-R_N0VpN4VLVD5g',
     exampleAccountId: 'acc_5Et9iXrSSAZR2KSouQGAWi',
     exampleBusinessId: 'biz_3bh69bq1rk3dmXNoAKVonu',