Checkout initialization

The Checkout initializer configures the checkout flow, payment processing, shipping options, and order placement. Use initialization to customize checkout behavior, integrate payment providers, and transform checkout data models to match your storefront requirements.

Version: 2.1.0

Configuration options

The following table describes the configuration options available for the Checkout initializer:

Parameter	Type	Req?	Description
langDefinitions	LangDefinitions	No	Language definitions for internationalization (i18n). Override dictionary keys for localization or branding.
models	Record<string, any>	No	Custom data models for type transformations. Extend or modify default models with custom fields and transformers.
defaults	defaults	No	Configures default checkout behaviors including whether billing address defaults to shipping address and which shipping method is pre-selected.
shipping	shipping	No	Configures shipping method filtering to control which shipping options are available to customers during checkout.
features	features	No	Enables or disables checkout features including B2B quote functionality and custom login routing.

Basic initialization

Initialize the drop-in with default settings:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-checkout';

await initializers.mountImmediately(initialize, {});

Language definitions

Override dictionary keys for localization or branding. The langDefinitions object maps locale keys to custom strings that override the drop-in’s default text.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-checkout';

const customStrings = {
  'AddToCart': 'Add to Bag',
  'Checkout': 'Complete Purchase',
  'Price': 'Cost',
};

const langDefinitions = {
  default: customStrings,
};

await initializers.mountImmediately(initialize, { langDefinitions });

Tip

For complete dictionary customization including all available keys and multi-language support, see the Checkout Dictionary page.

Customizing data models

Extend or transform data models by providing custom transformer functions. Use the models option to add custom fields or modify existing data structures returned from the backend.

Available models

The following models can be customized through the models configuration option:

Model	Description
CartModel	Transforms cart data during checkout including items, pricing, shipping, billing, and payment information. Use this to add custom fields specific to the checkout flow.
CustomerModel	Transforms CustomerModel data from GraphQL.

The following example shows how to customize the CartModel model for the Checkout drop-in:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-checkout';

const models = {
  CartModel: {
    transformer: (data) => ({
      // Add custom fields from backend data
      customField: data?.custom_field,
      promotionBadge: data?.promotion?.label,
      // Transform existing fields
      displayPrice: data?.price?.value ? `$${data.price.value}` : 'N/A',
    }),
  },
};

await initializers.mountImmediately(initialize, { models });

Drop-in-specific configuration

The Checkout drop-in provides additional configuration options beyond the standard langDefinitions and models. These options customize drop-in-specific behaviors and features.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-checkout';

await initializers.mountImmediately(initialize, {
  // Drop-in-specific configuration
  defaults: {},
  shipping: {},
  features: {},
});

Note

Refer to the Configuration options table for descriptions of each option.

Configuration types

The following TypeScript definitions show the structure of each configuration object:

defaults

Configures default checkout behaviors including whether billing address defaults to shipping address and which shipping method is pre-selected.

defaults?: {
    isBillToShipping?: boolean;
    selectedShippingMethod?: Selector<ShippingMethod>;
  }

shipping

Configures shipping method filtering to control which shipping options are available to customers during checkout.

shipping?: {
    filterOptions?: Filter<ShippingMethod>;
  }

features

Enables or disables checkout features including B2B quote functionality and custom login routing.

features?: {
    b2b?: {
      quotes?: boolean;
      routeLogin?: () => string | void;
    };
  }

langDefinitions

Maps locale identifiers to dictionaries of key-value pairs. The default locale is used as the fallback when no specific locale matches. Each dictionary key corresponds to a text string used in the drop-in UI.

langDefinitions?: {
  [locale: string]: {
    [key: string]: string;
  };
};

models

Maps model names to transformer functions. Each transformer receives data from GraphQL and returns a modified or extended version. Use the Model<T> type from @dropins/tools to create type-safe transformers.

models?: {
  [modelName: string]: Model<any>;
};

Model definitions

The following TypeScript definitions show the structure of each customizable model:

CartModel

export interface CartAddress extends Address {}

CustomerModel

export interface Customer {
  firstName: string;
  lastName: string;
  email: string;
}