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

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.

Quick example

The Checkout drop-in is included in the Commerce boilerplate . This example shows the basic pattern:

// 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);
}

New to drop-ins? See the Using drop-ins guide for complete step-by-step instructions.

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: @dropins/storefront-checkout

Version: 3.0.0-beta3 (verify compatibility with your Commerce instance)

Example container: AddressValidation

Learn more

• Containers - Available UI components and configuration options
• Initialization - Customize initializer settings and data models
• Functions - Control drop-in behavior programmatically
• Events - Listen to and respond to drop-in state changes
• Slots - Extend containers with custom content