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) with new fields and transform them as needed.

These configuration options are implementing the ConfigProps type:

ConfigProps type

The Initializer receives an object as a parameter which implements the ConfigProps type with the following properties:

export type ConfigProps = {
  langDefinitions?: Lang;
  models?: {
    CartModel?: Model<CartModel>;
    CustomerModel?: Model<CustomerModel>;
  };
};

Example

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

await initializeDropin(async () => {
  setFetchGraphQlHeaders(await getHeaders('checkout'));

  const labels = await fetchPlaceholders();
  const langDefinitions = {
    default: {
      ...labels,
    },
  };

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

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.

// Initialize checkout
await initializeDropin(async () => {
  // 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
  return 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

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

// Initialize checkout
await initializeDropin(async () => {
  // Register the checkout component with models extensibility
  const models = {
    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,
      }),
    },
  };

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