@justifi/webcomponents 4.13.0 → 4.15.0

package/dist/collection/components/business-forms/payment-provisioning/business-representative/business-representative-form-step.js

@@ -63,6 +63,9 @@ export class BusinessRepresentativeFormStep {
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
     }
+    get identificationNumberLabel() {
+        return this.representative.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
+    }
     handleResponse(response, onSuccess) {
         if (response.error) {
             this.serverError.emit({ data: response.error, message: BusinessFormServerErrors.patchData });
@@ -84,7 +87,7 @@ export class BusinessRepresentativeFormStep {
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
         this.formController = new FormController(identitySchema('representative', this.allowOptionalFields));
-        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
         this.fetchData();
     }
     componentDidLoad() {
@@ -93,7 +96,7 @@ export class BusinessRepresentativeFormStep {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
     }
     static get is() { return "justifi-business-representative-form-step"; }
     static get originalStyleUrls() {

package/dist/collection/components/business-forms/payment-provisioning/legal-address-form/legal-address-form-step.js

@@ -77,7 +77,7 @@ export class LegalAddressFormStep {
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
         this.formController = new FormController(addressSchema(this.allowOptionalFields));
-        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
         this.fetchData();
     }
     componentDidLoad() {

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -1,4 +1,4 @@
-import { object } from "yup";
+import { object, string } from "yup";
 import { addressSchema } from "./business-address-schema";
 import { dobValidation, emailValidation, identityNameValidation, identityTitleValidation, phoneValidation, ssnValidation } from "./schema-validations";
 export const identitySchema = (role, allowOptionalFields) => {
@@ -8,7 +8,8 @@ export const identitySchema = (role, allowOptionalFields) => {
         email: emailValidation.required(`Enter ${role} email`),
         phone: phoneValidation.required('Enter phone number'),
         dob_full: dobValidation(role).required('Enter date of birth'),
-        identification_number: ssnValidation.required('Enter SSN'),
+        ssn_last4: string().nullable(),
+        identification_number: ssnValidation,
         address: addressSchema(allowOptionalFields),
     });
     const easySchema = object({
@@ -17,6 +18,7 @@ export const identitySchema = (role, allowOptionalFields) => {
         email: emailValidation.nullable(),
         phone: phoneValidation.nullable(),
         dob_full: dobValidation(role).nullable(),
+        ssn_last4: string().nullable(),
         identification_number: ssnValidation.nullable(),
         address: addressSchema(allowOptionalFields),
     });

package/dist/collection/components/business-forms/schemas/schema-validations.js

@@ -78,6 +78,11 @@ export const dobValidation = (role) => {
 };
 export const ssnValidation = string()
     .matches(ssnRegex, 'Enter valid SSN')
+    .when('ssn_last4', {
+    is: (val) => !val || val.length === 0,
+    then: (schema) => schema.required('Enter SSN'),
+    otherwise: (schema) => schema.nullable(),
+})
     .test('not-repeat', 'Enter valid SSN', (value) => {
     return !/^(\d)\1+$/.test(value);
 })

package/dist/collection/components/business-list/business-list.js

@@ -60,7 +60,7 @@ export class BusinessList {
         this.loading = true;
         const endpoint = `entities/business`;
         let accountIDParam = { account_id: this.accountId };
-        const response = await Api(this.authToken, config.proxyApiOrigin)
+        const response = await Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin })
             .get(endpoint, Object.assign(Object.assign({}, accountIDParam), this.params));
         if (!response.error) {
             this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);

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

@@ -23,6 +23,10 @@ export class CheckoutCore {
         this.getCheckout = undefined;
         this.complete = undefined;
         this.checkoutId = undefined;
+        this.disableCreditCard = undefined;
+        this.disableBankAccount = undefined;
+        this.disableBnpl = undefined;
+        this.disablePaymentMethodGroup = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
         this.checkout = undefined;
@@ -101,8 +105,8 @@ export class CheckoutCore {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, null, h("div", { class: "row gy-3 jfi-checkout-core" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.checkout && (h("div", null, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+this.checkout.payment_amount)))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, bnpl: (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.bnpl, "client-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.payment_client_id, "account-id": (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.account_id, savedPaymentMethods: ((_j = this.checkout) === null || _j === void 0 ? void 0 : _j.payment_methods) || [], paymentAmount: (_k = this.checkout) === null || _k === void 0 ? void 0 : _k.payment_amount }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        var _a, _b, _c, _d, _e, _f;
+        return (h(Host, null, h("div", { class: "row gy-3 jfi-checkout-core" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.checkout && (h("div", null, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+this.checkout.payment_amount)))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, "show-saved-payment-methods": !this.disablePaymentMethodGroup, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, "client-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.payment_client_id, "account-id": (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.account_id, savedPaymentMethods: ((_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_methods) || [], paymentAmount: (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_amount }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
@@ -209,6 +213,74 @@ export class CheckoutCore {
                 },
                 "attribute": "checkout-id",
                 "reflect": false
+            },
+            "disableCreditCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-credit-card",
+                "reflect": false
+            },
+            "disableBankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bank-account",
+                "reflect": false
+            },
+            "disableBnpl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bnpl",
+                "reflect": false
+            },
+            "disablePaymentMethodGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-payment-method-group",
+                "reflect": false
             }
         };
     }

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

@@ -7,6 +7,10 @@ export class Checkout {
         this.iframeOrigin = undefined;
         this.authToken = undefined;
         this.checkoutId = undefined;
+        this.disableCreditCard = undefined;
+        this.disableBankAccount = undefined;
+        this.disableBnpl = undefined;
+        this.disablePaymentMethodGroup = undefined;
         this.getCheckout = undefined;
         this.complete = undefined;
         this.errorMessage = '';
@@ -39,7 +43,7 @@ export class Checkout {
         this.initializeGetCheckout();
     }
     render() {
-        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup }));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -94,6 +98,74 @@ export class Checkout {
                 },
                 "attribute": "checkout-id",
                 "reflect": false
+            },
+            "disableCreditCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-credit-card",
+                "reflect": false
+            },
+            "disableBankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bank-account",
+                "reflect": false
+            },
+            "disableBnpl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bnpl",
+                "reflect": false
+            },
+            "disablePaymentMethodGroup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-payment-method-group",
+                "reflect": false
             }
         };
     }

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

@@ -7072,16 +7072,16 @@ textarea.form-control-lg {
   cursor: pointer;
 }
 .payment-method-header input[type=radio] {
-  background-color: var(--jfi-radio-button-background-color);
-  border-color: var(--jfi-radio-button-border-color);
+  background-color: var(--jfi-radio-input-background-color);
+  border-color: var(--jfi-radio-input-border-color);
 }
 .payment-method-header input[type=radio]:checked, .payment-method-header input[type=radio]:checked:focus {
-  background-color: var(--jfi-radio-button-background-color-selected);
-  border-color: var(--jfi-radio-button-border-color-selected);
+  background-color: var(--jfi-radio-input-background-color-selected);
+  border-color: var(--jfi-radio-input-border-color-selected);
 }
 .payment-method-header input[type=radio]:focus {
-  border-color: var(--jfi-radio-button-border-color-focus);
-  box-shadow: var(--jfi-radio-button-box-shadow-focus);
+  border-color: var(--jfi-radio-input-border-color-focus);
+  box-shadow: var(--jfi-radio-input-box-shadow-focus);
 }
 .payment-method-header:hover {
   color: var(--jfi-radio-button-group-color-hover);

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

@@ -6,6 +6,8 @@ export class PaymentMethodOptions {
     constructor() {
         this.showCard = undefined;
         this.showAch = undefined;
+        this.showBnpl = undefined;
+        this.showSavedPaymentMethods = undefined;
         this.bnpl = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
@@ -24,8 +26,8 @@ export class PaymentMethodOptions {
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
-            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzel }));
+        if (this.showBnpl && ((_a = this.bnpl) === null || _a === void 0 ? void 0 : _a.provider) === 'sezzle') {
+            this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.sezzle }));
         }
         this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
     }
@@ -42,7 +44,7 @@ export class PaymentMethodOptions {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
-            const sezzel = paymentMethodOption.id === PaymentMethodTypes.sezzel;
+            const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
                 return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, "client-id": this.clientId, "account-id": this.accountId, "is-selected": isSelected, ref: (el) => {
                         if (isSelected) {
@@ -50,14 +52,14 @@ export class PaymentMethodOptions {
                         }
                     } }));
             }
-            else if (sezzel) {
-                return (h("justifi-sezzel-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (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 {
+            else if (this.showSavedPaymentMethods) {
                 return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
@@ -113,6 +115,40 @@ export class PaymentMethodOptions {
                 "attribute": "show-ach",
                 "reflect": false
             },
+            "showBnpl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-bnpl",
+                "reflect": false
+            },
+            "showSavedPaymentMethods": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-saved-payment-methods",
+                "reflect": false
+            },
             "bnpl": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/checkout/{sezzel-payment-method.js → sezzle-payment-method.js}

@@ -7,7 +7,7 @@ const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "http
         marginLeft: '5px',
         marginTop: '-5px',
     } }));
-export class SezzelPaymentMethod {
+export class SezzlePaymentMethod {
     constructor() {
         this.onPaymentMethodOptionClick = () => {
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
@@ -64,7 +64,7 @@ export class SezzelPaymentMethod {
         var _a, _b, _c, _d, _e;
         return (h("div", { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
-    static get is() { return "justifi-sezzel-payment-method"; }
+    static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
         return {
             "iframeOrigin": {

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

@@ -8,7 +8,7 @@ import mockGetCheckoutSuccess from "./../../../../../../mockData/mockGetCheckout
 import mockPostCheckoutSuccess from "./../../../../../../mockData/mockPostCheckoutSuccess.json";
 import { PaymentMethodOptions } from "../payment-method-options";
 describe('justifi-checkout-core', () => {
-    it('should display loading state correclty', async () => {
+    it('should display loading state correctly', async () => {
         const page = await newSpecPage({
             components: [CheckoutCore],
             template: () => h("justifi-checkout-core", null),

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js

@@ -37,7 +37,7 @@ export class PaymentBalanceTransactions {
             return;
         }
         const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
-        const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);
+        const response = await Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint, this.params);
         if (!response.error) {
             this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
             this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));

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

@@ -7,15 +7,26 @@ import { getErrorMessage } from "../../api/services/utils";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
-        this.card = true;
+        this.card = undefined;
         this.email = undefined;
         this.clientId = undefined;
+        this.authToken = undefined;
         this.accountId = undefined;
         this.submitButtonText = undefined;
         this.submitButtonEnabled = true;
         this.isLoading = false;
         this.selectedPaymentMethodType = PaymentMethodTypes.card;
     }
+    componentWillLoad() {
+        if (!this.validateProps()) {
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'clientId or authToken is required',
+                severity: ComponentErrorSeverity.ERROR
+            });
+            this.submitButtonEnabled = false;
+        }
+    }
     connectedCallback() {
         loadFontsOnParent();
     }
@@ -28,10 +39,33 @@ export class PaymentForm {
     async disableSubmitButton() {
         this.submitButtonEnabled = false;
     }
+    showPaymentMethodTypeSelector() {
+        return this.card && this.bankAccount;
+    }
+    getSelectedPaymentMethodType() {
+        if (this.showPaymentMethodTypeSelector()) {
+            return this.selectedPaymentMethodType;
+        }
+        else if (this.card) {
+            return PaymentMethodTypes.card;
+        }
+        else if (this.bankAccount) {
+            return PaymentMethodTypes.bankAccount;
+        }
+        else {
+            return PaymentMethodTypes.card;
+        }
+    }
     paymentMethodSelectedHandler(event) {
         const paymentMethodType = event.detail;
         this.selectedPaymentMethodType = paymentMethodType;
     }
+    validateProps() {
+        return !!(this.clientId || this.authToken);
+    }
+    getToken() {
+        return this.authToken || this.clientId;
+    }
     async submit(event) {
         event.preventDefault();
         if (!this.paymentMethodFormRef || !this.billingFormRef)
@@ -44,7 +78,7 @@ export class PaymentForm {
         try {
             const billingFormFieldValues = await this.billingFormRef.getValues();
             const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
-            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.getToken(), paymentMethodData, this.accountId);
             if (tokenizeResponse.error) {
                 this.errorEvent.emit({
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
@@ -66,7 +100,7 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(Host, null, h("form", { class: "row gy-3" }, this.card && this.bankAccount && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { selectedPaymentMethodType: this.selectedPaymentMethodType, onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(Host, null, h("form", { class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
@@ -124,8 +158,7 @@ export class PaymentForm {
                     "text": ""
                 },
                 "attribute": "card",
-                "reflect": false,
-                "defaultValue": "true"
+                "reflect": false
             },
             "email": {
                 "type": "string",
@@ -153,7 +186,7 @@ export class PaymentForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -161,6 +194,23 @@ export class PaymentForm {
                 "attribute": "client-id",
                 "reflect": false
             },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
             "accountId": {
                 "type": "string",
                 "mutable": false,

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

@@ -34,7 +34,7 @@ export class PaymentMethodSelector {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.saved | PaymentMethodTypes.sezzle",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",