@liquidcommerce/elements-sdk 2.7.42 → 2.7.43

package/dist/ssr-stub.esm.js

@@ -142,6 +142,7 @@ const ELEMENTS_ACTIONS_EVENT = {
     CHECKOUT_PRODUCT_ADD_SUCCESS: 'checkout_product_add_success',
     CHECKOUT_PRODUCT_ADD_FAILED: 'checkout_product_add_failed',
     CHECKOUT_EXPRESS_CHECKOUT_AVAILABILITY: 'checkout_express_checkout_availability',
+    CHECKOUT_PAYMENT_FORM_FAILED: 'checkout_payment_form_failed',
 };
 const ELEMENTS_FORM = {
     CUSTOMER: 'customer',

package/dist/types/core/api/api-client.service.d.ts

@@ -15,8 +15,8 @@ export declare class ApiClientService {
     setPersistedStore(userDeviceId: string, data: IPersistedStore): Promise<ApiResult<IPersistedStoreAction>>;
     getPersistedStore(userDeviceId: string): Promise<ApiResult<IPersistedStore>>;
     deletePersistedStore(userDeviceId: string): Promise<ApiResult<IPersistedStoreAction>>;
-    getAddressSuggestions(input: string): Promise<ApiResult<IAddressAutocompleteResult[]>>;
-    getAddressDetails(id: string): Promise<ApiResult<IAddressDetailsResult>>;
+    getAddressSuggestions(input: string, sessionToken?: string): Promise<ApiResult<IAddressAutocompleteResult[]>>;
+    getAddressDetails(id: string, sessionToken?: string): Promise<ApiResult<IAddressDetailsResult>>;
     getProductsData(identifier: string[], location?: ILocation): Promise<ApiResult<IProductAvailabilityResponse>>;
     productListSearch(params: IProductSearchParams): Promise<ApiResult<IProductSearchResponse>>;
     getProductAvailabilityByState(identifiers: string[], state?: string): Promise<ApiResult<IProductAvailabilityResponse>>;

package/dist/types/core/client/actions/client-address-action.service.d.ts

@@ -1,7 +1,7 @@
 import type { IAddressAddress, IAddressCoordinates, IAddressData } from '@/interfaces/api/address.interface';
 import { BaseActionService } from './base-action.service';
 export interface IAddressActions {
-    setAddressByPlacesId: (placesId: string) => Promise<void>;
+    setAddressByPlacesId: (placesId: string, sessionToken?: string) => Promise<void>;
     setAddressManually: (address: IAddressAddress, coordinates: IAddressCoordinates) => Promise<void>;
     clear: () => Promise<void>;
     getDetails: () => IAddressData | null;

package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts

@@ -118,3 +118,7 @@ export interface ICheckoutExpressCheckoutAvailabilityEventData {
     available: boolean;
     wallets: string[];
 }
+export interface ICheckoutPaymentFormFailedEventData {
+    cartId: string;
+    reason: 'blocked' | 'timeout' | 'error';
+}

package/dist/types/core/pubsub/interfaces/core.interface.d.ts

@@ -1,6 +1,6 @@
 import type { IAddressActionEventData, IAddressFailedEventData } from '@/core/pubsub/interfaces/address.interface';
 import type { ICartFailedEventData, ICartItemAddedEventData, ICartItemEngravingUpdatedEventData, ICartItemQuantityChangedEventData, ICartItemRemovedEventData, ICartLoadedEventData, ICartProductAddEventData, ICartProductAddFailedEventData, ICartPromoCodeEventData, ICartPromoCodeFailedEventData, ICartShopRetailerEventData, ICartUpdatedEventData } from '@/core/pubsub/interfaces/cart.interface';
-import type { ICheckoutBillingInformationUpdatedEventData, ICheckoutCustomerInformationUpdatedEventData, ICheckoutDeliveryMethodUpdatedEventData, ICheckoutExpressCheckoutAvailabilityEventData, ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutGiftInformationUpdatedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
+import type { ICheckoutBillingInformationUpdatedEventData, ICheckoutCustomerInformationUpdatedEventData, ICheckoutDeliveryMethodUpdatedEventData, ICheckoutExpressCheckoutAvailabilityEventData, ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutGiftInformationUpdatedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutPaymentFormFailedEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
 import type { IProductAddToCartEventData, IProductFulfillmentChangedEventData, IProductFulfillmentTypeChangedEventData, IProductLoadedEventData, IProductQuantityChangedEventData, IProductSizeChangedEventData } from '@/core/pubsub/interfaces/product.interface';
 import { ELEMENTS_ACTIONS_EVENT } from '@/enums';
 export interface IElementsClientIsReadyEventData {
@@ -83,6 +83,7 @@ export interface IElementsActionsEventsMap {
     [ELEMENTS_ACTIONS_EVENT.CHECKOUT_PRODUCT_ADD_SUCCESS]: ICheckoutProductAddEventData;
     [ELEMENTS_ACTIONS_EVENT.CHECKOUT_PRODUCT_ADD_FAILED]: ICheckoutProductAddFailedEventData;
     [ELEMENTS_ACTIONS_EVENT.CHECKOUT_EXPRESS_CHECKOUT_AVAILABILITY]: ICheckoutExpressCheckoutAvailabilityEventData;
+    [ELEMENTS_ACTIONS_EVENT.CHECKOUT_PAYMENT_FORM_FAILED]: ICheckoutPaymentFormFailedEventData;
 }
 export type SpecificActionEvent = keyof IElementsActionsEventsMap;
 export interface IFormEventData {

package/dist/types/enums/core.enum.d.ts

@@ -61,6 +61,7 @@ export declare const ELEMENTS_ACTIONS_EVENT: {
     readonly CHECKOUT_PRODUCT_ADD_SUCCESS: "checkout_product_add_success";
     readonly CHECKOUT_PRODUCT_ADD_FAILED: "checkout_product_add_failed";
     readonly CHECKOUT_EXPRESS_CHECKOUT_AVAILABILITY: "checkout_express_checkout_availability";
+    readonly CHECKOUT_PAYMENT_FORM_FAILED: "checkout_payment_form_failed";
 };
 export declare const ELEMENTS_FORM: {
     readonly CUSTOMER: "customer";

package/dist/types/modules/address/address-input.component.d.ts

@@ -12,6 +12,7 @@ export declare class AddressInputComponent extends BaseComponent<IAddressInputCo
     private selectedAddress;
     private searchTimeout?;
     private minSearchLength;
+    private placesSessionToken;
     private inputElement;
     private suggestionsContainer;
     private errorContainer;

package/dist/types/modules/address/address.command.d.ts

@@ -5,8 +5,8 @@ export declare class AddressCommands extends BaseCommand {
     private cartCommands;
     constructor();
     static getInstance(): AddressCommands;
-    searchAddresses(query: string): Promise<IAddressAutocompleteResult[]>;
-    getAddressDetails(addressId: string): Promise<IAddressDetailsResult | null>;
+    searchAddresses(query: string, sessionToken?: string): Promise<IAddressAutocompleteResult[]>;
+    getAddressDetails(addressId: string, sessionToken?: string): Promise<IAddressDetailsResult | null>;
     setSelectedAddress(addressData: IAddressData): Promise<void>;
     setAddressManually(address: IAddressAddress, coordinates: IAddressCoordinates): Promise<void>;
     clearSelectedAddress(): Promise<void>;

package/dist/types/modules/checkout/checkout.commands.d.ts

@@ -6,6 +6,7 @@ import type { CheckoutPaymentSessionType, ICheckoutBilling, ICheckoutCustomer, I
 import type { AddItemParams } from '@/modules/cart/cart.commands';
 import type { PresaleExpiredReason } from '@/modules/checkout/components';
 import { type IExpressWalletBillingDetails } from '@/modules/checkout/express-wallet';
+import type { StripeJsLoadFailure } from '@/modules/checkout/stripe-js';
 export declare class CheckoutCommands extends BaseCommand {
     private readonly uiCommands;
     private lastLoadParams;
@@ -51,6 +52,7 @@ export declare class CheckoutCommands extends BaseCommand {
     private applySavedMarketingPreferences;
     toggleMarketingPreferences(fieldName: 'canEmail' | 'canSms', active?: boolean): Promise<boolean>;
     getPaymentSession(): Promise<void>;
+    reportPaymentFormFailure(reason: StripeJsLoadFailure, cause?: unknown): void;
     getExpressPaymentSession(): Promise<ICheckoutPaymentSession | null>;
     private requestPaymentSession;
     confirmPaymentSession(confirmationTokenId: string, setupIntentId: string, sessionType?: CheckoutPaymentSessionType): Promise<ICheckoutPaymentMethodStore>;

package/dist/types/modules/checkout/components/checkout-express-checkout.component.d.ts

@@ -54,7 +54,6 @@ export declare class CheckoutExpressCheckoutComponent extends BaseComponent<IChe
     private toBillingDetails;
     private failPayment;
     private handleCancel;
-    private loadStripeJS;
     private teardownExpressElement;
     private remountIfTotalMoved;
     protected disconnected(): void;

package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts

@@ -55,5 +55,4 @@ export declare class CheckoutStripeFormComponent extends SafeHTMLElement {
     disconnected(): Promise<void>;
     disconnectedCallback(): void;
     private cleanupForm;
-    private loadStripeJS;
 }

package/dist/types/modules/checkout/components/checkout-stripe-handler.component.d.ts

@@ -20,6 +20,7 @@ export declare class CheckoutStripeHandlerComponent extends BaseComponent<ICheck
     private isCreatingStripeForm;
     private stripeFormContainer;
     private stripeSummaryContainer;
+    private loadFailureNotice;
     private callbacks;
     private stripeFormStatus;
     private isInEditMode;
@@ -38,6 +39,9 @@ export declare class CheckoutStripeHandlerComponent extends BaseComponent<ICheck
     private hideStripeSummary;
     private showStripeForm;
     private hideStripeForm;
+    private showLoadFailure;
+    private clearLoadFailure;
+    private retryStripeForm;
     private handleChangePayment;
     protected template(): HTMLElement[];
     submitStripeForm(): void;

package/dist/types/modules/checkout/stripe-js.d.ts

@@ -0,0 +1,2 @@
+export type StripeJsLoadFailure = 'blocked' | 'timeout' | 'error';
+export declare function loadStripeJs(): Promise<StripeJsLoadFailure | null>;

package/dist/types/utils/places-session-token.d.ts

@@ -0,0 +1 @@
+export declare function createPlacesSessionToken(): string;

package/docs/v1/api/actions/address-actions.md

@@ -9,7 +9,7 @@ Set address using a Google Places ID.
 ### Signature
 
 ```typescript
-setAddressByPlacesId(placesId: string): Promise<void>
+setAddressByPlacesId(placesId: string, sessionToken?: string): Promise<void>
 ```
 
 ### Parameters
@@ -17,6 +17,7 @@ setAddressByPlacesId(placesId: string): Promise<void>
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
 | `placesId` | string | Yes | Google Places ID |
+| `sessionToken` | string | No | Google Places session token of the autocomplete requests that returned `placesId`. The details request ends that session, so Google bills the autocomplete requests as one session instead of per request. Applies only when the autocomplete requests used an API key in the same Google Cloud project as LiquidCommerce's address service. |
 
 ### Example
 
@@ -24,6 +25,9 @@ setAddressByPlacesId(placesId: string): Promise<void>
 await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(
   'ChIJOwg_06VPwokRYv534QaPC8g'
 );
+
+// With the session token your own Places Autocomplete requests used
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId, sessionToken);
 ```
 
 ### How to Get Places ID

package/docs/v1/guides/accessibility.md

@@ -106,6 +106,7 @@ Content that appears or changes without navigation is announced through a shared
 | Panel closed (product) | "Closed. Back to product options." |
 | Item added / removed, promo applied, totals changed | The new state, e.g. "Promo code SPRING applied, $5.00 off" |
 | Express checkout payment failed | "Express checkout failed. …" |
+| Card form could not load Stripe.js | The reason and what to do, e.g. "Your cookie settings are blocking our secure payment form. …" (assertive) |
 | Product list filtered or searched | "12 products found, showing 12" |
 | Validation failed | The field name and the error, interrupting (assertive) |
 | Carousel image changed | "Image 2 of 4" |
@@ -268,6 +269,8 @@ for (const region of document.querySelectorAll('[data-lce-live-region]')) {
 
 Checkout announces loading or initialization failure in a status region. If initialization fails, payment fields are withheld and a keyboard-operable **Retry checkout** button retries the same checkout. The button is disabled while loading.
 
+If the card form cannot load Stripe.js — a consent tool holding the script back, a blocker, or a failed request — the reason and a keyboard-operable **Try again** button take the card form's place, and the message is announced assertively. While a retry runs the button stays focusable (`aria-disabled`, not `disabled`), so focus is not lost; if the retry fails, focus moves to the new **Try again** button, and if it succeeds, to the card form's container.
+
 Save Payment Information remains disabled until checkout initializes. During payment save it stays busy until the server responds. Recoverable billing/prepare errors are announced while the mounted card fields and billing input remain available for correction and retry.
 
 ### Wallet payment actions

package/docs/v1/guides/address-component.md

@@ -56,6 +56,12 @@ The recommended method - provides accurate geocoding:
 await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId('ChIJOwg_06VPwokRYv534QaPC8g');
 ```
 
+If you run Google Places Autocomplete yourself with a [session token](https://developers.google.com/maps/documentation/places/web-service/session-tokens), pass the same token as the second argument. The details request then ends your session, and Google bills the autocomplete requests as one session instead of per request. Google only groups requests whose API keys belong to the same Google Cloud project, so this applies only when your autocomplete requests used the same project as LiquidCommerce's address service; a token from autocomplete requests made with an API key in another project doesn't change billing:
+
+```javascript
+await window.LiquidCommerce.elements.actions.address.setAddressByPlacesId(placesId, sessionToken);
+```
+
 **How to get a Places ID:**
 
 Visit [Google Place IDs](https://developers.google.com/maps/documentation/places/web-service/place-id#find-id) for details on obtaining a Places ID.

package/docs/v1/guides/checkout-component.md

@@ -411,6 +411,12 @@ window.addEventListener('lce:actions.checkout_submit_failed', (event) => {
   console.error('Payment failed:', message);
   // Show error message
 });
+
+// The card form could not load Stripe.js (fires again for each failed Try again)
+window.addEventListener('lce:actions.checkout_payment_form_failed', (event) => {
+  const { reason } = event.detail.data; // 'blocked' | 'timeout' | 'error'
+  console.warn('Card form unavailable:', reason);
+});
 ```
 
 ### Express Checkout
@@ -522,6 +528,35 @@ The SDK uses Stripe for payment processing. Payment form is embedded and handles
 
 No additional Stripe integration code needed - it's built-in.
 
+### Cookie consent and Content Security Policy
+
+The card form runs on Stripe.js, which the SDK loads from `https://js.stripe.com` when the payment
+step opens. Two things on a host page can stop it loading:
+
+- **Cookie-consent tools with auto-blocking** (OneTrust, Cookiebot and similar) hold back every
+  script in a category the shopper has not accepted. If Stripe is filed under anything other than
+  strictly necessary, a shopper who declines that category cannot pay by card. Classify Stripe — the
+  `js.stripe.com` script and the cookies it sets — as **Strictly Necessary**, or exclude it from
+  auto-blocking. Card payment does not work without it.
+- **A Content Security Policy** has to allow Stripe.js: `https://js.stripe.com` in `script-src` and
+  `frame-src`, and `https://api.stripe.com` in `connect-src`. Stripe's
+  [CSP guidance](https://docs.stripe.com/security/guide#content-security-policy) lists the full set.
+
+When Stripe.js cannot load, or loads but cannot build the card form, the shopper sees a message and a **Try again** button where the card form
+would be, rather than an empty space. A script held back by a consent tool asks them to allow
+cookies; a load that stalled or failed points them at their connection or an ad blocker. The SDK also
+fires [`lce:actions.checkout_payment_form_failed`](./events.md) with a `reason` of `blocked`, `timeout`
+or `error`, so the page can respond:
+
+```javascript
+window.addEventListener('lce:actions.checkout_payment_form_failed', (event) => {
+  const { reason } = event.detail.data;
+  if (reason === 'blocked') {
+    // Stripe is held back by consent settings: reopen your consent tool's preferences here.
+  }
+});
+```
+
 ### Express checkout (Apple Pay and Google Pay)
 
 Apple Pay and Google Pay are offered as express checkout buttons at the top of the checkout, above
@@ -730,10 +765,16 @@ checkout: {
 
 ### Payment Form Not Loading
 
+If the Payment section reads "Your cookie settings are blocking our secure payment form", a consent
+tool on the page is holding Stripe.js back — see
+[Cookie consent and Content Security Policy](#cookie-consent-and-content-security-policy).
+Otherwise:
+
 1. Check internet connection (Stripe requires network)
-2. Verify Stripe is not blocked by ad blockers
-3. Check browser console for Stripe errors
-4. Ensure your API key is valid
+2. Verify Stripe is not blocked by ad blockers or the page's Content Security Policy
+3. Listen for `lce:actions.checkout_payment_form_failed` and check its `reason`
+4. Check browser console for Stripe errors
+5. Ensure your API key is valid
 
 ### Customer Info Not Pre-filling
 

package/docs/v1/guides/events.md

@@ -893,6 +893,29 @@ window.addEventListener('lce:actions.checkout_express_checkout_availability', (e
 });
 ```
 
+### `lce:actions.checkout_payment_form_failed`
+
+Fires when the card form cannot load Stripe.js, so the card fields cannot appear. The shopper sees a
+message and a **Try again** button where the card form would be; each attempt that fails fires the
+event again. `reason` is `blocked` when something on the page held the script back before it was
+fetched — typically a cookie-consent tool with auto-blocking, for a shopper who has not accepted the
+category Stripe is filed under — and `timeout` or `error` when the load stalled or failed (`error` also when Stripe.js loads but cannot
+build the card form, as when `api.stripe.com` is blocked). See
+[Cookie consent and Content Security Policy](./checkout-component.md#cookie-consent-and-content-security-policy).
+
+**Data includes:** `cartId`, `reason` (`'blocked' | 'timeout' | 'error'`).
+
+**Example**
+
+```javascript
+window.addEventListener('lce:actions.checkout_payment_form_failed', (event) => {
+  const { data } = event.detail;
+  if (data.reason === 'blocked') {
+    // For example, reopen your consent tool's preferences so the shopper can allow Stripe.
+  }
+});
+```
+
 ### `lce:actions.checkout_product_add_success`
 
 Fires when products are added to checkout via the actions API.

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.7.42",
+  "version": "2.7.43",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",