@liquidcommerce/elements-sdk 2.7.18 → 2.7.20

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

@@ -27,5 +27,5 @@ export declare class ApiClientService {
     getPaymentSession(cartId: string): Promise<ApiResult<ICheckoutPaymentSession>>;
     confirmPaymentSession(params: ICheckoutPaymentConfirmParams): Promise<ApiResult<ICheckoutPaymentConfirm>>;
     addAnonymousProduct(params: IAnonymousCheckoutAddProductParams): Promise<ApiResult<IAnonymousCheckoutAddProductResponse>>;
-    checkoutComplete(token: string): Promise<ApiResult<ICheckoutComplete>>;
+    checkoutComplete(token: string, payment?: string): Promise<ApiResult<ICheckoutComplete>>;
 }

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

@@ -4,11 +4,22 @@ import type { IProductAvailabilityResponse } from '@/interfaces/api/product.inte
 import type { BillingFieldName, CustomerFieldName, GiftFieldName } from '@/modules/checkout/constant';
 import { BaseActionService } from './base-action.service';
 import type { IAddProductParams } from './client-cart-action.service';
+export interface ISavedPaymentMethodInput {
+    id: string;
+    card: {
+        brand: string;
+        last4: string;
+        expMonth?: string | number;
+        expYear?: string | number;
+    };
+}
 export interface ICheckoutActions {
     openCheckout: () => void;
     closeCheckout: () => void;
     toggleCheckout: () => void;
     exitCheckout: () => void;
+    setSavedPaymentMethod: (params: ISavedPaymentMethodInput) => void;
+    clearSavedPaymentMethod: () => void;
     addProduct: (params: IAddProductParams[], openCheckout?: boolean) => Promise<void>;
     applyPromoCode: (promoCode: string) => Promise<void>;
     removePromoCode: () => Promise<void>;
@@ -39,6 +50,8 @@ export declare class ClientCheckoutActionService extends BaseActionService {
     private closeCheckout;
     private toggleCheckout;
     private exitCheckout;
+    private setSavedPaymentMethod;
+    private clearSavedPaymentMethod;
     private addProduct;
     private applyPromoCode;
     private removePromoCode;

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

@@ -19,7 +19,6 @@ export interface IClientConfigs {
     version?: string;
     clientPrepared: boolean;
     promoTicker: IPromoTicker[] | null;
-    paymentMethodId?: string;
     openShadowDom?: boolean;
     hasCustomApiUrl?: boolean;
     mockMode: boolean;
@@ -35,7 +34,6 @@ export interface IClientConfigInput {
     promoTicker?: IPromoTicker[];
     development?: {
         customApiUrl?: string;
-        paymentMethodId?: string;
         openShadowDom?: boolean;
         mockMode?: boolean;
     };
@@ -49,7 +47,6 @@ export declare class ClientConfigService {
     getConfigs(): IClientConfigs;
     get<K extends keyof IClientConfigs>(key: K): IClientConfigs[K];
     set<K extends keyof IClientConfigs>(key: K, value: IClientConfigs[K]): void;
-    isDevelopment(): boolean;
     isStaging(): boolean;
     isProduction(): boolean;
     isBuilder(): boolean;

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

@@ -38,6 +38,7 @@ export interface ICheckoutStore {
     customerForm: ICheckoutCustomerFormStore;
     giftRecipientForm: ICheckoutGiftRecipientFormStore;
     paymentForm: ICheckoutPaymentFormStore;
+    injectedPaymentMethod: ICheckoutPaymentMethodStore | null;
     shippingAddress: ICheckoutShippingAddress;
     promoCode: ICheckoutPromoCode | null;
     giftCards: ICheckoutGiftCard[];

package/dist/types/interfaces/config.interface.d.ts

@@ -9,7 +9,6 @@ export interface IElementsProxyConfig {
 }
 export interface ILiquidCommerceElementsDevelopmentConfig {
     customApiUrl?: string;
-    paymentMethodId?: string;
     openShadowDom?: boolean;
     mockMode?: boolean;
 }

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

@@ -19,7 +19,7 @@ export declare class CheckoutCommands extends BaseCommand {
     toggleBillingSameAsShipping(active?: boolean): Promise<void>;
     toggleMarketingPreferences(fieldName: 'canEmail' | 'canSms', active?: boolean): Promise<void>;
     getPaymentSession(): Promise<void>;
-    confirmPaymentSession(confirmationTokenId: string, setupIntentId: string): Promise<ICheckoutPaymentMethodStore | null>;
+    confirmPaymentSession(confirmationTokenId: string, setupIntentId: string): Promise<ICheckoutPaymentMethodStore>;
     applyPromoCode(code: string): Promise<void>;
     removePromoCode(): Promise<void>;
     clearPromoCodeError(): Promise<void>;
@@ -50,6 +50,8 @@ export declare class CheckoutCommands extends BaseCommand {
         deliveryInstructions: string;
     }): Promise<void>;
     editPaymentForm(): Promise<void>;
+    private resetCheckoutPreservingInjected;
+    private markInjectedPaymentReady;
     savePaymentForm({ billingFormData, paymentSession, }: {
         billingFormData?: ICheckoutBilling;
         paymentSession?: {

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

@@ -5,7 +5,6 @@ export interface ICheckoutSendToFormComponentParams {
 }
 export declare class CheckoutPaymentComponent extends BaseComponent<ICheckoutSendToFormComponentParams, ICheckoutComponent> {
     private stripeHandlerElement;
-    private hardcodedPaymentElement;
     private saveButton;
     private errorMessageElement;
     private billingFormData;
@@ -17,6 +16,7 @@ export declare class CheckoutPaymentComponent extends BaseComponent<ICheckoutSen
     private isSavingPayment;
     get hostClasses(): string[];
     constructor();
+    private getInjectedPaymentMethod;
     onStoreWatch(changes: IOnStoreChanged[]): void;
     private handleBillingSameAsShippingChange;
     afterRender(): Promise<void>;

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

@@ -287,6 +287,45 @@ window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
 });
 ```
 
+## Payment Method
+
+### actions.checkout.setSavedPaymentMethod()
+
+```typescript
+setSavedPaymentMethod(params: {
+  id: string;
+  card: {
+    brand: string;
+    last4: string;
+    expMonth?: string | number;
+    expYear?: string | number;
+  };
+}): void
+```
+
+Pre-select a saved payment method for the checkout. When set, the payment step renders a read-only card summary (e.g. `Visa ending in 4242`) instead of the Stripe card form, and the shopper places the order without re-entering card details. The `id` is bound to the checkout when the payment form is saved.
+
+`id` must be a payment method the backend already holds for the checkout's customer (for example, a card fetched server-side and handed to the page). If the backend does not recognize the `id` for this checkout's customer, saving the payment step fails with an error (`The selected payment method could not be applied to this checkout.`) and the order cannot be placed — pass only a payment method confirmed to belong to the customer. The `card` fields are used only to render the summary. It can be set at any time — before opening checkout, or while it is open — and the payment step updates accordingly. The selection persists across a cart reset within the session.
+
+```javascript
+window.LiquidCommerce.elements.actions.checkout.setSavedPaymentMethod({
+  id: 'pm_123',
+  card: { brand: 'Visa', last4: '4242', expMonth: '12', expYear: '30' }
+});
+```
+
+### actions.checkout.clearSavedPaymentMethod()
+
+```typescript
+clearSavedPaymentMethod(): void
+```
+
+Remove a previously set saved payment method, restoring the Stripe card-entry form.
+
+```javascript
+window.LiquidCommerce.elements.actions.checkout.clearSavedPaymentMethod();
+```
+
 ## Data Retrieval
 
 ### actions.checkout.getDetails()

package/docs/v1/api/client.md

@@ -185,7 +185,6 @@ checkout: {
 ```typescript
 interface ILiquidCommerceElementsDevelopmentConfig {
   customApiUrl?: string;
-  paymentMethodId?: string;
   openShadowDom?: boolean;
 }
 ```
@@ -195,7 +194,6 @@ interface ILiquidCommerceElementsDevelopmentConfig {
 ```javascript
 development: {
   customApiUrl: 'http://localhost:3000/api',
-  paymentMethodId: 'pm_test_123',  // For testing without Stripe form
   openShadowDom: true  // Disable Shadow DOM for debugging
 }
 ```

package/docs/v1/api/configuration.md

@@ -508,7 +508,6 @@ See [Proxy Setup Guide](../integration/proxy-setup.md) for implementation detail
 ```typescript
 interface ILiquidCommerceElementsDevelopmentConfig {
   customApiUrl?: string;
-  paymentMethodId?: string;
   openShadowDom?: boolean;
 }
 ```
@@ -516,9 +515,10 @@ interface ILiquidCommerceElementsDevelopmentConfig {
 | Property | Type | Description |
 |----------|------|-------------|
 | `customApiUrl` | `string` | Custom API URL for local or custom backend testing |
-| `paymentMethodId` | `string` | Hardcoded Stripe payment method ID for automated testing |
 | `openShadowDom` | `boolean` | Disable Shadow DOM isolation for debugging (default: `false`) |
 
+> To pre-select a payment method and skip the card form (in any environment), use [`actions.checkout.setSavedPaymentMethod`](./actions/checkout-actions.md#actionscheckoutsetsavedpaymentmethod) instead.
+
 ---
 
 ## See Also

package/docs/v1/api/typescript-types.md

@@ -134,7 +134,6 @@ interface IElementsProxyConfig {
 ```typescript
 interface ILiquidCommerceElementsDevelopmentConfig {
   customApiUrl?: string;
-  paymentMethodId?: string;
   openShadowDom?: boolean;
 }
 ```

package/docs/v1/guides/best-practices.md

@@ -285,12 +285,24 @@ const client = await Elements('YOUR_API_KEY', {
   env: 'development',
   debugMode: 'console',  // or 'panel'
   development: {
-    openShadowDom: true,  // Makes debugging easier
-    paymentMethodId: 'pm_test_123'  // Bypass Stripe for tests
+    openShadowDom: true  // Makes debugging easier
   }
 });
 ```
 
+### Skip card entry in checkout tests
+
+Pre-select a saved payment method so the checkout payment step shows a read-only summary and never mounts the Stripe card form. Pass a payment method id the backend already has for the checkout's customer:
+
+```javascript
+window.LiquidCommerce.elements.actions.checkout.setSavedPaymentMethod({
+  id: 'pm_123',
+  card: { brand: 'Visa', last4: '4242', expMonth: '12', expYear: '30' }
+});
+```
+
+`setSavedPaymentMethod` is a production action (also exposed on the checkout-only client), not test-only — beyond tests, use it to pre-fill a returning shopper's saved card. See [Checkout Actions](../api/actions/checkout-actions.md#actionscheckoutsetsavedpaymentmethod).
+
 ### Handle Test Scenarios
 
 ```javascript

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.7.18",
+  "version": "2.7.20",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",
@@ -77,11 +77,11 @@
     "embeddable commerce"
   ],
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
-    "@commitlint/cli": "^21.0.1",
-    "@commitlint/config-conventional": "^21.0.1",
+    "@biomejs/biome": "^2.4.16",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
     "@rollup/plugin-alias": "^6.0.0",
-    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -93,11 +93,11 @@
     "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.1",
     "@types/core-js": "^2.5.8",
-    "@types/node": "^25.7.0",
+    "@types/node": "^25.9.1",
     "conventional-changelog": "^7.2.0",
     "husky": "^9.1.7",
     "process": "^0.11.10",
-    "rollup": "^4.60.3",
+    "rollup": "^4.61.0",
     "rollup-obfuscator": "^4.1.1",
     "rollup-plugin-typescript2": "^0.37.0",
     "semantic-release": "^25.0.3",