docs

Overview

General Information

HTML Slots serve as dynamic placeholders within the web component. They act as small portals through which the parent website can inject customized content into the checkout web component, offering a flexible way to change the appearance.

Since the slot content represents a new tree in the DOM, there are some DOM boundary limitations. The content injected into the slot should come with its own styles and behavior.

How it works

The key to make web component slots work lies in the name attribute. By assigning an unique name to each slot, a clear connection can be established between the web component and the content to be injected.

Multiple slots are now available in different areas of the checkout application. Each of them have a unique name.

  • <slot name="slot_name" />

The parent website can add content into the slot by matching the name value in the slot attribute.

  • <div slot="slot_name">Content</div>

Visual Examples

Dynamic area slots

The following screen recordings show all of the places where the checkout is rendering dynamic area slots:

Option slots (always visible)

The following screen recordings show all of the places where the checkout is rendering dynamic area slots. Note that the slots are rendered even if the option is not selected.

Auth stepShipping stepPayment step

Selected Option slots (only visible when option is selected)

The following screen recordings show all of the places where the checkout is rendering dynamic area slots. Note that the slots are rendered, only when the option is selected.

Auth stepShipping stepPayment step

Dynamic Area slots and selected Option slots

The following screen recordings by step show a combination of all dynamic area slots and selected option slots, but only when the option is selected.

Auth stepShipping stepPayment step

Name formats

Slots receive the correct content by matching the name attribute. They can be identified by their prefix: "slot_prefix_" + "name"

Information about Dynamic Areas can be found here.

  • Dynamic Area slots "slot_dynamic_area_<area_name>"
  • Option slots
    • slot_option_<option_key>
    • slot_option_selected_<option_key> is only visible when the option is selected

Available Slots

Dynamic area slots
  • Authentication step
    • slot_dynamic_area_guest
    • slot_dynamic_area_register
  • Shipping step
    • slot_dynamic_area_collection_point
    • slot_dynamic_area_shipping_address
  • Payment step
    • slot_dynamic_area_billing_address
    • slot_dynamic_area_payment_options
    • slot_dynamic_area_payment
    • slot_dynamic_area_payment_below_mobile_basket

These are the names of all available slots:

Option slots
  • Authentication step
    • slot_option_sign_in
    • slot_option_register
    • slot_option_guest
  • Shipping step
    • Delivery options
      • slot_option_home_delivery
      • slot_option_collection_point
    • Carrier options
      • slot_option_dhl
      • slot_option_hermes
      • ...
    • Shipping options
      • slot_option_express_delivery_dhl
      • slot_option_standard_delivery_hermes
      • ...
  • Payment step
    • slot_suggest_collection_point
    • Billing options
      • slot_option_same_address
      • slot_option_different_address
    • Payment options
      • slot_option_standard_invoice
      • slot_option_adyen_klarna_paylater
      • slot_option_adyen_paypal
      • ...
  • Basket section
    • General
      • slot_basket_under_price_summary
      • slot_basket_bottom
      • slot_basket_top
    • Items
      • slot_basket_item_details_<item_id>


      • slot_replace_basket_item_<item_id>_price
      • slot_replace_item_totals_price_<item_id>
      • slot_basket_item_bottom_<item_id>
      • slot_replace_basket_item_<item_id>_price_promotion_<promotion_id>
      • slot_replace_basket_item_<item_id>_price_campaign
      • slot_replace_basket_item_<item_id>_price_sale
    • Totals
      • slot_replace_basket_subtotal
      • slot_replace_price_summary_subtotal
      • slot_replace_basket_shipping_cost
      • slot_basket_price_summary_before_total
      • slot_replace_basket_total
Selected option slot

These types of Slots are only visible when the option is selected

  • Authentication step
    • slot_option_selected_sign_in
    • slot_option_selected_register
    • slot_option_selected_guest
  • Shipping step
    • Delivery options
      • slot_option_selected_home_delivery
      • slot_option_selected_collection_point
    • Carrier options
      • slot_option_selected_dhl
      • slot_option_selected_hermes
      • ...
    • Shipping options
      • slot_option_selected_express_delivery_dhl
      • slot_option_selected_standard_delivery_hermes
      • ...
  • Payment step
    • slot_suggest_collection_point
    • Billing options
      • slot_option_selected_same_address
      • slot_option_selected_different_address
    • Payment options
      • slot_option_selected_standard_invoice
      • slot_option_selected_adyen_klarna_paylater
      • slot_option_selected_adyen_paypal
      • ...

Implementation

The following are examples of two different use cases for slots:

Dynamic Area Slot

Adding content into the dynamic area shipping address slot: slot_dynamic_area_shipping_address

  • Create new content element
  • Add slot attribute and make it match with the slot's name
  • Provide the needed styles
  • Append it besides/above the <scayle-checkout/> web component

Option Slot

Adding content into a clickable slot, for example, slot_option_collection_point

  • Create a new content element
  • Add the slot attribute and ensure that it matches the target slot name
  • Provide the necessary style attributes
  • Append it beside/above the <scayle-checkout/> web component

The "Option" slot 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.

Since the content will be added into a clickable slot, make sure to dispatch a custom event so it can be propagated from checkout side.

This is how the implementation looks for a clickable slot such as slot_option_collection_point

Next up
Integrating Slots