@justifi/webcomponents 5.0.0 → 5.2.0

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

@@ -11,7 +11,7 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'd667f365a95a2251fadffce158033ca8fcbc5723', class: "container-fluid p-0" }, h("div", { key: '43d8e15de893154c96b49ea1917046120daa8b2c', class: "mb-3" }, h("iframe-input", { key: 'c342a50a3194511edfbe6c1f1033bf47b743ddd6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${IFRAME_ORIGIN}/cardNumber` })), h("div", { key: '2fa70e85071ec6fe4525039de6215026795f71f4', class: "row" }, h("div", { key: 'e7dba59f040258e556664ccf84549edda8a1dd8d', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c2c63ee318b0fc61ff704ffe02160aee252d281', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${IFRAME_ORIGIN}/expirationMonth` })), h("div", { key: 'e211c9bc9cb15ea9571af7d965fcb1d6e4c5669d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'd783cb0d28f1d08826e773efc14c2aa871905a83', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${IFRAME_ORIGIN}/expirationYear` })), h("div", { key: '83af611f578e7db1984713047708e725c9c1c7b5', class: "col-4 align-content-end" }, h("iframe-input", { key: '1f53fce0b7856b8591f6454a549e123fa408be5f', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${IFRAME_ORIGIN}/CVV` })))));
+        return (h(Host, { key: 'cc49f963960cc00ea499484ce257d0b902837c1e', class: "container-fluid p-0" }, h("div", { key: '873ee92597101d80c5c05f50a1428402061ed27f', class: "mb-3" }, h("iframe-input", { key: '4987b5fd997954e30450b5f0b5089c91523afe4f', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${IFRAME_ORIGIN}/cardNumber` })), h("div", { key: '7a50424f955163f9c213d81057338c915e046a41', class: "row" }, h("div", { key: 'ab117b543d5ba1b1ca5db6030480048fc266250b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e5b0f96d4be64fd07ac2417b23d8a3913d67145a', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${IFRAME_ORIGIN}/expirationMonth` })), h("div", { key: 'c66377e9ae6b0f1a750933ca628edcb62b227e34', class: "col-4 align-content-end" }, h("iframe-input", { key: '2fb5328b3b8b82d0bd2b0ad2272cd73b133cb548', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${IFRAME_ORIGIN}/expirationYear` })), h("div", { key: 'add1b6be0df27a95b5c244a7bb2320f6f40ec930', class: "col-4 align-content-end" }, h("iframe-input", { key: '3c0341c1111b1980d9868d314221857e7ff07996', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${IFRAME_ORIGIN}/CVV` })))));
     }
     static get is() { return "card-form"; }
     static get methods() {

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

@@ -1,11 +1,10 @@
 import { h } from "@stencil/core";
 import { formatCurrency } from "../../utils/utils";
-import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
 import { Button, StyledHost, Skeleton, Header2, Header3 } from "../../ui-components";
-import { text } from "../../styles/parts";
+import { checkoutSummary, text } from "../../styles/parts";
 export class CheckoutCore {
     constructor() {
         this.completeCheckout = async (payment) => {
@@ -28,7 +27,6 @@ export class CheckoutCore {
             });
             this.renderState = 'error';
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.getCheckout = undefined;
         this.complete = undefined;
@@ -37,6 +35,7 @@ export class CheckoutCore {
         this.disableBankAccount = undefined;
         this.disableBnpl = undefined;
         this.disablePaymentMethodGroup = undefined;
+        this.hideCardBillingForm = undefined;
         this.hasLoadedFonts = false;
         this.checkout = undefined;
         this.serverError = undefined;
@@ -117,37 +116,19 @@ 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, 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 }))));
     }
     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: '7ea5d909a307d335327b652bc247718a7b2973ff' }, h("div", { key: '0f7e9baffebadad78c28c318a770b681cabd7579', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2453b63f1a3cffe56a85b38005a8e3cabd666f47', class: "col-12" }, h(Header2, { key: 'ea4bbc494746c1042d8976aa72f66ebc20f257ef', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'bee560cf279315e76551513c5135ab1a0b180de4', class: "col-12" }, h("slot", { key: '3b2260c580a2a3a4b8bafe46d215cd5821b17815', name: "insurance" })), h("div", { key: '6d0f4b6ea7ea611fe4eacc13e6cf1bf2cddfba64', class: "col-12 mt-4" }, h(Header2, { key: '1eae72a345d5f255573237cf45b4b6359ff5729c', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '89a6fefa7693ef3094128485531cb7c57a314b36', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: 'ffe09e15c81fbb821fc99031c13b753bfa943596', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '8b635fa70dbaadc8530ccb7105ed9590ce87e2ed', class: "col-12" }, h("div", { key: '9caa17a123c1ff08391c48632facfb4fe33809d2', class: "d-flex justify-content-end" }, h(Button, { key: '53faa444e15b719e9e41d8ce01295f841b9507d2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+        return (h(StyledHost, { key: '27b5f6263124c9c288fb81e6a0a97ef9565a49ed' }, h("div", { key: '8444c6ea0c1b4f9a63e46407c90ee1d14556f832', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '920ddc8692ce6a0cc129fc9de0353c7d1cce0fcf', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'c48cfc8be18363aa522e38a6dd09acccf2f51bf4', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: '1f9615177d056357b9c960bbf86360324a2330dc', class: "col-12" }, h("slot", { key: '2a3845fe83eb3c0a213f97a0ccc74c268690818b', name: "insurance" })), h("div", { key: 'c7e588bb71c6bc3f84636cde3346021b51978bfd', class: "col-12 mt-4" }, h(Header2, { key: '512bef8ae536558eba77019531f38485983b1a2f', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '84a1d01dbae527ca1bff19b2f3dfcd47f9b3782f', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '8770c420bf092ad3173fb7308d795e1e9ab6d00d', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '2c907e60023119910220a57725d52a2133a4e5ba', class: "col-12" }, h("div", { key: 'b2303b22c1a83755726eb08d7e732b4c472f75d7', class: "d-flex justify-content-end" }, h(Button, { key: '6c5910476d57f439648810a8fe200b190256bb2d', 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"; }
     static get properties() {
         return {
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "URL for the rendered iFrame. End-users need not use this."
-                },
-                "attribute": "iframe-origin",
-                "reflect": false,
-                "defaultValue": "config.iframeOrigin"
-            },
             "authToken": {
                 "type": "string",
                 "mutable": false,
@@ -289,6 +270,23 @@ export class CheckoutCore {
                 },
                 "attribute": "disable-payment-method-group",
                 "reflect": false
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-card-billing-form",
+                "reflect": false
             }
         };
     }
@@ -372,10 +370,10 @@ export class CheckoutCore {
         return {
             "fillBillingForm": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(fields: BillingFormFields | PostalFormFields) => Promise<void>",
                     "parameters": [{
                             "name": "fields",
-                            "type": "BillingFormFields",
+                            "type": "BillingFormFields | PostalFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -385,8 +383,13 @@ export class CheckoutCore {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../billing-form/billing-form-schema",
-                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "PostalFormFields": {
+                            "location": "import",
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::PostalFormFields"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -6,13 +6,13 @@ import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class Checkout {
     constructor() {
-        this.iframeOrigin = undefined;
         this.authToken = undefined;
         this.checkoutId = undefined;
         this.disableCreditCard = undefined;
         this.disableBankAccount = undefined;
         this.disableBnpl = undefined;
         this.disablePaymentMethodGroup = undefined;
+        this.hideCardBillingForm = undefined;
         this.getCheckout = undefined;
         this.complete = undefined;
         this.errorMessage = '';
@@ -53,32 +53,15 @@ export class Checkout {
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: '1a31304be74cae8c70683b9a26319d59f1462362', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: '573ac7486b2523d6918f5f8eb97a17dcf47edd3a', 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 => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: 'ad9e6466d374849862f48c25c61a2a511b8465af', slot: "insurance" }, h("slot", { key: 'eb94e33e0ab10320aede52292f732de5d92e3341', name: "insurance" }))));
+            } }, h("div", { key: '649338a229597a0c6a9987975f91e678ca489890', slot: "insurance" }, h("slot", { key: 'ddfb4986d89a9792e7dad6ffad7dd134bedc9e25', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
         return {
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false
-            },
             "authToken": {
                 "type": "string",
                 "mutable": false,
@@ -180,6 +163,23 @@ export class Checkout {
                 },
                 "attribute": "disable-payment-method-group",
                 "reflect": false
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-card-billing-form",
+                "reflect": false
             }
         };
     }
@@ -239,10 +239,10 @@ export class Checkout {
         return {
             "fillBillingForm": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(fields: BillingFormFields | PostalFormFields) => Promise<void>",
                     "parameters": [{
                             "name": "fields",
-                            "type": "BillingFormFields",
+                            "type": "BillingFormFields | PostalFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -252,8 +252,13 @@ export class Checkout {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../billing-form/billing-form-schema",
-                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "PostalFormFields": {
+                            "location": "import",
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::PostalFormFields"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1,7 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { config } from "../../../config";
-import { Header3 } from "../../ui-components";
-import { billingForm, radioListItem } from "../../styles/parts";
+import { radioListItem } from "../../styles/parts";
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
     card: 'New credit or debit card',
@@ -12,23 +10,23 @@ export class NewPaymentMethod {
             e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
         this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
+        this.hideCardBillingForm = undefined;
         this.saveNewPaymentMethodChecked = false;
     }
     handleCheckboxChanged(event) {
         this.saveNewPaymentMethodChecked = event.detail;
     }
     async fillBillingForm(fields) {
-        this.billingFormRef.fill(fields);
+        this.billingFormWrapperRef.fill(fields);
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a, _b;
-        if (!this.paymentMethodFormRef || !this.billingFormRef)
+        if (!this.paymentMethodFormRef || !this.billingFormWrapperRef)
             return;
         try {
             const isValid = await this.validate();
@@ -41,7 +39,10 @@ export class NewPaymentMethod {
             }
             else {
                 const tokenizeRessponseData = tokenizeResponse.data;
-                return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
+                return {
+                    token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
+                    data: tokenizeRessponseData
+                };
             }
         }
         catch (error) {
@@ -49,13 +50,13 @@ export class NewPaymentMethod {
         }
     }
     async validate() {
-        const billingFormValidation = await this.billingFormRef.validate();
+        const billingFormValidation = await this.billingFormWrapperRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
     }
     async tokenize() {
         try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const billingFormFieldValues = await this.billingFormWrapperRef.getValues();
             let paymentMethodData;
             if (this.saveNewPaymentMethodChecked) {
                 paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
@@ -73,33 +74,16 @@ export class NewPaymentMethod {
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("div", { part: billingForm }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        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 })));
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', 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: 'c0d2a7efd367d357a4c205960f8765e488f7e376', class: "payment-method" }, h("div", { key: '697f5d543ed4690b11f6d8e36bb88eabbc8cc368', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '43bf63f112ef40cca0332b77bf447c5f8b5e0379', 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() {
         return {
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false,
-                "defaultValue": "config.iframeOrigin"
-            },
             "authToken": {
                 "type": "string",
                 "mutable": false,
@@ -188,6 +172,23 @@ export class NewPaymentMethod {
                 },
                 "attribute": "is-selected",
                 "reflect": false
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-card-billing-form",
+                "reflect": false
             }
         };
     }
@@ -218,10 +219,10 @@ export class NewPaymentMethod {
         return {
             "fillBillingForm": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(fields: BillingFormFields | PostalFormFields) => Promise<void>",
                     "parameters": [{
                             "name": "fields",
-                            "type": "BillingFormFields",
+                            "type": "BillingFormFields | PostalFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -231,8 +232,13 @@ export class NewPaymentMethod {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../billing-form/billing-form-schema",
-                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "PostalFormFields": {
+                            "location": "import",
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::PostalFormFields"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { config } from "../../../config";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
 export class PaymentMethodOptions {
@@ -13,9 +12,9 @@ export class PaymentMethodOptions {
         this.insuranceToggled = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
-        this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
         this.paymentAmount = undefined;
+        this.hideCardBillingForm = undefined;
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
@@ -59,13 +58,13 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '22ab195ec840e971c774ad2886ebce979c13394d' }, (_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, 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, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -247,24 +246,6 @@ export class PaymentMethodOptions {
                 "attribute": "account-id",
                 "reflect": false
             },
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false,
-                "defaultValue": "config.iframeOrigin"
-            },
             "savedPaymentMethods": {
                 "type": "unknown",
                 "mutable": false,
@@ -297,6 +278,23 @@ export class PaymentMethodOptions {
                 },
                 "attribute": "payment-amount",
                 "reflect": false
+            },
+            "hideCardBillingForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-card-billing-form",
+                "reflect": false
             }
         };
     }
@@ -306,32 +304,14 @@ export class PaymentMethodOptions {
             "paymentMethodOptions": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "toggleCreatingNewPaymentMethod",
-                "name": "toggleCreatingNewPaymentMethod",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "fillBillingForm": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(fields: BillingFormFields | PostalFormFields) => Promise<void>",
                     "parameters": [{
                             "name": "fields",
-                            "type": "BillingFormFields",
+                            "type": "BillingFormFields | PostalFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -341,8 +321,13 @@ export class PaymentMethodOptions {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../billing-form/billing-form-schema",
-                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
+                        },
+                        "PostalFormFields": {
+                            "location": "import",
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::PostalFormFields"
                         },
                         "HTMLJustifiNewPaymentMethodElement": {
                             "location": "global",

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

@@ -8,7 +8,7 @@ export class SaveNewPaymentMethod {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '4b0ac5e02aa02214bf8ddd574db56eb9508b0607', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'bca05c6b8fa00dd7bbc34ee36ef6086ae1764b82', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+        return (h("div", { key: '017cbce906d331b82eb5dc726197da3ea3ba51e5', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'ca22562653b216d16bd19765f1834ff2428820cc', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get states() {

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

@@ -1,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { config } from "../../../config";
 import { CardBrandLabels } from "./payment-method-option-utils";
 import { radioListItem } from "../../styles/parts";
 export class SavedPaymentMethod {
@@ -8,7 +7,6 @@ export class SavedPaymentMethod {
             e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
@@ -22,29 +20,11 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '8e5a11a58cf828356df001461b6bb3163521f1ed', class: "payment-method" }, h("div", { key: 'c20a8a3dcea1f885b94c4829b85be8d6f401ad42', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '72b970f6808e9f938869195fa29217f44b44250e', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '10b18a7c77250aac57d6afef89aea752e3bc2c35', class: "payment-method" }, h("div", { key: '80910960904f3e01fd10cba4789af4004b434490', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'abccf6aca9316de983ba899eabfffcc7b05b1d48', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {
         return {
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false,
-                "defaultValue": "config.iframeOrigin"
-            },
             "paymentMethodOption": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -1,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import { config } from "../../../config";
 import { formatCurrency } from "../../utils/utils";
 import { radioListItem } from "../../styles/parts";
 const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
@@ -41,7 +40,6 @@ export class SezzlePaymentMethod {
             this.sezzleCheckout = checkout;
             this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.bnpl = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
@@ -67,29 +65,11 @@ export class SezzlePaymentMethod {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
+        return (h(Host, { key: 'eaf1bd457f91f77bffa661875277c0709d5926d3', class: "payment-method" }, h("script", { key: '897bccdb0090b3e3b45b9913f7bdea6b838f63cb', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: 'db32690b54bdb5045d701c888cd67c7d97d66243', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'c3746a50bc7a5b8f079ed76c204790555983def1', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
         return {
-            "iframeOrigin": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "iframe-origin",
-                "reflect": false,
-                "defaultValue": "config.iframeOrigin"
-            },
             "bnpl": {
                 "type": "any",
                 "mutable": false,