@coras-io/embed 0.2.0 → 0.4.0

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

@@ -1,43 +1,30 @@
-/**
- * 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 SURFACE: "--coras-color-field";
     readonly PRIMARY: "--coras-color-primary";
     readonly FONT_FAMILY: "--coras-font-family-sans";
-    readonly BORDER_RADIUS: "--coras-radius-sm";
+    readonly BORDER_RADIUS: "--coras-radius-field";
 };
-/** Default colors when CSS variables are not set. */
 export declare const DEFAULT_COLORS: {
     readonly TEXT: "#32325d";
     readonly PLACEHOLDER: "#aab7c4";

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

@@ -1,45 +1,32 @@
-/**
- * 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",
+    SURFACE: "--coras-color-field",
     PRIMARY: "--coras-color-primary",
     FONT_FAMILY: "--coras-font-family-sans",
-    BORDER_RADIUS: "--coras-radius-sm",
+    // The Stripe card element sits in the same row as the embed's own text
+    // fields, so it takes the field radius rather than the general radius scale.
+    BORDER_RADIUS: "--coras-radius-field",
 };
-/** Default colors when CSS variables are not set. */
 export const DEFAULT_COLORS = {
     TEXT: "#32325d",
     PLACEHOLDER: "#aab7c4",

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

@@ -11,10 +11,9 @@ export default css `
   }
 
   .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);
+    border: 1px solid var(--field-input-border-color);
+    border-radius: var(--field-input-border-radius);
+    background-color: var(--coras-color-field);
     min-height: 3.2rem;
     box-sizing: border-box;
     padding-inline: 1rem;
@@ -24,12 +23,9 @@ export default css `
   }
 
   .stripe-placeholder:focus-within {
-    border-color: var(--field-input-focus-border-color, #3b82f6);
+    border-color: var(--field-input-focused-border-color);
     box-shadow: 0 0 0 3px
-      var(
-        --field-input-focus-shadow-color,
-        color-mix(in srgb, var(--coras-color-primary-500), transparent 90%)
-      );
+      color-mix(in srgb, var(--coras-color-primary), transparent 90%);
     outline: none;
   }
 
@@ -42,34 +38,31 @@ export default css `
 
   .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);
+    margin-bottom: var(--field-label-bottom-margin);
+    font-size: var(--field-label-font-size);
+    line-height: var(--field-label-line-height);
+    color: var(--field-label-color);
   }
 
   .stripe-element {
-    border: 1px solid var(--field-input-border-color, #d1d5db);
-    border-radius: var(--field-input-border-radius, 0.25rem);
+    border: 1px solid var(--field-input-border-color);
+    border-radius: var(--field-input-border-radius);
     padding: 1rem;
-    background-color: var(--coras-color-surface);
+    background-color: var(--coras-color-field);
     min-height: 3.2rem;
     box-sizing: border-box;
   }
 
   .stripe-element-error {
-    border-color: var(--field-input-error-color, #ef4444);
+    border-color: var(--field-input-error-color);
   }
 
   .stripe-placeholder.error {
-    border-color: var(--field-input-error-color, #ef4444);
+    border-color: var(--field-input-error-color);
   }
 
   .stripe-placeholder.disabled {
-    background-color: var(
-      --field-input-disabled-bg,
-      var(--coras-color-neutral-50)
-    );
+    background-color: var(--coras-color-neutral-50);
     cursor: not-allowed;
     opacity: 0.6;
   }
@@ -95,7 +88,7 @@ export default css `
   }
 
   .error-message {
-    color: var(--field-input-error-color, #ef4444);
+    color: var(--field-input-error-color);
     font-size: 0.875rem;
     margin-top: 0.5rem;
   }

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

@@ -12,20 +12,21 @@ import type { StripeKeyValidationResult, ThemeColors, StripeElementStyle } from
  */
 export declare function validateStripeKey(key: string): StripeKeyValidationResult;
 /**
- * Extracts theme colors from computed styles or returns defaults.
+ * Extracts theme colors from the host's resolved tokens or returns defaults.
  *
- * @param computedStyle - The computed style object from getComputedStyle()
- * @returns Theme colors for Stripe elements
+ * @param host - The element whose Coras tokens theme the Stripe elements
+ * @returns Theme colors for Stripe elements, as concrete `rgb(...)` values
  */
-export declare function extractThemeColors(computedStyle: CSSStyleDeclaration): ThemeColors;
+export declare function extractThemeColors(host: HTMLElement): 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`).
+ * scheme. Colours and the radius are resolved to concrete values Stripe accepts
+ * (see `withTokenResolver`); the `night` theme and a dark `colorBackground` are
+ * selected automatically when the surface resolves to a dark colour, which the
+ * probe evaluates against the mount's `color-scheme`.
  */
-export declare function buildStripeAppearance(computed: CSSStyleDeclaration): Appearance;
+export declare function buildStripeAppearance(host: HTMLElement): Appearance;
 /**
  * Creates a Stripe element style configuration based on theme colors.
  *
@@ -43,6 +44,12 @@ export declare function createPortalElement(className: string): HTMLElement;
 /**
  * Positions a portal element to match a placeholder's position.
  *
+ * The coordinates are document-relative, so a host page that scrolls the window
+ * moves the portal with the document and every recomputed value is identical.
+ * Only a scroll in an ancestor container (the Studio preview frame) actually
+ * moves the placeholder under the portal. Tracking runs every frame, so an
+ * unchanged position returns without writing and costs that host page nothing.
+ *
  * @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
@@ -50,14 +57,18 @@ export declare function createPortalElement(className: string): HTMLElement;
  */
 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.
+ * Coalesces repeated calls into one run in the next animation frame.
+ *
+ * Portal tracking has to keep up with a scroll that is still in progress. A
+ * trailing debounce cannot: each scroll event restarts its timer, so the portals
+ * hold their stale position for the whole gesture and only catch up once the
+ * scroll stops. Running on every frame that had at least one call matches the
+ * rate the portals are painted at.
  *
- * @param fn - The function to debounce
- * @param delay - Debounce delay in milliseconds
- * @returns Object with the debounced function and a cancel method
+ * @param fn - The function to run, at most once per frame
+ * @returns Object with the throttled function and a cancel method
  */
-export declare function createDebouncedRAF(fn: () => void, delay: number): {
+export declare function createFrameThrottle(fn: () => void): {
     execute: () => void;
     cancel: () => void;
 };

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

@@ -42,21 +42,56 @@ export function validateStripeKey(key) {
     return { isValid: true };
 }
 /**
- * Extracts theme colors from computed styles or returns defaults.
+ * Runs `use` with a resolver that turns the Coras token expressions
+ * (`var()`, `light-dark()`, `calc()`) into the concrete `rgb(...)` / px strings
+ * Stripe accepts. Stripe silently drops a `light-dark(...)` colour and a
+ * `calc(.../)` length, so every token value must be resolved before it is handed
+ * to Stripe (otherwise the card iframe falls back to Stripe's own defaults).
  *
- * @param computedStyle - The computed style object from getComputedStyle()
- * @returns Theme colors for Stripe elements
+ * Each value is applied to a hidden probe mounted in the host's own scope, so it
+ * inherits the same custom properties and `color-scheme`, then read back from
+ * `getComputedStyle`. An empty input is returned unchanged so callers keep their
+ * own fallbacks.
  */
-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() ||
+function withTokenResolver(host, use) {
+    const probe = document.createElement("span");
+    probe.style.position = "absolute";
+    probe.style.visibility = "hidden";
+    probe.style.pointerEvents = "none";
+    const root = host.shadowRoot ?? host;
+    root.appendChild(probe);
+    try {
+        return use((value, as) => {
+            if (!value)
+                return value;
+            if (as === "color") {
+                probe.style.color = value;
+                return getComputedStyle(probe).color || value;
+            }
+            probe.style.borderTopLeftRadius = value;
+            return getComputedStyle(probe).borderTopLeftRadius || value;
+        });
+    }
+    finally {
+        probe.remove();
+    }
+}
+/**
+ * Extracts theme colors from the host's resolved tokens or returns defaults.
+ *
+ * @param host - The element whose Coras tokens theme the Stripe elements
+ * @returns Theme colors for Stripe elements, as concrete `rgb(...)` values
+ */
+export function extractThemeColors(host) {
+    const computed = getComputedStyle(host);
+    const read = (name) => computed.getPropertyValue(name).trim();
+    return withTokenResolver(host, (resolve) => ({
+        textColor: resolve(read(CSS_VARS.FIELD_INPUT_COLOR), "color") || DEFAULT_COLORS.TEXT,
+        placeholderColor: resolve(read(CSS_VARS.FIELD_INPUT_PLACEHOLDER_COLOR), "color") ||
+            DEFAULT_COLORS.PLACEHOLDER,
+        errorColor: resolve(read(CSS_VARS.FIELD_INPUT_ERROR_COLOR), "color") ||
             DEFAULT_COLORS.ERROR,
-    };
+    }));
 }
 /** True when a resolved CSS colour (rgb()/rgba()/#hex) reads as dark. */
 function isDarkColor(color) {
@@ -69,26 +104,31 @@ function isDarkColor(color) {
 /**
  * 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`).
+ * scheme. Colours and the radius are resolved to concrete values Stripe accepts
+ * (see `withTokenResolver`); the `night` theme and a dark `colorBackground` are
+ * selected automatically when the surface resolves to a dark colour, which the
+ * probe evaluates against the mount's `color-scheme`.
  */
-export function buildStripeAppearance(computed) {
+export function buildStripeAppearance(host) {
+    const computed = getComputedStyle(host);
     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,
-        },
-    };
+    return withTokenResolver(host, (resolve) => {
+        const color = (name) => resolve(read(name), "color");
+        const surface = color(CSS_VARS.SURFACE) || DEFAULT_COLORS.BACKGROUND;
+        return {
+            theme: isDarkColor(surface) ? "night" : "stripe",
+            variables: {
+                colorBackground: surface,
+                colorText: color(CSS_VARS.FIELD_INPUT_COLOR) || DEFAULT_COLORS.TEXT,
+                colorTextPlaceholder: color(CSS_VARS.FIELD_INPUT_PLACEHOLDER_COLOR) ||
+                    DEFAULT_COLORS.PLACEHOLDER,
+                colorDanger: color(CSS_VARS.FIELD_INPUT_ERROR_COLOR) || DEFAULT_COLORS.ERROR,
+                colorPrimary: color(CSS_VARS.PRIMARY) || undefined,
+                fontFamily: read(CSS_VARS.FONT_FAMILY) || undefined,
+                borderRadius: resolve(read(CSS_VARS.BORDER_RADIUS), "length") || undefined,
+            },
+        };
+    });
 }
 /**
  * Creates a Stripe element style configuration based on theme colors.
@@ -130,6 +170,12 @@ export function createPortalElement(className) {
 /**
  * Positions a portal element to match a placeholder's position.
  *
+ * The coordinates are document-relative, so a host page that scrolls the window
+ * moves the portal with the document and every recomputed value is identical.
+ * Only a scroll in an ancestor container (the Studio preview frame) actually
+ * moves the placeholder under the portal. Tracking runs every frame, so an
+ * unchanged position returns without writing and costs that host page nothing.
+ *
  * @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
@@ -147,51 +193,54 @@ export function positionPortalElement(placeholder, portal, zIndex, inlinePadding
     // Calculate padding in pixels (assuming 16px base font size)
     const paddingPx = inlinePadding * 16;
     const totalPadding = paddingPx * 2;
+    const top = `${rect.top + window.scrollY}px`;
+    const left = `${rect.left + window.scrollX}px`;
+    const width = `${rect.width - totalPadding}px`;
+    const height = `${rect.height}px`;
+    if (portal.style.display === "" &&
+        portal.style.top === top &&
+        portal.style.left === left &&
+        portal.style.width === width &&
+        portal.style.height === height) {
+        return;
+    }
     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.top = top;
+    portal.style.left = left;
+    portal.style.width = width;
+    portal.style.height = height;
     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.
+ * Coalesces repeated calls into one run in the next animation frame.
+ *
+ * Portal tracking has to keep up with a scroll that is still in progress. A
+ * trailing debounce cannot: each scroll event restarts its timer, so the portals
+ * hold their stale position for the whole gesture and only catch up once the
+ * scroll stops. Running on every frame that had at least one call matches the
+ * rate the portals are painted at.
  *
- * @param fn - The function to debounce
- * @param delay - Debounce delay in milliseconds
- * @returns Object with the debounced function and a cancel method
+ * @param fn - The function to run, at most once per frame
+ * @returns Object with the throttled function and a cancel method
  */
-export function createDebouncedRAF(fn, delay) {
-    let timeoutId = null;
+export function createFrameThrottle(fn) {
     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);
+        if (rafId !== null)
+            return;
+        rafId = requestAnimationFrame(() => {
+            rafId = null;
+            fn();
+        });
     };
     const cancel = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            timeoutId = null;
-        }
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-        }
+        if (rafId === null)
+            return;
+        cancelAnimationFrame(rafId);
+        rafId = null;
     };
     return { execute, cancel };
 }

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

@@ -7,6 +7,6 @@ export default css `
   .terms-container {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
+    gap: 0.25rem;
   }
 `;

package/dist/views/payment-page/payment-page.component.d.ts

@@ -204,6 +204,7 @@ export declare class CorasPaymentPage extends CorasPaymentPage_base {
     private getShortestExpirationSeconds;
     private getTotalQuantity;
     private getTotalPriceFormatted;
+    private renderPaymentSkeleton;
     private renderContent;
     private getLoyaltyAccountUrl;
     private renderSuccess;

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

@@ -54,6 +54,7 @@ import { FormValidationController } from "./controllers/form-validation.controll
 import { LayoutController } from "./controllers/layout.controller.js";
 import { CryptoAuthController } from "./controllers/crypto-auth.controller.js";
 import { CryptoTransferController, } from "./controllers/crypto-transfer.controller.js";
+import { getApiLanguageCode } from "../../core/utils/locale.js";
 /**
  * Payment page component for processing checkout and payments.
  *
@@ -169,7 +170,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
         this.countriesTask = new Task(this, {
             autoRun: false,
             task: async () => {
-                const language_code = this.locale.split("-")[0] || "en";
+                const language_code = getApiLanguageCode(this.locale);
                 const { data, error } = await this.getApiService().fetchCountries(language_code);
                 if (error) {
                     console.error("Error fetching countries:", error);
@@ -254,7 +255,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
         this.reservationsCheckTask = new Task(this, {
             autoRun: false,
             task: async () => {
-                const bookingSession = getBookingSession();
+                const bookingSession = getBookingSession(this.distributorID);
                 // No session means there is nothing to check out: a legitimate empty
                 // state (lost/expired session, or the branding preview), not an error.
                 // Returning empty keeps the error modal reserved for real API failures.
@@ -271,7 +272,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
         this.reservationsTask = new Task(this, {
             autoRun: false,
             task: async () => {
-                const bookingSession = getBookingSession();
+                const bookingSession = getBookingSession(this.distributorID);
                 if (!bookingSession) {
                     return {
                         reservations: null,
@@ -1161,7 +1162,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
                 this.scrollToFirstError();
                 return null;
             }
-            const bookingSession = getBookingSession();
+            const bookingSession = getBookingSession(this.distributorID);
             if (!bookingSession) {
                 console.error("Cannot confirm reservation: booking session is missing.");
                 return null;
@@ -1210,7 +1211,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
                 this.userId = responseData.user_id;
                 this.pendingClientSecret = responseData.client_secret ?? null;
                 // Invalidate booking session so a page refresh cannot replay the reservation
-                removeBookingSession();
+                removeBookingSession(this.distributorID);
                 return responseData;
             }
             return null;
@@ -1441,6 +1442,15 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
             currency: this.currency,
         });
     }
+    renderPaymentSkeleton() {
+        return html `
+      <div class="payment-skeleton" aria-hidden="true">
+        ${Array.from({ length: 5 }, () => html `<div class="coras-skeleton sk-field"></div>`)}
+        <div class="coras-skeleton sk-block"></div>
+      </div>
+      <span class="coras-sr-only" role="status">${msg("Loading")}</span>
+    `;
+    }
     renderContent() {
         if (this.paymentSuccessful) {
             return this.renderSuccess();
@@ -1449,8 +1459,8 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
             return this.renderFailure();
         }
         return this.configTask.render({
-            initial: () => html `<div class="loading">${msg("Loading...")}</div>`,
-            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            initial: () => this.renderPaymentSkeleton(),
+            pending: () => this.renderPaymentSkeleton(),
             error: () => {
                 this.showErrorModalOnce();
                 return html ``;
@@ -1513,7 +1523,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
         // reservations below - the check response only carries requirements, and a
         // basket of plain tickets returns no per-reservation entries.
         return this.reservationsCheckTask.render({
-            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            pending: () => this.renderPaymentSkeleton(),
             error: () => {
                 this.showErrorModalOnce();
                 return html ``;
@@ -1523,7 +1533,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
     }
     renderReservations() {
         return this.reservationsTask.render({
-            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            pending: () => this.renderPaymentSkeleton(),
             complete: (data) => {
                 // Nothing to check out: real customers are guided back to browse;
                 // the branding preview renders the full form (with Pay now disabled).