@coras-io/embed 0.1.0

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

@@ -0,0 +1,102 @@
+import { css } from "lit";
+export default css `
+  .fields-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .card-container {
+    margin-bottom: 1.5rem;
+  }
+
+  .stripe-placeholder {
+    border: 1px solid
+      var(--field-input-border-color, var(--coras-color-neutral-400));
+    border-radius: var(--field-input-border-radius, 4px);
+    background-color: var(--coras-color-surface);
+    min-height: 3.2rem;
+    box-sizing: border-box;
+    padding-inline: 1rem;
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+  }
+
+  .stripe-placeholder:focus-within {
+    border-color: var(--field-input-focus-border-color, #3b82f6);
+    box-shadow: 0 0 0 3px
+      var(
+        --field-input-focus-shadow-color,
+        color-mix(in srgb, var(--coras-color-primary-500), transparent 90%)
+      );
+    outline: none;
+  }
+
+  .card-field-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 100%;
+  }
+
+  .card-field-container label {
+    display: block;
+    margin-bottom: var(--field-label-bottom-margin, 0.5rem);
+    font-size: var(--field-label-font-size, 0.875rem);
+    line-height: var(--field-label-line-height, 1.25rem);
+    color: var(--field-label-color, #4b5563);
+  }
+
+  .stripe-element {
+    border: 1px solid var(--field-input-border-color, #d1d5db);
+    border-radius: var(--field-input-border-radius, 0.25rem);
+    padding: 1rem;
+    background-color: var(--coras-color-surface);
+    min-height: 3.2rem;
+    box-sizing: border-box;
+  }
+
+  .stripe-element-error {
+    border-color: var(--field-input-error-color, #ef4444);
+  }
+
+  .stripe-placeholder.error {
+    border-color: var(--field-input-error-color, #ef4444);
+  }
+
+  .stripe-placeholder.disabled {
+    background-color: var(
+      --field-input-disabled-bg,
+      var(--coras-color-neutral-50)
+    );
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .stripe-placeholder.loading {
+    background: linear-gradient(
+      90deg,
+      var(--coras-color-neutral-50) 25%,
+      var(--coras-color-neutral-200) 50%,
+      var(--coras-color-neutral-50) 75%
+    );
+    background-size: 200% 100%;
+    animation: loading 1.5s ease-in-out infinite;
+  }
+
+  @keyframes loading {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  .error-message {
+    color: var(--field-input-error-color, #ef4444);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+  }
+`;

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

@@ -0,0 +1,72 @@
+/**
+ * Type definitions for the Stripe payment component.
+ */
+import type { Stripe, StripeCardNumberElementOptions, PaymentMethodCreateParams } from "@stripe/stripe-js";
+/** Validation state for a single card field. */
+export interface CardFieldValidation {
+    isValid: boolean;
+    error: string;
+}
+/** Combined validation state for all card fields. */
+export interface CardValidationState {
+    cardNumber: CardFieldValidation;
+    cardExpiry: CardFieldValidation;
+    cardCvc: CardFieldValidation;
+}
+/** Available wallet payment methods. */
+export interface WalletPaymentMethods {
+    applePay: boolean;
+    googlePay: boolean;
+}
+/** Event detail for stripe-initialized event. */
+export interface StripeInitializedEventDetail {
+    stripe: Stripe;
+}
+/** Event detail for stripe-error event. */
+export interface StripeErrorEventDetail {
+    error: unknown;
+}
+/** Event detail for can-make-payment-changed event. */
+export interface CanMakePaymentChangeEventDetail {
+    applePay: boolean;
+    googlePay: boolean;
+}
+/** Card element types for validation events. */
+export type CardElementType = "cardNumber" | "cardExpiry" | "cardCvc";
+/** Event detail for card-validation-changed event. */
+export interface CardValidationChangeEventDetail {
+    isValid: boolean;
+    error: string;
+    elementType: CardElementType;
+}
+/** Event detail for payment-method-authorized event. */
+export interface PaymentMethodAuthorizedEventDetail {
+    paymentMethod: PaymentMethodCreateParams;
+    event: unknown;
+}
+/** Stripe element style configuration. */
+export type StripeElementStyle = StripeCardNumberElementOptions["style"];
+/** Portal element configuration. */
+export interface PortalConfig {
+    placeholder: HTMLElement | null;
+    portal: HTMLElement | null;
+}
+/** Result of Stripe key validation. */
+export interface StripeKeyValidationResult {
+    isValid: boolean;
+    error?: string;
+}
+/** CSS variable values extracted from computed styles. */
+export interface ThemeColors {
+    textColor: string;
+    placeholderColor: string;
+    errorColor: string;
+}
+/** Custom event types emitted by the Stripe component. */
+export interface CorasStripeEventMap {
+    "stripe-initialized": CustomEvent<StripeInitializedEventDetail>;
+    "stripe-error": CustomEvent<StripeErrorEventDetail>;
+    "can-make-payment-changed": CustomEvent<CanMakePaymentChangeEventDetail>;
+    "card-validation-changed": CustomEvent<CardValidationChangeEventDetail>;
+    "payment-method-authorized": CustomEvent<PaymentMethodAuthorizedEventDetail>;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Type definitions for the Stripe payment component.
+ */
+export {};

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

@@ -0,0 +1,85 @@
+/**
+ * Utility functions for the Stripe payment component.
+ */
+import type { Appearance } from "@stripe/stripe-js";
+import type { StripeKeyValidationResult, ThemeColors, StripeElementStyle } from "./stripe.types.js";
+/**
+ * Validates a Stripe publishable key format.
+ * SECURITY: Prevents accidental use of secret keys or invalid keys.
+ *
+ * @param key - The Stripe key to validate
+ * @returns Validation result with isValid flag and optional error message
+ */
+export declare function validateStripeKey(key: string): StripeKeyValidationResult;
+/**
+ * Extracts theme colors from computed styles or returns defaults.
+ *
+ * @param computedStyle - The computed style object from getComputedStyle()
+ * @returns Theme colors for Stripe elements
+ */
+export declare function extractThemeColors(computedStyle: CSSStyleDeclaration): ThemeColors;
+/**
+ * Builds a Stripe Elements `appearance` from the resolved Coras tokens, so the
+ * hosted card iframe matches the embed's surface, brand colour, and colour
+ * scheme. The `night` theme and a dark `colorBackground` are selected
+ * automatically when the surface resolves to a dark colour (the light-dark()
+ * tokens already follow the mount's `color-scheme`).
+ */
+export declare function buildStripeAppearance(computed: CSSStyleDeclaration): Appearance;
+/**
+ * Creates a Stripe element style configuration based on theme colors.
+ *
+ * @param colors - Theme colors to apply
+ * @returns Stripe element style configuration
+ */
+export declare function createStripeElementStyle(colors: ThemeColors): StripeElementStyle;
+/**
+ * Creates a portal element for mounting Stripe elements outside Shadow DOM.
+ *
+ * @param className - CSS class to apply to the portal
+ * @returns The created portal element
+ */
+export declare function createPortalElement(className: string): HTMLElement;
+/**
+ * Positions a portal element to match a placeholder's position.
+ *
+ * @param placeholder - The placeholder element inside Shadow DOM
+ * @param portal - The portal element in the document body
+ * @param zIndex - The z-index value for the portal
+ * @param inlinePadding - Horizontal padding in rem units
+ */
+export declare function positionPortalElement(placeholder: HTMLElement | null, portal: HTMLElement | null, zIndex: number, inlinePadding?: number): void;
+/**
+ * Creates a debounced function that uses requestAnimationFrame.
+ * Useful for DOM operations that should be batched with the browser's paint cycle.
+ *
+ * @param fn - The function to debounce
+ * @param delay - Debounce delay in milliseconds
+ * @returns Object with the debounced function and a cancel method
+ */
+export declare function createDebouncedRAF(fn: () => void, delay: number): {
+    execute: () => void;
+    cancel: () => void;
+};
+/**
+ * Normalizes a locale string for Stripe's locale parameter.
+ * Stripe accepts locale codes like 'en', 'en-US', or 'auto'.
+ *
+ * @param locale - The locale string to normalize
+ * @returns Normalized locale or 'auto' if empty
+ */
+export declare function normalizeLocale(locale: string): string;
+/**
+ * Normalizes a country code to uppercase.
+ *
+ * @param country - The country code to normalize
+ * @returns Uppercase country code
+ */
+export declare function normalizeCountry(country: string): string;
+/**
+ * Normalizes a currency code to lowercase.
+ *
+ * @param currency - The currency code to normalize
+ * @returns Lowercase currency code
+ */
+export declare function normalizeCurrency(currency: string): string;

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

@@ -0,0 +1,228 @@
+/**
+ * Utility functions for the Stripe payment component.
+ */
+import { STRIPE_KEY_PREFIXES, STRIPE_KEY_MIN_LENGTH, DEFAULT_STRIPE_STYLE, CSS_VARS, DEFAULT_COLORS, } from "./stripe.constants.js";
+/** Secret key prefixes that must never be used on the client */
+const SECRET_KEY_PREFIXES = ["sk_test_", "sk_live_", "rk_test_", "rk_live_"];
+/**
+ * Validates a Stripe publishable key format.
+ * SECURITY: Prevents accidental use of secret keys or invalid keys.
+ *
+ * @param key - The Stripe key to validate
+ * @returns Validation result with isValid flag and optional error message
+ */
+export function validateStripeKey(key) {
+    if (!key) {
+        return { isValid: false, error: "Stripe key is required" };
+    }
+    // SECURITY: Reject secret keys - they must never be used on the client
+    const isSecretKey = SECRET_KEY_PREFIXES.some((prefix) => key.startsWith(prefix));
+    if (isSecretKey) {
+        // Log warning without exposing the key
+        console.error("SECURITY WARNING: Attempted to use a secret key on the client. " +
+            "Only publishable keys (pk_test_ or pk_live_) should be used in the browser.");
+        return {
+            isValid: false,
+            error: "Invalid key type. Only publishable keys should be used on the client.",
+        };
+    }
+    const hasValidPrefix = STRIPE_KEY_PREFIXES.some((prefix) => key.startsWith(prefix));
+    if (!hasValidPrefix) {
+        return {
+            isValid: false,
+            error: "Invalid Stripe key format. Must start with pk_test_ or pk_live_",
+        };
+    }
+    if (key.length < STRIPE_KEY_MIN_LENGTH) {
+        return {
+            isValid: false,
+            error: "Stripe key appears to be too short",
+        };
+    }
+    return { isValid: true };
+}
+/**
+ * Extracts theme colors from computed styles or returns defaults.
+ *
+ * @param computedStyle - The computed style object from getComputedStyle()
+ * @returns Theme colors for Stripe elements
+ */
+export function extractThemeColors(computedStyle) {
+    return {
+        textColor: computedStyle.getPropertyValue(CSS_VARS.FIELD_INPUT_COLOR).trim() ||
+            DEFAULT_COLORS.TEXT,
+        placeholderColor: computedStyle
+            .getPropertyValue(CSS_VARS.FIELD_INPUT_PLACEHOLDER_COLOR)
+            .trim() || DEFAULT_COLORS.PLACEHOLDER,
+        errorColor: computedStyle.getPropertyValue(CSS_VARS.FIELD_INPUT_ERROR_COLOR).trim() ||
+            DEFAULT_COLORS.ERROR,
+    };
+}
+/** True when a resolved CSS colour (rgb()/rgba()/#hex) reads as dark. */
+function isDarkColor(color) {
+    const parts = color.match(/[\d.]+/g);
+    if (!parts || parts.length < 3)
+        return false;
+    const [r, g, b] = parts.map(Number);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5;
+}
+/**
+ * Builds a Stripe Elements `appearance` from the resolved Coras tokens, so the
+ * hosted card iframe matches the embed's surface, brand colour, and colour
+ * scheme. The `night` theme and a dark `colorBackground` are selected
+ * automatically when the surface resolves to a dark colour (the light-dark()
+ * tokens already follow the mount's `color-scheme`).
+ */
+export function buildStripeAppearance(computed) {
+    const read = (name) => computed.getPropertyValue(name).trim();
+    const surface = read(CSS_VARS.SURFACE) || DEFAULT_COLORS.BACKGROUND;
+    return {
+        theme: isDarkColor(surface) ? "night" : "stripe",
+        variables: {
+            colorBackground: surface,
+            colorText: read(CSS_VARS.FIELD_INPUT_COLOR) || DEFAULT_COLORS.TEXT,
+            colorTextPlaceholder: read(CSS_VARS.FIELD_INPUT_PLACEHOLDER_COLOR) ||
+                DEFAULT_COLORS.PLACEHOLDER,
+            colorDanger: read(CSS_VARS.FIELD_INPUT_ERROR_COLOR) || DEFAULT_COLORS.ERROR,
+            colorPrimary: read(CSS_VARS.PRIMARY) || undefined,
+            fontFamily: read(CSS_VARS.FONT_FAMILY) || undefined,
+            borderRadius: read(CSS_VARS.BORDER_RADIUS) || undefined,
+        },
+    };
+}
+/**
+ * Creates a Stripe element style configuration based on theme colors.
+ *
+ * @param colors - Theme colors to apply
+ * @returns Stripe element style configuration
+ */
+export function createStripeElementStyle(colors) {
+    const style = {
+        base: {
+            fontSize: DEFAULT_STRIPE_STYLE.fontSize,
+            lineHeight: DEFAULT_STRIPE_STYLE.lineHeight,
+            color: colors.textColor,
+            fontFamily: DEFAULT_STRIPE_STYLE.fontFamily,
+            "::placeholder": {
+                color: colors.placeholderColor,
+            },
+            iconColor: colors.textColor,
+        },
+        invalid: {
+            color: colors.errorColor,
+            iconColor: colors.errorColor,
+        },
+    };
+    return style;
+}
+/**
+ * Creates a portal element for mounting Stripe elements outside Shadow DOM.
+ *
+ * @param className - CSS class to apply to the portal
+ * @returns The created portal element
+ */
+export function createPortalElement(className) {
+    const portal = document.createElement("div");
+    portal.classList.add(className);
+    portal.style.display = "none";
+    return portal;
+}
+/**
+ * Positions a portal element to match a placeholder's position.
+ *
+ * @param placeholder - The placeholder element inside Shadow DOM
+ * @param portal - The portal element in the document body
+ * @param zIndex - The z-index value for the portal
+ * @param inlinePadding - Horizontal padding in rem units
+ */
+export function positionPortalElement(placeholder, portal, zIndex, inlinePadding = 1) {
+    if (!placeholder || !portal)
+        return;
+    const rect = placeholder.getBoundingClientRect();
+    // Hide portal if placeholder has no dimensions or is hidden
+    if (rect.width === 0 || rect.height === 0) {
+        portal.style.display = "none";
+        return;
+    }
+    // Calculate padding in pixels (assuming 16px base font size)
+    const paddingPx = inlinePadding * 16;
+    const totalPadding = paddingPx * 2;
+    portal.style.display = "";
+    portal.style.position = "absolute";
+    portal.style.top = `${rect.top + window.scrollY}px`;
+    portal.style.left = `${rect.left + window.scrollX}px`;
+    portal.style.width = `${rect.width - totalPadding}px`;
+    portal.style.height = `${rect.height}px`;
+    portal.style.zIndex = `${zIndex}`;
+    portal.style.margin = "0";
+    portal.style.paddingInline = `${inlinePadding}rem`;
+}
+/**
+ * Creates a debounced function that uses requestAnimationFrame.
+ * Useful for DOM operations that should be batched with the browser's paint cycle.
+ *
+ * @param fn - The function to debounce
+ * @param delay - Debounce delay in milliseconds
+ * @returns Object with the debounced function and a cancel method
+ */
+export function createDebouncedRAF(fn, delay) {
+    let timeoutId = null;
+    let rafId = null;
+    const execute = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            rafId = requestAnimationFrame(() => {
+                fn();
+                rafId = null;
+            });
+            timeoutId = null;
+        }, delay);
+    };
+    const cancel = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    };
+    return { execute, cancel };
+}
+/**
+ * Normalizes a locale string for Stripe's locale parameter.
+ * Stripe accepts locale codes like 'en', 'en-US', or 'auto'.
+ *
+ * @param locale - The locale string to normalize
+ * @returns Normalized locale or 'auto' if empty
+ */
+export function normalizeLocale(locale) {
+    if (!locale || locale.trim() === "") {
+        return "auto";
+    }
+    return locale.trim();
+}
+/**
+ * Normalizes a country code to uppercase.
+ *
+ * @param country - The country code to normalize
+ * @returns Uppercase country code
+ */
+export function normalizeCountry(country) {
+    return country.toUpperCase();
+}
+/**
+ * Normalizes a currency code to lowercase.
+ *
+ * @param currency - The currency code to normalize
+ * @returns Lowercase currency code
+ */
+export function normalizeCurrency(currency) {
+    return currency.toLowerCase();
+}

package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.component.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../../../components/checkbox/checkbox.js";
+/**
+ * Terms and conditions checkbox component.
+ *
+ * Handles terms acceptance with error state display.
+ *
+ * Emits events:
+ * - `terms-changed`: When terms acceptance state changes
+ */
+export declare class CorasTermsCheckbox extends LitElement {
+    static styles: CSSResultGroup;
+    /** Whether terms are accepted */
+    checked: boolean;
+    /** Whether to show error state */
+    error: boolean;
+    /** Custom terms label (optional, uses default if not provided) */
+    label: string;
+    private handleTermsChange;
+    private getDefaultLabel;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.component.js

@@ -0,0 +1,65 @@
+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 { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { fireInternalEvent } from "../../../../core/events.js";
+import styles from "./terms-checkbox.styles.js";
+import "../../../../components/checkbox/checkbox.js";
+/**
+ * Terms and conditions checkbox component.
+ *
+ * Handles terms acceptance with error state display.
+ *
+ * Emits events:
+ * - `terms-changed`: When terms acceptance state changes
+ */
+let CorasTermsCheckbox = class CorasTermsCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether terms are accepted */
+        this.checked = false;
+        /** Whether to show error state */
+        this.error = false;
+        /** Custom terms label (optional, uses default if not provided) */
+        this.label = "";
+    }
+    static { this.styles = styles; }
+    handleTermsChange(e) {
+        e.stopPropagation();
+        fireInternalEvent(this, "terms-changed", { value: e.detail.value });
+    }
+    getDefaultLabel() {
+        return msg("I have read and agree to the terms and conditions.");
+    }
+    render() {
+        const displayLabel = this.label || this.getDefaultLabel();
+        return html `
+      <div class="terms-container">
+        <coras-checkbox
+          ?checked=${this.checked}
+          ?error=${this.error}
+          label="${displayLabel}"
+          @value-changed=${this.handleTermsChange}
+        ></coras-checkbox>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], CorasTermsCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasTermsCheckbox.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], CorasTermsCheckbox.prototype, "label", void 0);
+CorasTermsCheckbox = __decorate([
+    localized()
+], CorasTermsCheckbox);
+export { CorasTermsCheckbox };

package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.d.ts

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

package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.js

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

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

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

package/dist/views/payment-page/partials/terms-checkbox/terms-checkbox.styles.js

@@ -0,0 +1,12 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+  }
+
+  .terms-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+`;