@justifi/webcomponents 4.11.0 → 4.12.0

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": "",

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

@@ -0,0 +1,247 @@
+import { h } from "@stencil/core";
+import { config } from "../../../config";
+import { formatCurrency } from "../../utils/utils";
+const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
+        display: 'inline',
+        width: '80px',
+        marginLeft: '5px',
+        marginTop: '-5px',
+    } }));
+export class SezzelPaymentMethod {
+    constructor() {
+        this.onPaymentMethodOptionClick = () => {
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const bnpl = this.bnpl;
+            const amount = +this.paymentAmount; // convert to number
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: bnpl.provider_client_id,
+                apiMode: bnpl.provider_mode,
+                apiVersion: bnpl.provider_api_version,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: bnpl.provider_checkout_url
+                    });
+                },
+                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
+            });
+            this.sezzleCheckout = checkout;
+            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.bnpl = undefined;
+        this.clientId = undefined;
+        this.accountId = undefined;
+        this.paymentMethodOption = undefined;
+        this.isSelected = undefined;
+        this.paymentAmount = undefined;
+        this.installmentPlan = undefined;
+        this.sezzleCheckout = undefined;
+        this.sezzlePromise = undefined;
+    }
+    componentDidRender() {
+        this.scriptRef.onload = () => {
+            this.sezzleButtonRef = document.createElement('button');
+            this.initializeSezzleCheckout();
+        };
+    }
+    async resolvePaymentMethod() {
+        this.sezzleButtonRef.click();
+        return this.sezzlePromise;
+    }
+    render() {
+        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 properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iframeOrigin"
+            },
+            "bnpl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "bnpl",
+                "reflect": false
+            },
+            "clientId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-id",
+                "reflect": false
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "paymentMethodOption": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentMethodOption",
+                    "resolved": "PaymentMethodOption",
+                    "references": {
+                        "PaymentMethodOption": {
+                            "location": "import",
+                            "path": "./payment-method-option-utils",
+                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "isSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-selected",
+                "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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "installmentPlan": {},
+            "sezzleCheckout": {},
+            "sezzlePromise": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodOptionSelected",
+                "name": "paymentMethodOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resolvePaymentMethod": {
+                "complexType": {
+                    "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<PaymentMethodPayload>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}