Integrating Slots

Available slot names

A comprehensive list of all slot names where content can be added.

slot_dynamic_area_guest
slot_dynamic_area_register
slot_option_sign_in
slot_option_register
slot_option_guest
slot_option_selected_sign_in
slot_option_selected_register
slot_option_selected_guest

If you are replacing the entire address form (e.g. slot_replace_shipping_address_form) via Dynamic Slots, ensure that the required properties for Dynamic Fields as well as Address Form fields (e.g. state) are set to false.

Styling

The content injected into the slot should come with its own styles as these can not be inherited from the parent.

Events

Handling click events

Since slots can be clickable, if content is injected into one of the non-selected option slots, the slotContent will require an onclick attribute to dispatch an event that propagates the option click/switch on the checkout side. Make sure the event name matches with the slot name.

Handling custom button enabling/disabling

For some use cases where input fields with custom validation are introduced, there may be a need to disable call to action buttons.

This can by dispatching the following events:

When detail.isValid is set to false, the button will be disabled for the above step and the user will not be able to proceed until set to true again.

Handling frontend mutation errors

In some situations where the API response does not return the state, it is necessary to listen for the reason why it failed.

This can be done via the following structure:

A full list of endpoints (e.g. /state/memberships is available here.

Methods

Within the window.scayleCheckoutFunctions.mutations object, we expose native checkout methods for use in the storefront. These methods can be leveraged in slot implementations that require logic, such as immediately returning the current state.

Types

CheckoutState

AddressSuggestion

GiftCard

ConfirmOrderResponse

BasketItem

{
  id: string;
  brand: {
    id: number;
    name: string;
  };
  colors?: Array<{
    id: number;
    name: string;
  }>;
  displayData: {
    attributes?: Array<{
      label: Label;
      value: string;
    }>;
    identifier: Identifier;
    meta: Meta;
    name: Name;
  };
  discount: {
    sale: number;
    saleWithoutTax: number;
    promotion: number;
    campaign: number;
    campaignWithoutTax: number;
    voucher: number;
    voucherWithoutTax: number;
    total: number;
  };
  imageUrl: string;
  name: string;
  merchant: {
    id: number;
    variantId: string;
  };
  pdpUrl: string;
  productId: number;
  quantity: number;
  size: Size;
  styleKey: string;
  unit: {
    costWithTaxWithoutVoucher: number;
    costWithoutTaxWithoutVoucher: number;
    taxWithoutVoucher: number;
    taxRate: number;
  }
  variantId: number;
  voucherId: string;
  total: {
    costWithTaxWithoutDiscount: number;
    costWithTaxWithDiscount: number;
    costWithoutTaxWithDiscount: number;
    costWithoutTaxWithoutDiscount: number;
    itemGroups?: Record<string, ItemGroupTotal>;
  };
  additionalData?: {
    variantId: number;
    productId: number;
    sortingChannel: string;
    categoryName: string;
    categoryId: number;
    otherSource: boolean;
    virtualCategoryId: number;
    outfitId?: any;
    brandId?: any;
    storyId?: any;
    storyVirtualCategoryId?: any;
    storyEditorialId?: any;
    linkedContentType: string;
    linkedContentId: number;
    wt_sdk?: WtSdk;
    originDevice: string;
  };
  categories?: Array<{
    id: number;
    name: string;
  }>;
  categoryName?: any;
  deliveryForecast?: { deliverable?: string; subsequentDelivery?: string };
  isQuantityChangeDisabled?: boolean;
  itemGroup?: { id: string; isMainItem: boolean; isRequired: boolean };
  lowestPriorPrice?: { withTax: number };
  promotionId?: string;
  promotion?: Array<{
    id: string;
    code?: string;
    name?: string;
    discount: number;
    version: string;
  }>;
  warehouseId?: any;
  reference?: {
    costWithTax: number;
    dimension: string;
    unit: number;
  };
  maximumBuyableQuantityPerOrder?: number;
}

SignInPayload

RegisterPayload

SetPasswordForCustomerNumberPayload

SetBasketItemQuantityPayload

SetBasketItemQuantityContext

RemoveBasketItemPayload

RemoveBasketItemContext

SetCarrierAndShippingOptionPayload

SetCollectionPointPayload

AddressForSubmissionPayload

SetDynamicFieldsPayload

SetPaymentOptionPayload

UpdatePaymentOptionPayload

RemoveGiftCardPayload

AddGiftCardPayload

AddDiscountPayload

RemoveDiscountPayload

RemoveRecurringPaymentMethodPayload

LoyaltyProgramPayload

{ 
  membershipAccountNumber: string; 
  membershipTypeKey: string;
}

LoyaltyPromotionPayload

RedeemLoyaltyProgramPointsPayload

ConfirmOrderPayload

Examples

Showing all available slot names on the page

Injecting static HTML into the top of the basket

Injecting a web component within a slot element

Please contact your SCAYLE Account Manager for access to internally developed Add-ons such as Ingrid.

Mutating the state

Native checkout functions are exposed via the window object and can be interacted with from the storefront. Above you find the entire list of exposed checkout mutations.

The code snippet above executes the addVoucher method using the voucher code "TEST123".

Listening for a change in the order state

Sorting Payment Options

window.scayleCheckoutFunctions.sortPaymentOptions = (paymentOptions => {
        return {
          ...paymentOptions,
          generic: paymentOptions.generic.sort((a, b) => b.paymentOptionProvider.localeCompare(a.paymentOptionProvider)),
        };
      });

Filtering Payment Options

The above filtering and sorting works after the next /state update call. When the checkout mounts, we automatically make this call which would filter the payment options and apply the filters on every subsequent /state update.

If it is needed to manually get the latest state immediately, this can be done by calling window.scayleCheckoutFunctions.mutations.getState() .