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-beta3

Container	Slots
LoginForm	Heading, Preferences
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;
    }>;
    Preferences?: SlotProps<{
      email: string;
      isEmailValid: boolean;
      isAuthenticated: 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);

Preferences slot

The Preferences slot allows you to add custom marketing preference fields within the login form. This slot enables merchants to add their own consent options (such as newsletter subscriptions, SMS updates, or promotional offers) based on their specific business needs and compliance requirements.

The slot receives a context with the following properties:

• email - The current email address entered by the user
• isEmailValid - A boolean indicating whether the email address is valid
• isAuthenticated - A boolean indicating whether the user is authenticated

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: {
    Preferences: (ctx) => {
      if (!ctx.isEmailValid || ctx.isAuthenticated) return;

      const element = document.createElement('div');
      element.innerHTML = `
        <label>
          <input type="checkbox" name="newsletter" />
          Subscribe to our newsletter
        </label>
      `;
      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);