@liberquack/utils/ui/components/payments/stripe/stripe-elements.js

Quack utilities

import { CreateCustomEvent } from "../../../ui-types.js";
import { useContext, useEffect, useState } from "haunted/lib/core.js";
import { StripeContext } from "./stripe-context.js";
import { html } from "lit";
import { fmt } from "../../../../fmt.js";
import { defineComponent } from "../../../util/define-component.js";
export const StripeElement = defineComponent("stripe-element", {
    func: function (props) {
        const stripeContext = useContext(StripeContext);
        const [stripeElm, setStripeElm] = useState(null);
        useEffect(() => {
            if (stripeContext?.stripeElements) {
                const stripeElm = stripeContext.stripeElements.create(props.type, props.opts);
                const container = document.createElement("div");
                stripeElm.mount(container);
                stripeElm.on("ready", (e) => {
                    this.dispatchEvent(CreateCustomEvent("elementready", { detail: e, bubbles: true }));
                });
                setStripeElm(container);
            }
        }, [stripeContext?.stripeElements]);
        return stripeElm;
    }
});
export const StripeSubmitErr = defineComponent("stripe-submit-error", {
    func: function () {
        const stripeContext = useContext(StripeContext);
        const err = stripeContext?.useSubmit?.err;
        if (!err) {
            return undefined;
        }
        return html `${fmt.err(err)}`;
    }
});
export const StripeSubmitClick = defineComponent("stripe-submit-click", {
    func: function () {
        const stripeContext = useContext(StripeContext);
        const submitCb = stripeContext?.useSubmit?.run;
        useEffect(() => {
            if (submitCb) {
                this.addEventListener("click", submitCb);
                return () => this.removeEventListener("click", submitCb);
            }
        }, [submitCb]);
    }
});
export const StripeSubmitForm = defineComponent("stripe-submit-form", {
    func: function () {
        const stripeContext = useContext(StripeContext);
        const submitCb = stripeContext?.useSubmit?.run;
        useEffect(() => {
            if (submitCb) {
                this.addEventListener("submit", submitCb);
                return () => this.removeEventListener("submit", submitCb);
            }
        }, [submitCb]);
    }
});
//# sourceMappingURL=stripe-elements.js.map