@coras-io/embed 0.1.0

package/dist/views/payment-page/partials/stripe/stripe.component.js

@@ -0,0 +1,522 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+// @stripe/stripe-js ships no `exports` map, so its `/pure` subpath is a bare
+// directory that native ESM refuses to import (ERR_UNSUPPORTED_DIR_IMPORT).
+// Point at the concrete ESM artifact that `/pure` itself re-exports.
+import { loadStripe } from "@stripe/stripe-js/dist/pure.mjs";
+import "../../../../components/joined-fields/joined-fields.js";
+import "../../../../components/input-field/input-field.js";
+import styles from "./stripe.styles.js";
+import { localized, msg } from "@lit/localize";
+import { CSS_CLASSES, PLACEHOLDERS, PORTAL_UPDATE_DEBOUNCE_MS, INITIAL_PORTAL_UPDATE_DELAY_MS, } from "./stripe.constants.js";
+import { fireInternalEvent, } from "../../../../core/events.js";
+import { validateStripeKey, extractThemeColors, createStripeElementStyle, buildStripeAppearance, createPortalElement, positionPortalElement, createDebouncedRAF, normalizeLocale, normalizeCountry, normalizeCurrency, } from "./stripe.utils.js";
+let CorasStripe = class CorasStripe extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.cardNumberPortal = null;
+        this.cardExpiryPortal = null;
+        this.cardCvcPortal = null;
+        this.currency = "";
+        this.country = "US";
+        this.locale = "";
+        this.stripeKey = "";
+        this.externalError = "";
+        this.externalCardNumberError = "";
+        this.externalCardExpiryError = "";
+        this.externalCardCvcError = "";
+        this.portalZIndex = 1;
+        this.stripe = null;
+        this.elements = null;
+        this.paymentRequest = null;
+        this.canMakePayment = {
+            applePay: false,
+            googlePay: false,
+        };
+        this.isInitialized = false;
+        this.isLoading = false;
+        this.intersectionObserver = null;
+        this.cardNumberElement = null;
+        this.cardExpiryElement = null;
+        this.cardCvcElement = null;
+        this.cardNumberError = "";
+        this.cardExpiryError = "";
+        this.cardCvcError = "";
+        this.isCardNumberValid = false;
+        this.isCardExpiryValid = false;
+        this.isCardCvcValid = false;
+        this.debouncedPortalUpdate = null;
+        this.handleWindowEvent = () => {
+            this.debouncedPortalUpdate?.execute();
+        };
+        this.handleCardChange = (event) => {
+            const errorMessage = event.error?.message ?? "";
+            switch (event.elementType) {
+                case "cardNumber":
+                    this.cardNumberError = errorMessage;
+                    this.isCardNumberValid = event.complete;
+                    break;
+                case "cardExpiry":
+                    this.cardExpiryError = errorMessage;
+                    this.isCardExpiryValid = event.complete;
+                    break;
+                case "cardCvc":
+                    this.cardCvcError = errorMessage;
+                    this.isCardCvcValid = event.complete;
+                    break;
+            }
+            const allValid = this.isCardNumberValid && this.isCardExpiryValid && this.isCardCvcValid;
+            this.dispatchCardValidationChange(allValid && !event.error, errorMessage, event.elementType);
+        };
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializePortals();
+        this.setupEventListeners();
+        this.setupIntersectionObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupEventListeners();
+        this.cleanupIntersectionObserver();
+        this.cleanupPortals();
+        this.destroyStripeElements();
+    }
+    firstUpdated() {
+        void this.updateComplete.then(() => this.initializeStripe());
+        setTimeout(() => this.updatePortals(), INITIAL_PORTAL_UPDATE_DELAY_MS);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("locale")) {
+            this.initializeCardElement();
+            this.initializePaymentRequest();
+        }
+        else if (changedProperties.has("currency") ||
+            changedProperties.has("country")) {
+            this.initializePaymentRequest();
+        }
+        this.updatePortals();
+    }
+    initializePortals() {
+        this.cardNumberPortal = createPortalElement(CSS_CLASSES.STRIPE_PLACEHOLDER);
+        this.cardExpiryPortal = createPortalElement(CSS_CLASSES.STRIPE_PLACEHOLDER);
+        this.cardCvcPortal = createPortalElement(CSS_CLASSES.STRIPE_PLACEHOLDER);
+        document.body.appendChild(this.cardNumberPortal);
+        document.body.appendChild(this.cardExpiryPortal);
+        document.body.appendChild(this.cardCvcPortal);
+        this.debouncedPortalUpdate = createDebouncedRAF(() => this.positionAllPortals(), PORTAL_UPDATE_DEBOUNCE_MS);
+    }
+    cleanupPortals() {
+        this.debouncedPortalUpdate?.cancel();
+        this.debouncedPortalUpdate = null;
+        this.cardNumberPortal?.remove();
+        this.cardExpiryPortal?.remove();
+        this.cardCvcPortal?.remove();
+    }
+    setupEventListeners() {
+        window.addEventListener("resize", this.handleWindowEvent);
+        window.addEventListener("scroll", this.handleWindowEvent, true);
+    }
+    cleanupEventListeners() {
+        window.removeEventListener("resize", this.handleWindowEvent);
+        window.removeEventListener("scroll", this.handleWindowEvent, true);
+    }
+    setupIntersectionObserver() {
+        this.intersectionObserver = new IntersectionObserver(() => {
+            // Update portals on any visibility change (show or hide)
+            // When hidden, positionPortalElement will detect zero dimensions and hide portals
+            this.positionAllPortals();
+        }, { threshold: 0 });
+        this.intersectionObserver.observe(this);
+    }
+    cleanupIntersectionObserver() {
+        this.intersectionObserver?.disconnect();
+        this.intersectionObserver = null;
+    }
+    updatePortals() {
+        this.debouncedPortalUpdate?.execute();
+    }
+    positionAllPortals() {
+        const portals = [
+            {
+                placeholder: this.cardNumberPlaceholder,
+                portal: this.cardNumberPortal,
+            },
+            {
+                placeholder: this.cardExpiryPlaceholder,
+                portal: this.cardExpiryPortal,
+            },
+            {
+                placeholder: this.cardCvcPlaceholder,
+                portal: this.cardCvcPortal,
+            },
+        ];
+        for (const { placeholder, portal } of portals) {
+            positionPortalElement(placeholder, portal, this.portalZIndex);
+        }
+    }
+    destroyStripeElements() {
+        this.cardNumberElement?.destroy();
+        this.cardExpiryElement?.destroy();
+        this.cardCvcElement?.destroy();
+    }
+    async initializeStripe() {
+        if (!this.stripeKey) {
+            this.dispatchStripeError(new Error("Stripe key is required"));
+            return;
+        }
+        const validation = validateStripeKey(this.stripeKey);
+        if (!validation.isValid) {
+            this.dispatchStripeError(new Error(validation.error));
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const options = {};
+            if (this.locale) {
+                options.locale = normalizeLocale(this.locale);
+            }
+            this.stripe = await loadStripe(this.stripeKey, options);
+            if (this.stripe) {
+                // Theme the hosted card iframe to match the embed's surface, brand, and
+                // colour scheme (light/dark) — the per-element style only sets text.
+                this.elements = this.stripe.elements({
+                    appearance: buildStripeAppearance(getComputedStyle(this)),
+                });
+                this.initializeCardElement();
+                this.initializePaymentRequest();
+                this.isInitialized = true;
+                this.dispatchStripeInitialized();
+            }
+            else {
+                this.dispatchStripeError(new Error("Failed to initialize Stripe"));
+            }
+        }
+        catch (error) {
+            this.dispatchStripeError(error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    initializePaymentRequest() {
+        if (!this.stripe || !this.currency || !this.country) {
+            return;
+        }
+        try {
+            this.paymentRequest = this.stripe.paymentRequest({
+                country: normalizeCountry(this.country),
+                currency: normalizeCurrency(this.currency),
+                total: {
+                    label: "Total",
+                    amount: 100,
+                },
+                requestPayerName: true,
+                requestPayerEmail: true,
+            });
+            this.paymentRequest.on("paymentmethod", (event) => {
+                this.dispatchPaymentMethodAuthorized(event.paymentMethod, event);
+            });
+            this.paymentRequest
+                .canMakePayment()
+                .then((result) => {
+                const methods = {
+                    applePay: !!result?.applePay,
+                    googlePay: !!result?.googlePay,
+                };
+                this.canMakePayment = methods;
+                this.dispatchCanMakePaymentChange(methods);
+            })
+                .catch(() => {
+                this.resetWalletPaymentMethods();
+            });
+        }
+        catch {
+            this.paymentRequest = null;
+            this.resetWalletPaymentMethods();
+        }
+    }
+    resetWalletPaymentMethods() {
+        this.canMakePayment = { applePay: false, googlePay: false };
+    }
+    initializeCardElement() {
+        if (!this.elements ||
+            !this.cardNumberPortal ||
+            !this.cardExpiryPortal ||
+            !this.cardCvcPortal) {
+            return;
+        }
+        this.destroyStripeElements();
+        const computed = getComputedStyle(this);
+        const colors = extractThemeColors(computed);
+        const baseStyle = createStripeElementStyle(colors);
+        // Re-theme on re-init so a colour-scheme change is reflected in the iframe.
+        this.elements.update({ appearance: buildStripeAppearance(computed) });
+        this.cardNumberElement = this.elements.create("cardNumber", {
+            style: baseStyle,
+            placeholder: PLACEHOLDERS.CARD_NUMBER,
+        });
+        this.cardExpiryElement = this.elements.create("cardExpiry", {
+            style: baseStyle,
+            placeholder: PLACEHOLDERS.CARD_EXPIRY,
+        });
+        this.cardCvcElement = this.elements.create("cardCvc", {
+            style: baseStyle,
+            placeholder: PLACEHOLDERS.CARD_CVC,
+        });
+        this.cardNumberElement.on("change", this.handleCardChange);
+        this.cardExpiryElement.on("change", this.handleCardChange);
+        this.cardCvcElement.on("change", this.handleCardChange);
+        this.cardNumberElement.mount(this.cardNumberPortal);
+        this.cardExpiryElement.mount(this.cardExpiryPortal);
+        this.cardCvcElement.mount(this.cardCvcPortal);
+    }
+    // Event dispatchers
+    dispatchStripeInitialized() {
+        fireInternalEvent(this, "stripe-initialized", { stripe: this.stripe });
+    }
+    dispatchStripeError(error) {
+        fireInternalEvent(this, "stripe-error", { error });
+    }
+    dispatchCanMakePaymentChange(methods) {
+        fireInternalEvent(this, "can-make-payment-changed", methods);
+    }
+    dispatchCardValidationChange(isValid, error, elementType) {
+        fireInternalEvent(this, "card-validation-changed", {
+            isValid,
+            error,
+            elementType,
+        });
+    }
+    dispatchPaymentMethodAuthorized(paymentMethod, event) {
+        fireInternalEvent(this, "payment-method-authorized", {
+            paymentMethod,
+            event,
+        });
+    }
+    // Public API methods
+    /**
+     * Returns the initialized Stripe instance.
+     */
+    getStripe() {
+        return this.stripe;
+    }
+    /**
+     * Returns the PaymentRequest object for Apple Pay/Google Pay.
+     */
+    getPaymentRequest() {
+        return this.paymentRequest;
+    }
+    /**
+     * Returns the Stripe Elements instance.
+     */
+    getElements() {
+        return this.elements;
+    }
+    /**
+     * Returns the card number Stripe Element.
+     */
+    getCardNumberElement() {
+        return this.cardNumberElement;
+    }
+    /**
+     * Returns the initialization status of the Stripe component.
+     */
+    isStripeInitialized() {
+        return this.isInitialized;
+    }
+    /**
+     * Returns the available payment methods (Apple Pay/Google Pay).
+     */
+    getAvailablePaymentMethods() {
+        return { ...this.canMakePayment };
+    }
+    /**
+     * Focuses the card number input field.
+     */
+    focusCardNumber() {
+        this.cardNumberElement?.focus();
+    }
+    /**
+     * Clears all card input values.
+     */
+    clearCardInputs() {
+        this.cardNumberElement?.clear();
+        this.cardExpiryElement?.clear();
+        this.cardCvcElement?.clear();
+    }
+    /**
+     * Validates all card input elements and surfaces inline errors.
+     * Should be called before payment submission to ensure all fields are complete.
+     *
+     * @returns True if all card fields are valid and complete
+     */
+    async validateCardElements() {
+        let allValid = true;
+        const validations = [
+            {
+                isValid: this.isCardNumberValid,
+                currentError: this.cardNumberError,
+                defaultMessage: msg("Your card number is incomplete."),
+                elementType: "cardNumber",
+                setError: (e) => (this.cardNumberError = e),
+            },
+            {
+                isValid: this.isCardExpiryValid,
+                currentError: this.cardExpiryError,
+                defaultMessage: msg("Your card's expiration date is incomplete."),
+                elementType: "cardExpiry",
+                setError: (e) => (this.cardExpiryError = e),
+            },
+            {
+                isValid: this.isCardCvcValid,
+                currentError: this.cardCvcError,
+                defaultMessage: msg("Your card's security code is incomplete."),
+                elementType: "cardCvc",
+                setError: (e) => (this.cardCvcError = e),
+            },
+        ];
+        for (const validation of validations) {
+            if (!validation.isValid) {
+                allValid = false;
+                const message = validation.currentError || validation.defaultMessage;
+                validation.setError(message);
+                this.dispatchCardValidationChange(false, message, validation.elementType);
+            }
+        }
+        return allValid;
+    }
+    render() {
+        const numberError = this.externalCardNumberError ||
+            this.externalError ||
+            this.cardNumberError;
+        const expiryError = this.externalCardExpiryError || this.cardExpiryError;
+        const cvcError = this.externalCardCvcError || this.cardCvcError;
+        return html `
+      <div class="fields-container">
+        <coras-field
+          custom-field
+          ?error=${!!numberError}
+          ?validated=${!!numberError}
+          help-text=${numberError}
+        >
+          <div
+            id="card-number-placeholder"
+            class="${classMap({
+            [CSS_CLASSES.STRIPE_PLACEHOLDER]: true,
+            [CSS_CLASSES.ERROR]: !!numberError,
+            [CSS_CLASSES.LOADING]: this.isLoading,
+        })}"
+          ></div>
+        </coras-field>
+
+        <coras-joined-fields
+          ?validated=${!!(expiryError || cvcError)}
+          ?error=${!!(expiryError || cvcError)}
+          help-text=${expiryError || cvcError}
+        >
+          <coras-field
+            slot="left"
+            custom-field
+            ?error=${!!expiryError}
+            ?validated=${!!expiryError}
+            help-text=${""}
+          >
+            <div
+              id="card-expiry-placeholder"
+              class="${classMap({
+            [CSS_CLASSES.STRIPE_PLACEHOLDER]: true,
+            [CSS_CLASSES.LOADING]: this.isLoading,
+        })}"
+            ></div>
+          </coras-field>
+          <coras-field
+            slot="right"
+            custom-field
+            ?error=${!!cvcError}
+            ?validated=${!!cvcError}
+            help-text=${""}
+          >
+            <div
+              id="card-cvc-placeholder"
+              class="${classMap({
+            [CSS_CLASSES.STRIPE_PLACEHOLDER]: true,
+            [CSS_CLASSES.LOADING]: this.isLoading,
+        })}"
+            ></div>
+          </coras-field>
+        </coras-joined-fields>
+      </div>
+    `;
+    }
+};
+__decorate([
+    query("#card-number-placeholder")
+], CorasStripe.prototype, "cardNumberPlaceholder", void 0);
+__decorate([
+    query("#card-expiry-placeholder")
+], CorasStripe.prototype, "cardExpiryPlaceholder", void 0);
+__decorate([
+    query("#card-cvc-placeholder")
+], CorasStripe.prototype, "cardCvcPlaceholder", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardNumberPortal", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardExpiryPortal", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardCvcPortal", void 0);
+__decorate([
+    property({ type: String })
+], CorasStripe.prototype, "currency", void 0);
+__decorate([
+    property({ type: String })
+], CorasStripe.prototype, "country", void 0);
+__decorate([
+    property({ type: String })
+], CorasStripe.prototype, "locale", void 0);
+__decorate([
+    property({ type: String, attribute: "stripe-key" })
+], CorasStripe.prototype, "stripeKey", void 0);
+__decorate([
+    property({ type: String, attribute: "external-error" })
+], CorasStripe.prototype, "externalError", void 0);
+__decorate([
+    property({ type: String, attribute: "external-card-number-error" })
+], CorasStripe.prototype, "externalCardNumberError", void 0);
+__decorate([
+    property({ type: String, attribute: "external-card-expiry-error" })
+], CorasStripe.prototype, "externalCardExpiryError", void 0);
+__decorate([
+    property({ type: String, attribute: "external-card-cvc-error" })
+], CorasStripe.prototype, "externalCardCvcError", void 0);
+__decorate([
+    property({ type: Number, attribute: "portal-z-index" })
+], CorasStripe.prototype, "portalZIndex", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "isLoading", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardNumberError", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardExpiryError", void 0);
+__decorate([
+    state()
+], CorasStripe.prototype, "cardCvcError", void 0);
+CorasStripe = __decorate([
+    localized()
+], CorasStripe);
+export { CorasStripe };

package/dist/views/payment-page/partials/stripe/stripe.constants.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Constants for the Stripe payment component.
+ */
+/** Valid Stripe publishable key prefixes. */
+export declare const STRIPE_KEY_PREFIXES: readonly ["pk_test_", "pk_live_"];
+/** Minimum length for a valid Stripe publishable key. */
+export declare const STRIPE_KEY_MIN_LENGTH = 32;
+/** Debounce delay for portal position updates (ms). ~60fps */
+export declare const PORTAL_UPDATE_DEBOUNCE_MS = 16;
+/** Default timeout before initial portal positioning (ms). */
+export declare const INITIAL_PORTAL_UPDATE_DELAY_MS = 50;
+/** CSS class names used by the component. */
+export declare const CSS_CLASSES: {
+    readonly STRIPE_PLACEHOLDER: "stripe-placeholder";
+    readonly ERROR: "error";
+    readonly LOADING: "loading";
+};
+/** Default Stripe element style configuration. */
+export declare const DEFAULT_STRIPE_STYLE: {
+    readonly fontSize: "16px";
+    readonly lineHeight: "52px";
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+};
+/** Placeholder text for card input fields. */
+export declare const PLACEHOLDERS: {
+    readonly CARD_NUMBER: "1234 1234 1234 1234";
+    readonly CARD_EXPIRY: "MM / YY";
+    readonly CARD_CVC: "CVC";
+};
+/** CSS variable names for theming. */
+export declare const CSS_VARS: {
+    readonly FIELD_INPUT_COLOR: "--field-input-color";
+    readonly FIELD_INPUT_PLACEHOLDER_COLOR: "--field-input-placeholder-color";
+    readonly FIELD_INPUT_ERROR_COLOR: "--field-input-error-color";
+    readonly SURFACE: "--coras-color-surface";
+    readonly PRIMARY: "--coras-color-primary";
+    readonly FONT_FAMILY: "--coras-font-family-sans";
+    readonly BORDER_RADIUS: "--coras-radius-sm";
+};
+/** Default colors when CSS variables are not set. */
+export declare const DEFAULT_COLORS: {
+    readonly TEXT: "#32325d";
+    readonly PLACEHOLDER: "#aab7c4";
+    readonly ERROR: "#ef4444";
+    readonly BACKGROUND: "#ffffff";
+};

package/dist/views/payment-page/partials/stripe/stripe.constants.js

@@ -0,0 +1,48 @@
+/**
+ * Constants for the Stripe payment component.
+ */
+/** Valid Stripe publishable key prefixes. */
+export const STRIPE_KEY_PREFIXES = ["pk_test_", "pk_live_"];
+/** Minimum length for a valid Stripe publishable key. */
+export const STRIPE_KEY_MIN_LENGTH = 32;
+/** Debounce delay for portal position updates (ms). ~60fps */
+export const PORTAL_UPDATE_DEBOUNCE_MS = 16;
+/** Default timeout before initial portal positioning (ms). */
+export const INITIAL_PORTAL_UPDATE_DELAY_MS = 50;
+/** CSS class names used by the component. */
+export const CSS_CLASSES = {
+    STRIPE_PLACEHOLDER: "stripe-placeholder",
+    ERROR: "error",
+    LOADING: "loading",
+};
+/** Default Stripe element style configuration. */
+export const DEFAULT_STRIPE_STYLE = {
+    fontSize: "16px",
+    lineHeight: "52px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+};
+/** Placeholder text for card input fields. */
+export const PLACEHOLDERS = {
+    CARD_NUMBER: "1234 1234 1234 1234",
+    CARD_EXPIRY: "MM / YY",
+    CARD_CVC: "CVC",
+};
+/** CSS variable names for theming. */
+export const CSS_VARS = {
+    FIELD_INPUT_COLOR: "--field-input-color",
+    FIELD_INPUT_PLACEHOLDER_COLOR: "--field-input-placeholder-color",
+    FIELD_INPUT_ERROR_COLOR: "--field-input-error-color",
+    // Read for the Stripe Elements `appearance` so the hosted iframe matches the
+    // embed's surface, brand colour, and (light/dark) scheme.
+    SURFACE: "--coras-color-surface",
+    PRIMARY: "--coras-color-primary",
+    FONT_FAMILY: "--coras-font-family-sans",
+    BORDER_RADIUS: "--coras-radius-sm",
+};
+/** Default colors when CSS variables are not set. */
+export const DEFAULT_COLORS = {
+    TEXT: "#32325d",
+    PLACEHOLDER: "#aab7c4",
+    ERROR: "#ef4444",
+    BACKGROUND: "#ffffff",
+};

package/dist/views/payment-page/partials/stripe/stripe.d.ts

@@ -0,0 +1,8 @@
+import { CorasStripe } from "./stripe.component.js";
+export * from "./stripe.component.js";
+export default CorasStripe;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-stripe": CorasStripe;
+    }
+}

package/dist/views/payment-page/partials/stripe/stripe.js

@@ -0,0 +1,6 @@
+import { CorasStripe } from "./stripe.component.js";
+export * from "./stripe.component.js";
+export default CorasStripe;
+if (!customElements.get("coras-stripe")) {
+    customElements.define("coras-stripe", CorasStripe);
+}

package/dist/views/payment-page/partials/stripe/stripe.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;