@justifi/webcomponents 5.7.6-rc-07 → 5.7.6

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

@@ -1,94 +1,60 @@
 import { h } from "@stencil/core";
+import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
+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 { checkoutStore } from "../../store/checkout.store";
-import { checkoutSummary } from "../../styles/parts";
-import { PaymentMethodTypes } from "../../api/Payment";
-import { StyledHost } from "../../ui-components";
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
 export class Checkout {
     constructor() {
         this.errorMessage = '';
-        this.insuranceToggled = false;
-        this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.paymentMethodOptions = [];
-        this.savePaymentMethod = false;
-        this.disableBankAccount = false;
-        this.disableBnpl = false;
-        this.disableCreditCard = false;
-        this.disablePaymentMethodGroup = false;
-        this.hideBankAccountBillingForm = false;
-        this.hideCardBillingForm = false;
-    }
-    propChanged() {
-        this.updateStore();
-    }
-    connectedCallback() {
-        if (this.authToken && this.checkoutId) {
-            this.updateStore();
-        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.initializeGetCheckout();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    savePaymentMethodChanged(event) {
-        this.savePaymentMethod = event.detail;
-    }
-    checkoutComplete(_event) {
-        this.isSubmitting = false;
-    }
-    checkoutError(event) {
-        this.isSubmitting = false;
-        console.error('checkout error', event.detail);
+    ;
+    initializeGetCheckout() {
+        if (this.authToken && this.checkoutId) {
+            this.getCheckout = makeGetCheckout({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+            this.complete = makeCheckoutComplete({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'auth-token and checkout-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
     }
-    paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
+    propChanged() {
+        this.initializeGetCheckout();
     }
     async fillBillingForm(fields) {
-        checkoutStore.billingFormFields = fields;
+        this.checkoutCoreRef.fillBillingForm(fields);
     }
     async validate() {
-        var _a;
-        return { isValid: await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate()) };
-    }
-    updateStore() {
-        checkoutStore.checkoutId = this.checkoutId;
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.disableCreditCard = this.disableCreditCard;
-        checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
-        checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
-    }
-    async submit(_event) {
-        this.isSubmitting = true;
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
-    }
-    get canSavePaymentMethod() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
-    }
-    get showBillingForm() {
-        return (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && !this.hideCardBillingForm)
-            || (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && !this.hideBankAccountBillingForm);
-    }
-    get showBillingFormSection() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
-    }
-    get showPaymentTypeHeader() {
-        return !this.disableCreditCard && !this.disableBankAccount;
-    }
-    get showPostalCodeForm() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
+        const { isValid } = await this.checkoutCoreRef.validate();
+        return { isValid };
     }
     render() {
-        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h("justifi-checkout-core", { key: 'c1c7cf4f1aadce928e3ed6a6ae05a7824d875d68', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
+                if (el) {
+                    this.checkoutCoreRef = el;
+                }
+            } }, h("div", { key: '7a4be7220e5eb199f94c5086c23e10dce68d4854', slot: "insurance" }, h("slot", { key: 'f5db23ef6dc82d0521518ea2dbfe99d8c8b6c2cc', name: "insurance" }))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -131,9 +97,9 @@ export class Checkout {
                 "setter": false,
                 "reflect": false
             },
-            "disableBankAccount": {
+            "disableCreditCard": {
                 "type": "boolean",
-                "attribute": "disable-bank-account",
+                "attribute": "disable-credit-card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -148,12 +114,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "disableBnpl": {
+            "disableBankAccount": {
                 "type": "boolean",
-                "attribute": "disable-bnpl",
+                "attribute": "disable-bank-account",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -168,12 +133,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "disableCreditCard": {
+            "disableBnpl": {
                 "type": "boolean",
-                "attribute": "disable-credit-card",
+                "attribute": "disable-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,8 +152,7 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
             "disablePaymentMethodGroup": {
                 "type": "boolean",
@@ -208,12 +171,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "hideBankAccountBillingForm": {
+            "hideCardBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-bank-account-billing-form",
+                "attribute": "hide-card-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -228,12 +190,11 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "hideCardBillingForm": {
+            "hideBankAccountBillingForm": {
                 "type": "boolean",
-                "attribute": "hide-card-billing-form",
+                "attribute": "hide-bank-account-billing-form",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,21 +209,15 @@ export class Checkout {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "checkout": {},
+            "getCheckout": {},
             "complete": {},
-            "errorMessage": {},
-            "insuranceToggled": {},
-            "isSubmitting": {},
-            "paymentMethodOptions": {},
-            "savePaymentMethod": {},
-            "serverError": {}
+            "errorMessage": {}
         };
     }
     static get events() {
@@ -308,27 +263,6 @@ export class Checkout {
                         }
                     }
                 }
-            }, {
-                "method": "submitEvent",
-                "name": "submit-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentSubmitEvent",
-                    "resolved": "ComponentSubmitEvent",
-                    "references": {
-                        "ComponentSubmitEvent": {
-                            "location": "import",
-                            "path": "../../api/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {
@@ -385,45 +319,6 @@ export class Checkout {
             }, {
                 "propName": "checkoutId",
                 "methodName": "propChanged"
-            }, {
-                "propName": "disableCreditCard",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disableBankAccount",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disableBnpl",
-                "methodName": "propChanged"
-            }, {
-                "propName": "disablePaymentMethodGroup",
-                "methodName": "propChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "checkboxChanged",
-                "method": "savePaymentMethodChanged",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "submit-event",
-                "method": "checkoutComplete",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "error-event",
-                "method": "checkoutError",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "paymentMethodOptionSelected",
-                "method": "paymentMethodOptionSelected",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -80,14 +80,14 @@ 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" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("justifi-card-form", null)) : (h("justifi-bank-account-form", null)), h("justifi-billing-form", { hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     get hiddenRadioInput() {
         return !this.showAch || !this.showCard;
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'c80662f7f21610af20ead6aff44f02be0b21288c', class: "payment-method" }, h("div", { key: '5960fa9cf3ca9969c7ef80af3baf6e90ddf79578', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'ef5b921a707a3e51d4ee93f5e13952e69fc55213', 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: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', 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() {

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

@@ -1,12 +1,6 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
-import { checkoutStore } from "../../store/checkout.store";
-import { radioListItem } from "../../styles/parts";
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
-};
 export class PaymentMethodOptions {
     constructor() {
         this.savedPaymentMethods = [];
@@ -39,15 +33,12 @@ export class PaymentMethodOptions {
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (!checkoutStore.selectedPaymentMethod) {
-            checkoutStore.selectedPaymentMethod = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
+        if (!this.selectedPaymentMethodId) {
+            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
-    }
-    get hiddenRadioInput() {
-        return !this.showAch || !this.showCard;
+        this.selectedPaymentMethodId = event.detail.id;
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a;
@@ -58,7 +49,34 @@ export class PaymentMethodOptions {
         return newPaymentMethodElement.validate();
     }
     render() {
-        return (h("div", { key: 'e1a46216f766f12306302210bcba3147a4312cfa' }, h("justifi-saved-payment-methods", { key: '72ac4e440719ed1bbafc90f4cf0a2e3a52530713' }), h("justifi-sezzle-payment-method", { key: 'aaa89521f18ac4833d561c08b3fa50b00800a4bf' }), h("div", { key: '209001587e9f7e23f1147d4ef2d8ec4691f6c9fb', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '0baed32a40efc6ff0d77dcf53ae9e3ff3aab1185', name: "paymentMethodType", value: PaymentMethodTypes.card, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] })), h("div", { key: '53d8360fdecec5a6860f480901911bd2c396e1a2', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '901a45bae4b3faeed8daa147db5c8264c4bee08c', name: "paymentMethodType", value: PaymentMethodTypes.bankAccount, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }))));
+        var _a;
+        return (h(Host, { key: 'c61e82c72aaa25e87ded723799a1eb0961c05444' }, (_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, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (sezzle) {
+                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+            else if (this.showSavedPaymentMethods) {
+                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
+        })));
     }
     static get is() { return "justifi-payment-method-options"; }
     static get properties() {
@@ -101,9 +119,9 @@ export class PaymentMethodOptions {
                 "setter": false,
                 "reflect": false
             },
-            "showSavedPaymentMethods": {
+            "showBnpl": {
                 "type": "boolean",
-                "attribute": "show-saved-payment-methods",
+                "attribute": "show-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -120,9 +138,9 @@ export class PaymentMethodOptions {
                 "setter": false,
                 "reflect": false
             },
-            "showBnpl": {
+            "showSavedPaymentMethods": {
                 "type": "boolean",
-                "attribute": "show-bnpl",
+                "attribute": "show-saved-payment-methods",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -319,6 +337,7 @@ export class PaymentMethodOptions {
     }
     static get states() {
         return {
+            "selectedPaymentMethodId": {},
             "paymentMethodOptions": {}
         };
     }

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

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { StyledHost } from "../../ui-components";
 export class SaveNewPaymentMethod {
     constructor() {
         this.isChecked = false;
@@ -9,10 +8,9 @@ export class SaveNewPaymentMethod {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h(StyledHost, { key: '114f1887f2aebee2440d5c0b187fe1f361137230' }, h("div", { key: '8a967beb89065a8b3ee501f0589b6617764c641e', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'b22ca881a5fcda9dc044dfd1175e9ae06fd9f504', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) }))));
+        return (h("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', 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 encapsulation() { return "shadow"; }
     static get states() {
         return {
             "isChecked": {}

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

@@ -18,7 +18,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'c6a1d3de6363c80a0acb15c6676d3e913beeda2d', class: "payment-method" }, h("div", { key: 'fdabb1a67f654a3bcf06e86e8c42f6aa281e6757', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0731e2ccb8080ee4972201a617cd99376627e332', 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: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', 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() {