Checkout Quick Start

The Checkout drop-in component provides a customizable UI for the checkout process. The checkout component is designed to be integrated into your storefront and provides a seamless checkout experience for customers.

Version: 2.1.0

Prerequisites

Since the checkout component relies on containers from several other drop-in components, you must install and configure those components before you can use the checkout component.

The Commerce boilerplate template includes all of the necessary drop-in components and configurations to help you get started quickly, so Adobe recommends relying on the boilerplate instead of installing, configuring, and integrating the drop-in components individually.

Admin configuration

Before you can use the checkout component on your storefront, you must enable and configure payment providers and checkout options in the Adobe Commerce Admin.

Note

The checkout overview provides a summary of supported Adobe Commerce features.

New to drop-ins? Start with the Using drop-ins tutorial for step-by-step guidance.

Need to customize? See the Initialization page for advanced configuration options.

Getting started

The Checkout drop-in is included in the Commerce boilerplate —no installation needed. For complete instructions on importing and using drop-ins in your blocks, see the Using drop-ins guide.

Quick reference

Import paths:

• Initializer: import '../../scripts/initializers/checkout.js'
• Containers: import ContainerName from '@dropins/storefront-checkout/containers/ContainerName.js'
• Provider: import { render } from '@dropins/storefront-checkout/render.js'

Package information:

• Package: @dropins/storefront-checkout
• Version: 2.1.0 (verify compatibility with your Commerce instance)
• Example container: AddressValidation

Example in boilerplate

The boilerplate includes working examples that use the Checkout drop-in. Look for blocks with names like commerce-checkout (for example, commerce-cart, commerce-checkout) in the blocks/ directory.

Start with working code

Before creating a new block, review existing blocks in the boilerplate repository to see how they import and configure the Checkout drop-in. You can copy and adapt these patterns for your needs.

Quick example

This example shows the basic pattern for using the Checkout drop-in. For complete details and advanced patterns, see the Using drop-ins guide.

// 1. Import initializer (handles all setup)
import '../../scripts/initializers/checkout.js';

// 2. Import the container you need
import AddressValidation from '@dropins/storefront-checkout/containers/AddressValidation.js';

// 3. Import the provider
import { render as provider } from '@dropins/storefront-checkout/render.js';

// 4. Render in your block
export default async function decorate(block) {
  await provider.render(AddressValidation, {
    // Configuration options - see Containers page
  })(block);
}

Tip

For container-specific configuration options and examples, see the Containers page. To customize the initializer, see the Initialization page.

Next steps

Now that you understand the basics, explore these resources:

• Using drop-ins - Complete guide with examples and patterns.
• Containers - Available UI components and their configuration options.
• Initialization - Customize initializer settings and data models.
• API functions - Control drop-in behavior programmatically.
• Slots - Extend containers with custom content.
• Events - Listen to and respond to drop-in state changes.