HTML Slots

General Information

HTML Slots serve as dynamic placeholders within the Webcomponent. They act as small portals through which the parent website can inject customized content into the checkout Webcomponent, 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 Webcomponent slots work lies in the name attribute. By assigning an unique name to each slot, a clear connection can be established between the Webcomponent 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>

Name formats

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

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

These are the names of all 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
  - ...

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/> Webcomponent

const slotContent = document.createElement('div');
const slotStyles = 'background: #f681076e; border-radius: 3px; padding: 16px; margin: 8px; border: 1px dashed; text-align: center;';
slotContent.setAttribute('slot', 'slot_dynamic_area_shipping_address');
slotContent.innerHTML = `<div style={slotStyles}>slot for shippingAddress Dynamic Area</div>`;

elementAboveCheckout.appendChild(slotContent);

Option Slot

Adding content into a clickable slot, 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/> Webcomponent

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.

element.onclick = () => element.dispatchEvent(new CustomEvent(<slot_name>, {
   bubbles: true,
   composed: true
 }));

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

const slotContent = document.createElement('div'); 
const slotStyles = 'background: #f681076e; border-radius: 3px; padding: 16px; margin: 8px; border: 1px dashed; text-align: center;'; 
slotContent.setAttribute('slot', 'slot_option_collection_point'); 
slotContent.innerHTML = <div style={slotStyles}>Slot for shippingAddress Dynamic Area</div>; slotContent.onclick = () => slotContent.dispatchEvent(new CustomEvent("slot_option_collection_point", { 
bubbles: true, 
composed: true }));

elementAboveCheckout.appendChild(slotContent);

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 step	Shipping step	Payment 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 step	Shipping step	Payment 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 step	Shipping step	Payment step