@justifi/webcomponents 4.11.0 → 4.12.1

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

@@ -1,13 +1,18 @@
 import { h, Host } from "@stencil/core";
 import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
+import { Checkout } from "../../api/Checkout";
 export class CheckoutCore {
     constructor() {
+        this.onSubmitted = (data) => {
+            this.submitted.emit(data);
+            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;
         this.getCheckout = undefined;
-        this.pay = undefined;
+        this.complete = undefined;
         this.checkoutId = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
@@ -32,7 +37,7 @@ export class CheckoutCore {
         this.isLoading = true;
         this.getCheckout({
             onSuccess: ({ checkout }) => {
-                this.checkout = checkout;
+                this.checkout = new Checkout(checkout);
                 this.isLoading = false;
             },
             onError: (errorMessage) => {
@@ -55,31 +60,31 @@ export class CheckoutCore {
         parent.append(fonts);
     }
     async submit(event) {
+        var _a;
         event.preventDefault();
         this.isLoading = true;
-        const token = await this.paymentMethodOptionsRef.getPaymentMethodToken();
-        if (!token) {
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod();
+        if (payload.token) {
+            this.complete({
+                payment: { payment_mode: 'ecom', payment_token: payload.token },
+                onSuccess: this.onSubmitted,
+                onError: this.onSubmitted,
+            });
+        }
+        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,
+            });
+        }
+        else {
             this.isLoading = false;
-            return;
         }
-        ;
-        this.pay({
-            paymentMethodToken: token,
-            onSuccess: ({ checkout }) => {
-                if (!checkout)
-                    return;
-                this.checkout = checkout;
-                this.isLoading = false;
-            },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
-                this.isLoading = false;
-            },
-        });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), this.checkout && (h("div", null, h("div", null, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, "Total ", formatCurrency(+this.checkout.payment_amount))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "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, "client-id": (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_client_id, "account-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.account_id, savedPaymentMethods: (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.payment_methods }))), 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, 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, _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'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
@@ -150,7 +155,7 @@ export class CheckoutCore {
                     "text": ""
                 }
             },
-            "pay": {
+            "complete": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -212,13 +217,13 @@ export class CheckoutCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "CreatePaymentMethodResponse",
-                    "resolved": "BankAccountCreateResponse | CardCreateResponse",
+                    "original": "ICheckoutCompleteResponse",
+                    "resolved": "IApiResponse<{ payment_mode: \"ecom\" | \"bnpl\"; payment_token: null; payment_status: string; payment_response: null; checkout_id: string; additional_transactions: any[]; checkout: ICheckout; }>",
                     "references": {
-                        "CreatePaymentMethodResponse": {
+                        "ICheckoutCompleteResponse": {
                             "location": "import",
-                            "path": "../payment-method-form/payment-method-responses",
-                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                            "path": "../../api/Checkout",
+                            "id": "src/api/Checkout.ts::ICheckoutCompleteResponse"
                         }
                     }
                 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makePay } from "./checkout-actions";
+import { makeGetCheckout, makeCheckoutComplete } from "./checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
 export class Checkout {
     constructor() {
@@ -7,7 +7,7 @@ export class Checkout {
         this.authToken = undefined;
         this.checkoutId = undefined;
         this.getCheckout = undefined;
-        this.pay = undefined;
+        this.complete = undefined;
         this.errorMessage = '';
     }
     componentWillLoad() {
@@ -20,7 +20,7 @@ export class Checkout {
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
             });
-            this.pay = makePay({
+            this.complete = makeCheckoutComplete({
                 authToken: this.authToken,
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
@@ -34,7 +34,7 @@ export class Checkout {
         this.initializeGetCheckout();
     }
     render() {
-        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, pay: this.pay }));
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
     }
     static get is() { return "justifi-checkout"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +96,7 @@ export class Checkout {
     static get states() {
         return {
             "getCheckout": {},
-            "pay": {},
+            "complete": {},
             "errorMessage": {}
         };
     }

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

@@ -15,14 +15,15 @@ export class NewPaymentMethod {
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async getPaymentMethodToken() {
+    async resolvePaymentMethod() {
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
             return;
-        return await this.tokenize();
+        const token = await this.tokenize();
+        return { token: token };
     }
     async tokenize() {
         try {
@@ -49,7 +50,7 @@ export class NewPaymentMethod {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { class: "payment-method" }, h("div", { class: `payment-method-header p-3 border-bottom`, 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" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { class: "payment-method" }, 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" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -166,17 +167,22 @@ export class NewPaymentMethod {
     }
     static get methods() {
         return {
-            "getPaymentMethodToken": {
+            "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<string>",
+                    "signature": "() => Promise<PaymentMethodPayload>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "./payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
                         }
                     },
-                    "return": "Promise<string>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",

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

@@ -7063,11 +7063,27 @@ textarea.form-control-lg {
 
 .payment-method-header {
   cursor: pointer;
+  color: var(--jfi-radio-button-group-color);
+  background-color: var(--jfi-radio-button-group-background-color);
+  border-bottom: var(--jfi-radio-button-group-divider);
 }
-.payment-method-header input,
+.payment-method-header input[type=radio],
 .payment-method-header label {
   cursor: pointer;
 }
+.payment-method-header input[type=radio] {
+  background-color: var(--jfi-radio-button-background-color);
+  border-color: var(--jfi-radio-button-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);
+}
+.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);
+}
 .payment-method-header:hover {
-  background-color: var(--bs-gray-100);
+  color: var(--jfi-radio-button-group-color-hover);
+  background-color: var(--jfi-radio-button-group-background-color-hover);
 }

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

@@ -6,14 +6,17 @@ export class PaymentMethodOptions {
     constructor() {
         this.showCard = undefined;
         this.showAch = undefined;
+        this.bnpl = undefined;
         this.clientId = undefined;
         this.accountId = undefined;
         this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
         this.selectedPaymentMethodId = undefined;
+        this.paymentAmount = undefined;
         this.paymentMethodOptions = [];
     }
     paymentMethodsChanged() {
+        var _a;
         this.paymentMethodOptions = this.savedPaymentMethods.map((paymentMethod) => new PaymentMethodOption(paymentMethod));
         if (this.showCard) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.card }));
@@ -21,14 +24,17 @@ 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 }));
+        }
         this.selectedPaymentMethodId = this.paymentMethodOptions[0].id;
     }
     paymentMethodOptionSelected(event) {
         this.selectedPaymentMethodId = event.detail.id;
     }
-    async getPaymentMethodToken() {
+    async resolvePaymentMethod() {
         var _a;
-        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.getPaymentMethodToken());
+        return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod());
     }
     render() {
         var _a;
@@ -36,6 +42,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;
             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) {
@@ -43,6 +50,13 @@ 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) => {
+                        if (isSelected) {
+                            this.selectedPaymentMethodOptionRef = el;
+                        }
+                    } }));
+            }
             else {
                 return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
                         if (isSelected) {
@@ -99,6 +113,27 @@ export class PaymentMethodOptions {
                 "attribute": "show-ach",
                 "reflect": false
             },
+            "bnpl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBnpl",
+                    "resolved": "IBnpl",
+                    "references": {
+                        "IBnpl": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::IBnpl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "clientId": {
                 "type": "string",
                 "mutable": false,
@@ -183,6 +218,23 @@ export class PaymentMethodOptions {
                 },
                 "attribute": "selected-payment-method-id",
                 "reflect": false
+            },
+            "paymentAmount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-amount",
+                "reflect": false
             }
         };
     }
@@ -211,17 +263,22 @@ export class PaymentMethodOptions {
     }
     static get methods() {
         return {
-            "getPaymentMethodToken": {
+            "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<string>",
+                    "signature": "() => Promise<PaymentMethodPayload>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "./payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
                         }
                     },
-                    "return": "Promise<string>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",

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

@@ -0,0 +1 @@
+export {};

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

@@ -10,14 +10,14 @@ export class SavedPaymentMethod {
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async getPaymentMethodToken() {
+    async resolvePaymentMethod() {
         var _a;
-        return (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return { token: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id };
     }
     ;
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Fragment, null, h("div", { class: "payment-method" }, h("div", { class: "payment-method-header p-3 border-bottom", 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" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+        return (h(Fragment, null, h("div", { class: "payment-method" }, 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" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
             _e.acct_last_four)))));
     }
     static get is() { return "justifi-saved-payment-method"; }
@@ -101,17 +101,22 @@ export class SavedPaymentMethod {
     }
     static get methods() {
         return {
-            "getPaymentMethodToken": {
+            "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<string>",
+                    "signature": "() => Promise<PaymentMethodPayload>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "./payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
                         }
                     },
-                    "return": "Promise<string>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",