@justifi/webcomponents 4.12.2 → 4.13.0-rc.1

package/dist/module/business-core-info.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as BusinessTypeOptions, b as BusinessStructureOptions } from './business-form-types.js';
+import { a as businessTypeOptions, c as businessStructureOptions } from './business-form-options.js';
 import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks.js';
 import { C as CoreBusinessInfo } from './Business.js';
+import { d as defineCustomElement$4 } from './form-control-date2.js';
 import { d as defineCustomElement$3 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';
@@ -28,7 +29,7 @@ const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.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: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, error: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: businessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: businessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.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: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get style() { return businessCoreInfoCss; }
 }, [0, "justifi-business-core-info", {
@@ -40,13 +41,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-core-info", "form-control-number-masked", "form-control-select", "form-control-text"];
+    const components = ["justifi-business-core-info", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-core-info":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessCoreInfo);
             }
             break;
+        case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();

package/dist/module/business-form-options.js

@@ -0,0 +1,122 @@
+import { B as BusinessType, a as BusinessStructure } from './Business.js';
+
+const businessTypeOptions = [
+    {
+        label: 'Individual',
+        value: BusinessType.individual,
+    },
+    {
+        label: 'For Profit',
+        value: BusinessType.for_profit,
+    },
+    {
+        label: 'Non Profit',
+        value: BusinessType.non_profit,
+    },
+    {
+        label: 'Government Entity',
+        value: BusinessType.government_entity,
+    },
+];
+const businessStructureOptions = [
+    {
+        label: 'Choose business structure',
+        value: '',
+    },
+    {
+        label: 'Sole Proprietorship',
+        value: BusinessStructure.sole_proprietorship,
+    },
+    {
+        label: 'LLC (Single)',
+        value: BusinessStructure.single_llc,
+    },
+    {
+        label: 'LLC (Multiple)',
+        value: BusinessStructure.multi_llc,
+    },
+    {
+        label: 'Private Partnership',
+        value: BusinessStructure.private_partnership,
+    },
+    {
+        label: 'Private Corporation',
+        value: BusinessStructure.private_corporation,
+    },
+    {
+        label: 'Unincorporated Association',
+        value: BusinessStructure.unincorporated_association,
+    },
+    {
+        label: 'Public Partnership',
+        value: BusinessStructure.public_partnership,
+    },
+    {
+        label: 'Public Corporation',
+        value: BusinessStructure.public_corporation,
+    },
+    {
+        label: 'Incorporated',
+        value: BusinessStructure.incorporated,
+    },
+    {
+        label: 'Unincorporated',
+        value: BusinessStructure.unincorporated,
+    },
+    {
+        label: 'Government Unit',
+        value: BusinessStructure.government_unit,
+    },
+    {
+        label: 'Government Instrumentality',
+        value: BusinessStructure.government_instrumentality,
+    },
+    {
+        label: 'Tax Exempt Government Instrumentality',
+        value: BusinessStructure.tax_exempt_government_instrumentality,
+    },
+];
+const businessServiceReceivedOptions = [
+    {
+        label: 'Within 7 days',
+        value: 'Within 7 days',
+    },
+    {
+        label: 'Within 30 days',
+        value: 'Within 30 days',
+    },
+    {
+        label: 'Within 90 days',
+        value: 'Within 90 days',
+    },
+    {
+        label: 'Within 120 days',
+        value: 'Within 120 days',
+    },
+    {
+        label: 'More than 120 days',
+        value: 'More than 120 days',
+    }
+];
+const recurringPaymentsOptions = [
+    {
+        label: 'Yes',
+        value: 'Yes',
+    },
+    {
+        label: 'No',
+        value: 'No',
+    }
+];
+const seasonalBusinessOptions = [
+    {
+        label: 'Yes. The majority of the business revenue is generated in 3-6 months.',
+        value: 'Yes',
+    },
+    {
+        label: 'No. The business revenue is generated evenly throughout the year.',
+        value: 'No',
+    }
+];
+
+export { businessTypeOptions as a, businessServiceReceivedOptions as b, businessStructureOptions as c, recurringPaymentsOptions as r, seasonalBusinessOptions as s };

package/dist/module/business-form-types.js

@@ -1,4 +1,155 @@
-import { B as BusinessType, a as BusinessStructure } from './Business.js';
+import { a as create$6 } from './index.esm.js';
+import { S as StateOptions } from './state-options.js';
+import { a as businessTypeOptions, c as businessStructureOptions, b as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions } from './business-form-options.js';
+
+const transformEmptyString = (value) => {
+    return value === '' ? null : value;
+};
+const businessNameRegex = /^(?!^\s+$)[a-zA-Z0-9\s,&.-]*$/;
+const phoneRegex = /^\d{10}$/;
+const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
+const taxIdRegex = /^\d{9}$/;
+const stringLettersOnlyRegex = /^(?!^\s+$)[a-zA-Z\s]*$/;
+const numbersOnlyRegex = /^\d+$/;
+const ssnRegex = /^(?!000|666|9\d{2})\d{3}(?!00)\d{2}(?!0000)\d{4}$/;
+const streetAddressRegex = /^(?!^\s+$)[a-zA-Z0-9\s,&.-]*$/;
+const poBoxRegex = /P\.?\s?O\.?\s?Box|Postal\sBox/i;
+
+// Common Validations
+const emailValidation = create$6()
+    .email('Enter valid email')
+    .transform(transformEmptyString);
+const phoneValidation = create$6()
+    .matches(phoneRegex, 'Enter valid phone number')
+    .transform(transformEmptyString);
+// Core Info Validations
+const businessNameValidation = create$6()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid business name')
+    .transform(transformEmptyString);
+const doingBusinessAsValidation = create$6()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid doing business as')
+    .transform(transformEmptyString);
+const websiteUrlValidation = create$6()
+    .matches(urlRegex, 'Enter valid website url')
+    .transform(transformEmptyString);
+const businessTypeValidation = create$6()
+    .oneOf(businessTypeOptions.map((option) => option.value), 'Select business type')
+    .transform(transformEmptyString);
+const businessStructureValidation = create$6()
+    .oneOf(businessStructureOptions.map((option) => option.value), 'Select business structure')
+    .transform(transformEmptyString);
+const industryValidation = create$6()
+    .min(2, 'Industry must be at least 2 characters')
+    .max(50, 'Industry must be less than 50 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid industry')
+    .transform(transformEmptyString);
+const taxIdValidation = create$6()
+    .matches(taxIdRegex, 'Enter valid tax id')
+    .test('not-repeat', 'Enter valid tax id', (value) => {
+    return !/^(\d)\1+$/.test(value);
+})
+    .test('not-seq', 'Enter valid tax id', (value) => {
+    return value !== '123456789';
+})
+    .transform(transformEmptyString);
+const dateOfIncorporationValidation = create$6()
+    .test('not-future', 'Date of incorporation cannot be in the future', (value) => {
+    const inputDate = new Date(value);
+    const today = new Date();
+    return inputDate <= today;
+})
+    .transform(transformEmptyString);
+// Identity Validations
+const identityNameValidation = create$6()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid name')
+    .transform(transformEmptyString);
+const identityTitleValidation = create$6()
+    .min(2, 'Title must be at least 2 characters')
+    .max(50, 'Title must be less than 50 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid title')
+    .transform(transformEmptyString);
+const dobValidation = (role) => {
+    return (create$6()
+        .test('min', 'Enter a valid date', (value) => {
+        const date = new Date(value);
+        const minDate = new Date('1902-01-01');
+        return date >= minDate;
+    })
+        .test('age', `${role} must be at least 18 years old`, (value) => {
+        const date = new Date(value);
+        const minAgeDate = new Date();
+        minAgeDate.setFullYear(minAgeDate.getFullYear() - 18);
+        return date <= minAgeDate;
+    })
+        .transform(transformEmptyString));
+};
+const ssnValidation = create$6()
+    .matches(ssnRegex, 'Enter valid SSN')
+    .test('not-repeat', 'Enter valid SSN', (value) => {
+    return !/^(\d)\1+$/.test(value);
+})
+    .test('not-seq', 'Enter valid SSN', (value) => {
+    return value !== '123456789';
+})
+    .transform(transformEmptyString);
+// Address Validations
+const lineOneValidation = create$6()
+    .min(5, 'Address must be at least 5 characters')
+    .max(100, 'Address must be less than 100 characters')
+    .matches(streetAddressRegex, 'Enter valid address line 1')
+    .test('not-po-box', 'A PO Box is not a valid address entry', (value) => {
+    return !poBoxRegex.test(value);
+})
+    .transform(transformEmptyString);
+const lineTwoValidation = create$6()
+    .max(100, 'Address must be less than 100 characters')
+    .matches(streetAddressRegex, 'Enter valid address line 2')
+    .test('not-po-box', 'A PO Box is not a valid address entry', (value) => {
+    return !poBoxRegex.test(value);
+})
+    .transform(transformEmptyString);
+const cityValidation = create$6()
+    .min(2, 'City must be at least 2 characters')
+    .max(50, 'City must be less than 50 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid city')
+    .transform(transformEmptyString);
+const stateValidation = create$6()
+    .oneOf(StateOptions.map((option) => option.value), 'Select state')
+    .transform(transformEmptyString);
+const postalValidation = create$6()
+    .matches(/^[0-9]{5}$/, 'Enter valid postal code')
+    .transform(transformEmptyString);
+// Additional Questions Validations
+const revenueValidation = create$6()
+    .matches(numbersOnlyRegex, 'Enter valid revenue')
+    .transform(transformEmptyString);
+const paymentVolumeValidation = create$6()
+    .matches(numbersOnlyRegex, 'Enter valid payment volume')
+    .transform(transformEmptyString);
+const whenServiceReceivedValidation = create$6()
+    .oneOf(businessServiceReceivedOptions.map((option) => option.value), 'Select when service is received')
+    .transform(transformEmptyString);
+const recurringPaymentsValidation = create$6()
+    .oneOf(recurringPaymentsOptions.map((option) => option.value), 'Select recurring payments')
+    .transform(transformEmptyString);
+const recurringPaymentsPercentageValidation = create$6()
+    .when('business_recurring_payments', {
+    is: (val) => val === 'Yes',
+    then: (schema) => schema.required('Enter recurring payments percentage'),
+    otherwise: (schema) => schema.nullable(),
+})
+    .transform(transformEmptyString);
+const seasonalBusinessValidation = create$6()
+    .oneOf(seasonalBusinessOptions.map((option) => option.value), 'Select seasonal business')
+    .transform(transformEmptyString);
+const otherPaymentDetailsValidation = create$6()
+    .transform(transformEmptyString);
 
 var BusinessFormServerErrors;
 (function (BusinessFormServerErrors) {
@@ -24,85 +175,5 @@ var OwnerFormClickActions;
     OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
     OwnerFormClickActions["updateOwner"] = "updateOwner";
 })(OwnerFormClickActions || (OwnerFormClickActions = {}));
-const BusinessTypeOptions = [
-    {
-        label: 'Choose business type',
-        value: '',
-    },
-    {
-        label: 'Individual',
-        value: BusinessType.individual,
-    },
-    {
-        label: 'For Profit',
-        value: BusinessType.for_profit,
-    },
-    {
-        label: 'Non Profit',
-        value: BusinessType.non_profit,
-    },
-    {
-        label: 'Government Entity',
-        value: BusinessType.government_entity,
-    },
-];
-const BusinessStructureOptions = [
-    {
-        label: 'Choose business structure',
-        value: '',
-    },
-    {
-        label: 'Sole Proprietorship',
-        value: BusinessStructure.sole_proprietorship,
-    },
-    {
-        label: 'LLC (Single)',
-        value: BusinessStructure.single_llc,
-    },
-    {
-        label: 'LLC (Multiple)',
-        value: BusinessStructure.multi_llc,
-    },
-    {
-        label: 'Private Partnership',
-        value: BusinessStructure.private_partnership,
-    },
-    {
-        label: 'Private Corporation',
-        value: BusinessStructure.private_corporation,
-    },
-    {
-        label: 'Unincorporated Association',
-        value: BusinessStructure.unincorporated_association,
-    },
-    {
-        label: 'Public Partnership',
-        value: BusinessStructure.public_partnership,
-    },
-    {
-        label: 'Public Corporation',
-        value: BusinessStructure.public_corporation,
-    },
-    {
-        label: 'Incorporated',
-        value: BusinessStructure.incorporated,
-    },
-    {
-        label: 'Unincorporated',
-        value: BusinessStructure.unincorporated,
-    },
-    {
-        label: 'Government Unit',
-        value: BusinessStructure.government_unit,
-    },
-    {
-        label: 'Government Instrumentality',
-        value: BusinessStructure.government_instrumentality,
-    },
-    {
-        label: 'Tax Exempt Government Instrumentality',
-        value: BusinessStructure.tax_exempt_government_instrumentality,
-    },
-];
 
-export { BusinessFormServerErrors as B, OwnerFormClickActions as O, BusinessTypeOptions as a, BusinessStructureOptions as b, BusinessFormClickActions as c, OwnerFormServerErrors as d };
+export { postalValidation as A, BusinessFormServerErrors as B, OwnerFormServerErrors as C, OwnerFormClickActions as O, recurringPaymentsValidation as a, recurringPaymentsPercentageValidation as b, businessNameValidation as c, websiteUrlValidation as d, emailValidation as e, phoneValidation as f, doingBusinessAsValidation as g, businessTypeValidation as h, businessStructureValidation as i, industryValidation as j, dateOfIncorporationValidation as k, BusinessFormClickActions as l, identityNameValidation as m, identityTitleValidation as n, otherPaymentDetailsValidation as o, paymentVolumeValidation as p, dobValidation as q, revenueValidation as r, seasonalBusinessValidation as s, taxIdValidation as t, ssnValidation as u, lineOneValidation as v, whenServiceReceivedValidation as w, lineTwoValidation as x, cityValidation as y, stateValidation as z };

package/dist/module/business-identity-schema.js

@@ -1,6 +1,6 @@
 import { c as create$3 } from './index.esm.js';
 import { a as addressSchema } from './business-address-schema.js';
-import { h as identityNameValidation, j as identityTitleValidation, e as emailValidation, a as phoneValidation, k as dobValidation, s as ssnValidation } from './payload-parsers.js';
+import { m as identityNameValidation, n as identityTitleValidation, e as emailValidation, f as phoneValidation, q as dobValidation, u as ssnValidation } from './business-form-types.js';
 
 const identitySchema = (role, allowOptionalFields) => {
     const schema = create$3({

package/dist/module/business-representative-form-step.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { F as FormController } from './form.js';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
 import { A as Api } from './Api.js';
-import { r as parseIdentityInfo } from './payload-parsers.js';
+import { b as parseIdentityInfo } from './payload-parsers.js';
 import { i as identitySchema } from './business-identity-schema.js';
 import { c as config } from './config.js';
 import { B as BusinessFormServerErrors } from './business-form-types.js';

package/dist/module/checkout-core.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as extractComputedFontsToLoad, a as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
+import { C as ComponentErrorSeverity } from './ComponentError.js';
 import { d as defineCustomElement$8 } from './billing-form.js';
 import { d as defineCustomElement$7 } from './new-payment-method.js';
 import { d as defineCustomElement$6 } from './payment-method-form.js';
@@ -24,10 +25,19 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         this.__registerHost();
         this.__attachShadow();
         this.submitted = createEvent(this, "submitted", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.onSubmitted = (data) => {
             this.submitted.emit(data);
             this.isLoading = false;
         };
+        this.onError = ({ error, code, severity }) => {
+            this.errorEvent.emit({
+                errorCode: code,
+                message: error,
+                severity,
+            });
+            this.isLoading = false;
+        };
         this.loadingSpinner = (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
         this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
@@ -38,9 +48,7 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         this.isLoading = false;
         this.checkout = undefined;
         this.serverError = false;
-        this.errorMessage = '';
         this.creatingNewPaymentMethod = false;
-        this.selectedPaymentMethodToken = undefined;
     }
     componentWillLoad() {
         if (this.getCheckout) {
@@ -60,10 +68,14 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
                 this.checkout = new Checkout(checkout);
                 this.isLoading = false;
             },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
+            onError: ({ error, code, severity }) => {
                 this.isLoading = false;
-            },
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            }
         });
     }
     ;
@@ -84,23 +96,30 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         event.preventDefault();
         this.isLoading = true;
         const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod();
-        if (payload.token) {
+        if (!payload) {
+            this.isLoading = false;
+        }
+        else if (payload.error) {
+            this.onError({
+                code: payload.error.code,
+                error: payload.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (payload.token) {
             this.complete({
                 payment: { payment_mode: 'ecom', payment_token: payload.token },
                 onSuccess: this.onSubmitted,
-                onError: this.onSubmitted,
+                onError: this.onError,
             });
         }
         else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
             this.complete({
                 payment: { payment_mode: 'bnpl' },
                 onSuccess: this.onSubmitted,
-                onError: this.onSubmitted,
+                onError: this.onError,
             });
         }
-        else {
-            this.isLoading = false;
-        }
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -117,9 +136,7 @@ const CheckoutCore = /*@__PURE__*/ proxyCustomElement(class CheckoutCore extends
         "isLoading": [32],
         "checkout": [32],
         "serverError": [32],
-        "errorMessage": [32],
         "creatingNewPaymentMethod": [32],
-        "selectedPaymentMethodToken": [32],
         "loadFontsOnParent": [64]
     }]);
 function defineCustomElement() {

package/dist/module/form-control-file.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FormControlFile extends Components.FormControlFile, HTMLElement {}
+export const FormControlFile: {
+    prototype: FormControlFile;
+    new (): FormControlFile;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;