Checkout initialization

The checkout drop-in component initializer provides options for configuring language definitions and extending the default models with new fields and transformers.

Configuration options

The checkout component initializer accepts the following configuration options:

Option	Type	Req?	Description
langDefinitions	object	No	Provides language definitions for internationalization (i18n).
models	object	No	Extend the default models (CartModel, CustomerModel, and OrderModel) with new fields and transform them as needed.

Example

The following code shows an example implementation of the checkout initializer configuration:

// Initialize checkout
initializeDropin(async () => {
  await initializers.mountImmediately(initialize, {
    langDefinitions,
    models,
  });
})();

Set language definitions

The langDefinitions property is used to fetch and register dictionary files for the checkout component. This allows you to provide localized text for different languages in your application.

// Fetch the dictionary files for your application
const en_US = await fetch('/i18n/en_US.json').then((res) => res.json());
const fr_FR = await fetch('/i18n/fr_FR.json').then((res) => res.json());

// Register the checkout component with language definitions
const langDefinitions = {
  default: en_US,
  en_US,
  fr_FR,
};

// Register initializers
initializers.mountImmediately(initialize, {
  langDefinitions,
});

Set models

You can extend the default models in the checkout component and provide transformers to process new fields.

The models property is an object that contains the default models that you might want to extend and the transformers to use to transform the data. By default, the checkout componen initializer accepts the following models only:

CartModel
CustomerModel
OrderModel

The following example shows how to extend the default models with new fields and transformers:

// Initialize checkout
initializeDropin(async () => {
  await initializers.mountImmediately(initialize, {
    langDefinitions,
    models: {
      OrderModel: {
        transformer: (data) => ({
          grandTotal: data?.grand_total,
          customerInfo: data?.customer_info,
          shipments: data?.shipments,
          invoices: data?.invoices,
          items: data?.items.map((item) => ({
            eligibleForReturn: item.eligible_for_return,
            productSku: item.product_sku,
            productName: item.product_name,
            productType: item.product_type,
            product: {
              categories: item.product.categories,
              description: item.product.description,
              isReturnable: item.product.is_returnable,
              quantity: item.product.quantity,
              reviewCount: item.product.review_count,
              stockStatus: item.product.stock_status,
              onlyXLeftInStock: item.product.only_x_left_in_stock,
            },
          })),
        }),
      },
      CustomerModel: {
        transformer: (data) => ({
          gender: ((gender) => {
            switch (gender) {
              case 1:
                return "Male";
              case 2:
                return "Female";
              case 3:
                return "Not Specified";
              default:
                return "";
            }
          })(data?.gender),
          dateOfBirth: data?.date_of_birth,
        }),
      },
      CartModel: {
        transformer: (data) => ({
          printedCardIncluded: data?.printed_card_included,
          giftReceiptIncluded: data?.gift_receipt_included,
        }),
      },
    },
  });
})();