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.

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> {
  /**
   * @deprecated This property is deprecated and will be removed in future versions.
   * Please use the "slots.Methods" property instead to provide this information.
   */
  setOnChange?: { [key: string]: boolean };
  slots?: {
    /**
     * @deprecated This property is deprecated and will be removed in future versions.
     * Please use the "slots.Methods" property instead to provide this information.
     */
    Handlers?: PaymentMethodsHandlerSlot;
    Methods?: PaymentMethodsSlot;
  };
}

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;
  setOnChange?: 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> {
  disabled?: boolean;
  handleValidation?: () => boolean;
  handlePlaceOrder: (ctx: HandlePlaceOrderContext) => Promise<void>;
  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.