Checkout Slots

The Checkout drop-in exposes slots for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 3.0.0-beta2

Container	Slots
LoginForm	Heading
PaymentMethods	None
PlaceOrder	Content
TermsAndConditions	Agreements

LoginForm slots

The slots for the LoginForm container allow you to customize its appearance and behavior.

interface LoginFormProps {
  slots?: {
    Heading?: SlotProps<{
    authenticated: boolean;
    }>;
  };
}

Heading slot

The Heading slot allows you to customize the heading section of the LoginForm container.

Example

import { render as provider } from '@dropins/storefront-checkout/render.js';
import { LoginForm } from '@dropins/storefront-checkout/containers/LoginForm.js';

await provider.render(LoginForm, {
  slots: {
    Heading: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Heading';
      ctx.appendChild(element);
    }
  }
})(block);

PaymentMethods slots

The slots for the PaymentMethods container allow you to customize its appearance and behavior.

interface PaymentMethodsProps {
  slots?: {
    Methods?: PaymentMethodHandlers;
  };
}

PlaceOrder slots

The slots for the PlaceOrder container allow you to customize its appearance and behavior.

interface PlaceOrderProps {
  slots?: {
    Content?: SlotProps<ContentSlotContext>;
  };
}

Content slot

The Content slot allows you to customize the content section of the PlaceOrder container.

Example

import { render as provider } from '@dropins/storefront-checkout/render.js';
import { PlaceOrder } from '@dropins/storefront-checkout/containers/PlaceOrder.js';

await provider.render(PlaceOrder, {
  slots: {
    Content: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Content';
      ctx.appendChild(element);
    }
  }
})(block);

TermsAndConditions slots

The slots for the TermsAndConditions container allow you to customize its appearance and behavior.

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

Agreements slot

The Agreements slot allows you to customize the agreements section of the TermsAndConditions container.

Example

import { render as provider } from '@dropins/storefront-checkout/render.js';
import { TermsAndConditions } from '@dropins/storefront-checkout/containers/TermsAndConditions.js';

await provider.render(TermsAndConditions, {
  slots: {
    Agreements: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Agreements';
      ctx.appendChild(element);
    }
  }
})(block);