@justifi/webcomponents 4.8.3 → 4.9.1

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

@@ -0,0 +1,248 @@
+import { h, Host } from "@stencil/core";
+import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
+import { config } from "../../../config";
+export class CheckoutCore {
+    constructor() {
+        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.checkoutId = undefined;
+        this.hasLoadedFonts = false;
+        this.isLoading = false;
+        this.checkout = undefined;
+        this.serverError = false;
+        this.errorMessage = '';
+        this.creatingNewPaymentMethod = false;
+        this.selectedPaymentMethodToken = undefined;
+    }
+    componentWillLoad() {
+        if (this.getCheckout) {
+            this.fetchData();
+        }
+    }
+    connectedCallback() {
+        if (!this.hasLoadedFonts) {
+            this.loadFontsOnParent();
+            this.hasLoadedFonts = true;
+        }
+    }
+    fetchData() {
+        this.isLoading = true;
+        this.getCheckout({
+            onSuccess: ({ checkout }) => {
+                this.checkout = checkout;
+                this.isLoading = false;
+            },
+            onError: (errorMessage) => {
+                this.errorMessage = errorMessage;
+                this.isLoading = false;
+            },
+        });
+    }
+    ;
+    async loadFontsOnParent() {
+        const parent = document.body;
+        const fontsToLoad = extractComputedFontsToLoad();
+        if (!parent || !fontsToLoad) {
+            return null;
+        }
+        // This approach is needed to load the font in a parent of the component
+        const fonts = document.createElement('link');
+        fonts.rel = 'stylesheet';
+        fonts.href = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;
+        parent.append(fonts);
+    }
+    async submit(event) {
+        event.preventDefault();
+        this.isLoading = true;
+        const token = await this.paymentMethodOptionsRef.getPaymentMethodToken();
+        if (!token) {
+            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'))))));
+    }
+    static get is() { return "justifi-checkout-core"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkout-core.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkout-core.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the rendered iFrame. End-users need not use this."
+                },
+                "attribute": "iframe-origin",
+                "reflect": false,
+                "defaultValue": "config.iframeOrigin"
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "getCheckout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "pay": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "checkoutId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checkout-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLoadedFonts": {},
+            "isLoading": {},
+            "checkout": {},
+            "serverError": {},
+            "errorMessage": {},
+            "creatingNewPaymentMethod": {},
+            "selectedPaymentMethodToken": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CreatePaymentMethodResponse",
+                    "resolved": "BankAccountCreateResponse | CardCreateResponse",
+                    "references": {
+                        "CreatePaymentMethodResponse": {
+                            "location": "import",
+                            "path": "../payment-method-form/payment-method-responses",
+                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "loadFontsOnParent": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+import { makeGetCheckout, makePay } from "./checkout-actions";
+import { CheckoutService } from "../../api/services/checkout.service";
+export class Checkout {
+    constructor() {
+        this.iframeOrigin = undefined;
+        this.authToken = undefined;
+        this.checkoutId = undefined;
+        this.getCheckout = undefined;
+        this.pay = undefined;
+        this.errorMessage = '';
+    }
+    componentWillLoad() {
+        this.initializeGetCheckout();
+    }
+    initializeGetCheckout() {
+        if (this.authToken && this.checkoutId) {
+            this.getCheckout = makeGetCheckout({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+            this.pay = makePay({
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            });
+        }
+        else {
+            this.errorMessage = 'auth-token and checkout-id are required';
+        }
+    }
+    propChanged() {
+        this.initializeGetCheckout();
+    }
+    render() {
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, pay: this.pay }));
+    }
+    static get is() { return "justifi-checkout"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "iframe-origin",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "checkoutId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checkout-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "getCheckout": {},
+            "pay": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }, {
+                "propName": "checkoutId",
+                "methodName": "propChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,188 @@
+import { h } from "@stencil/core";
+import { config } from "../../../config";
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
+export class NewPaymentMethod {
+    constructor() {
+        this.onPaymentMethodOptionClick = () => {
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
+        };
+        this.iframeOrigin = config.iframeOrigin;
+        this.clientId = undefined;
+        this.accountId = undefined;
+        this.paymentMethodOption = undefined;
+        this.isSelected = undefined;
+    }
+    async getPaymentMethodToken() {
+        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();
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const paymentMethodData = Object.assign({}, billingFormFieldValues);
+            const clientId = this.clientId;
+            const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
+            if (tokenizeResponse.error) {
+                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+                return null;
+            }
+            const data = tokenizeResponse.data;
+            const tokenizedPaymentMethod = data.card || data.ach; // fix the response types to avoid this
+            return tokenizedPaymentMethod.token;
+        }
+        catch (error) {
+            console.error(`An error occured submitting the form: ${error}`);
+            return null;
+        }
+    }
+    showNewPaymentMethodForm() {
+        var _a;
+        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })));
+    }
+    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));
+    }
+    static get is() { return "justifi-new-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"
+            },
+            "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
+            }
+        };
+    }
+    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 {
+            "getPaymentMethodToken": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/checkout/payment-method-option-utils.js

@@ -0,0 +1,19 @@
+export class PaymentMethodOption {
+    constructor(paymentMethod) {
+        this.id = paymentMethod.id;
+        this.brand = paymentMethod.brand;
+        this.acct_last_four = paymentMethod.acct_last_four;
+    }
+}
+;
+export var CardBrandLabels;
+(function (CardBrandLabels) {
+    CardBrandLabels["american_express"] = "American Express";
+    CardBrandLabels["diners_club"] = "Diners Club";
+    CardBrandLabels["discover"] = "Discover";
+    CardBrandLabels["jcb"] = "JCB";
+    CardBrandLabels["mastercard"] = "Mastercard";
+    CardBrandLabels["china_unionpay"] = "UnionPay";
+    CardBrandLabels["visa"] = "Visa";
+    CardBrandLabels["unknown"] = "Unknown";
+})(CardBrandLabels || (CardBrandLabels = {}));