Checkout slots

Learn about the slots provided in the checkout drop-in component.

Extending drop-in components describes the default properties available to all slots.

Title slots

The TitleProps interface defines slots for the Title component. These slots enable you to customize the title content displayed in specific containers.

export interface TitleProps {
  displayTitle?: boolean;
  slots?: {
    Title?: SlotProps;
  };
}

Title

The Title property is a callback function that renders custom title content. It receives the default context implementing the DefaultSlotContext interface:

interface DefaultSlotContext<T> extends PrivateContext<T> {
  dictionary: Lang;
  getSlotElement: (key: string) => SlotElement;
  replaceWith: MutateElement;
  appendChild: MutateElement;
  prependChild: MutateElement;
  appendSibling: MutateElement;
  prependSibling: MutateElement;
  onRender: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
  onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
}

export type SlotProps<T = any> = (
  ctx: T & DefaultSlotContext<T>,
  element: HTMLDivElement | null
) => Promise<void> | void;

LoginForm slots

The LoginFormProps interface defines the available slots for the LoginForm container. The slots allow setting the heading content dynamically based on the user authentication status.

export interface LoginFormProps extends HTMLAttributes<HTMLFormElement>, TitleProps {
  . . .
  slots?: {
    Heading?: SlotProps<{
      authenticated: boolean;
    }>;
  } & TitleProps['slots'];
}

Heading

The Heading property is a callback function that renders custom heading content based on the authentication status provided by the context. The Heading slot receives a boolean as a context indicating whether the user is authenticated.

PaymentMethods slots

The slots for the PaymentMethods container are defined in the PaymentMethodsProps interface shown below. The slots allow you to customize the list of payment methods to show during the checkout process.

export interface PaymentMethodsProps extends HTMLAttributes<HTMLDivElement>, TitleProps {
  . . .
  slots?: {
    Methods?: PaymentMethodsSlot;
  } & TitleProps['slots'];
}

Methods

The Methods property is an object which implements the PaymentMethodsSlot interface:

export interface PaymentMethodsSlot {
  [code: string]: PaymentMethodConfig;
}

It consists on a list of payment method codes providing a set of configurations to customize the payment method. Each payment method will have its own set of configurations implementing the PaymentMethodConfig interface:

export interface PaymentMethodConfig {
  displayLabel?: boolean;
  enabled?: boolean;
  icon?: string;
  autoSync?: boolean;
  render?: SlotProps<PaymentMethodRenderCtx>;
}

Finally the render property is a callback function used to render and configure the payment method in case of being selected. The render slot receives a context implementing the following PaymentMethodRenderCtx interface:

export type SlotProps<T = any> = (
  ctx: T & DefaultSlotContext<T>,
  element: HTMLDivElement | null
) => Promise<void> | void;

export interface PaymentMethodRenderCtx {
  cartId: string;
  replaceHTML: (domElement: HTMLElement) => void;
}

The context object passed to the render slot includes a replaceHTML property that is a callback function and the cartId got from the internal state.

PlaceOrder slots

The slots for the PlaceOrder container are defined in the PlaceOrderProps interface shown below. The slots allow you to set the container content dynamically based on the selected payment method.

export interface PlaceOrderProps extends HTMLAttributes<HTMLDivElement> {
  . . .
  slots?: {
    Content?: SlotProps<ContentSlotContext>;
  };
}

Content

The Content property is a callback function used to render the container content. The Content slot receives a context implementing the following ContentSlotContext interface:

export type SlotProps<T = any> = (
  ctx: T & DefaultSlotContext<T>,
  element: HTMLDivElement | null
) => Promise<void> | void;

export interface ContentSlotContext {
  code: string;
}

The context object passed to the Content slot includes the code got from the selected payment method.

TermsAndConditions slots

The TermsAndConditionsProps interface defines the available slots for the TermsAndConditions container. These slots enable you to specify terms and conditions that customers must accept before completing their order.

export interface TermsAndConditionsProps {
  slots?: {
    Agreements?: SlotProps<{
      appendAgreement: SlotMethod<{
        name: string;
        mode: AgreementMode;
        text?: string;
        translationId?: string;
      }>;
    }>;
  };
}

Agreements

The Agreements property is a callback function that configures and renders a list of agreements. It provides context by including the appendAgreement() method to add a new agreement based on the SlotMethod type:

export type SlotMethod<P = any> = (
  callback: (next: unknown, state: State) => P
) => void;

export enum AgreementMode {
  MANUAL = 'manual',
  AUTO = 'auto',
}

The context object passed to the appendAgreement slot method includes the required information to configure an agreement.