# Introduction to Checkout

commercetools [Checkout](/checkout/overview.md) is a pre-built checkout solution that handles the payment and order completion flow for commercetools. Checkout provides a pre-built UI and backend logic that integrates with Payment Service Providers (PSPs) through Connect and manages Cart-to-Order conversion.

## Checkout features

Checkout provides out-of-the-box PSP integration through Connect, a hosted checkout UI via the Browser SDK, built-in PCI DSS compliance, multi-region support, localization, and event messaging. These capabilities reduce the time required to implement payment processing by providing the infrastructure, PSP integrations, and UI components needed for a complete checkout flow.

For details on each feature, see [Checkout overview](/checkout/overview.md#features).

## Checkout modes: Complete Checkout and Payment Only

Checkout operates in two modes. [Complete Checkout mode](/checkout/overview.md#complete-checkout-mode) delegates the entire checkout UI and flow to Checkout, including address forms, shipping method selection, payment processing, and order summary. [Payment Only mode](/checkout/overview.md#payment-only-mode) handles only payment processing. You manage the rest of the checkout flow yourself, and the Cart must have shipping and billing information before initializing payment.

For a full description of each mode, see [Complete Checkout and Payment Only modes](/checkout/overview.md#complete-checkout-and-payment-only-modes).

## Checkout architecture

Checkout contains several components that work together to process payments and manage the checkout flow: the Checkout Application (backend service), Connectors (PSP integrations), Merchant Center configuration, and the Browser SDK (frontend integration).

For a detailed description of each component and how the components interact, see [Checkout architecture](/checkout/overview.md#checkout-architecture).

## Checkout Sessions

Checkout Sessions authorize and configure individual checkout instances. You can create Sessions from your Backend for Frontend (BFF) by calling the Sessions API.

A Session request requires the following:

- An API Client access token with the `manage_sessions` [scope](/checkout/hosts-and-authorization.md#authorization)
- The Cart `id` or `key`
- The Checkout Application `id` or `key`

The Sessions API returns a `sessionId` value, which you can provide to the Browser SDK when initializing the checkout flow.

```typescript title="Create a Checkout Session from your BFF"
import fetch from "node-fetch";

async function createCheckoutSession(
  region: string,
  projectKey: string,
  token: string,
  cartId: string,
  applicationKey: string
) {
  const url = `https://session.${region}.commercetools.com/${projectKey}/sessions`;

  const body = {
    cart: {
      cartRef: {
        id: cartId,
      },
    },
    metadata: {
      applicationKey: applicationKey,
    },
  };

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    throw new Error(`Session creation failed: ${response.status}`);
  }

  const data = await response.json();
  return data.id; // This is the sessionId
}
```

## Checkout workflows

The following sections describe the typical integration flows for Complete Checkout and Payment Only modes.

### Complete Checkout workflow

Before initializing the Complete Checkout mode, you must make sure that a Cart exists in commercetools (either an anonymous Cart or a Customer Cart). Checkout doesn't create Carts. For more information about how to prepare a Cart, see [Cart preparation and review](/learning-implement-checkout/custom-checkout/cart-preparation-and-review.md).

The following diagram shows the Complete Checkout initialization flow:

```mermaid
sequenceDiagram
  participant Browser
  participant BFF
  participant Session API
  participant Checkout API

  Browser->>BFF: Request Checkout page
  BFF->>Session API: Create Session
  Session API-->>BFF: Return [sessionId]
  BFF-->>Browser: Return [sessionId]
  Browser->>Checkout API: Initialize CheckoutFlow using Checkout SDK with [sessionId]
  Checkout API-->>Browser: Return Checkout configuration and Cart
  Browser->>Browser: Checkout

```

This sequence performs the following actions:

1. Initializes the Checkout Session
2. Associates a Customer Cart to it
3. Specifies which Application to use for the checkout. This step, in turn, specifies the customization and localization settings that are to be used during checkout.
4. Renders the Checkout UI directly in the browser. By default, the Checkout UI is rendered in full screen in an absolute positioned `<div>` element or inline to a specified `<div>` or `<span>` element.

![Checkout UI displaying the shipping address form with fields for Customer information such as name, email, country selector, street address, ZIP code, city, and phone number. A summary panel on the right side shows the Cart item and total.](https://docs.commercetools.com/learning-implement-checkout/images/checkout-ui-address-form.png)

The Checkout UI guides the Customer to provide their shipping and billing addresses, apply discount codes, select the delivery method, and provide their payment information.

![Checkout UI displaying available payment methods like credit card, PayPal, and other payment options for the Customer to select.](https://docs.commercetools.com/learning-implement-checkout/images/payment-options-ui.png)

When the Customer completes the payment successfully, Checkout automatically creates an Order from the Cart and shows the **Payment successful** page.

![The Payment successful page displaying the Order confirmation with a success message and Order details.](https://docs.commercetools.com/learning-implement-checkout/images/payment-success-page.png)

### Payment Only workflow

Before initializing the Payment Only mode, make sure that the following conditions are met for the Cart:

- It exists in commercetools and is [ready for checkout](/learning-implement-checkout/custom-checkout/cart-preparation-and-review.md)
- It contains specific [shipping information](/learning-implement-checkout/custom-checkout/shipping.md)
- It contains specific [billing information](/learning-implement-checkout/custom-checkout/billing.md)

Payment Only mode provides control over when and where the payment UI renders. Your application manages all checkout steps, except for payment capture.

The following diagram shows the Payment Only initialization flow:

```mermaid
sequenceDiagram
  participant Browser
  participant BFF
  participant Session API
  participant Checkout API

  Browser->>Browser: Customer advances to payment details
  Browser->>BFF: Request session
  BFF->>Session API: Create session
  Session API-->>BFF: Return [sessionId]
  BFF-->>Browser: Return [sessionId]
  Browser->>Checkout API: Initialize paymentFlow (with [sessionId])
  Checkout API-->>Browser: Payment configuration returned
  Browser->>Browser: SDK displays payment options UI

```

This sequence performs the following actions:

1. Initializes the Checkout Session
2. Associates the Customer Cart to it
3. Specifies which Application to use for the checkout, it must be of type **Payment Only**
4. Renders the hosted payment UI directly in the browser (under a `<div>` or `<span>` element of your choice)

![Payment Only UI displaying the Payment method selection embedded within a custom checkout flow.](https://docs.commercetools.com/learning-implement-checkout/images/payment-only-ui.png)

## Key takeaways

- Checkout is a service that manages payment processing and checkout flows for commercetools applications.
- Checkout operates in two modes: Complete Checkout (full checkout UI and flow) and Payment Only (payment processing only).
- Checkout Applications are configured in the Merchant Center and define the checkout behavior, localization, and payment methods.
- Connectors integrate Checkout with Payment Service Providers like Stripe, Adyen, and PayPal without requiring custom integration code.
- Checkout Sessions authorize individual checkout instances and are created from your BFF by using the Sessions API.
- The Browser SDK embeds the Checkout UI in your application and handles communication with the Checkout service.
- Complete Checkout mode requires only a Cart to exist before initialization, while Payment Only mode requires the Cart to have shipping and billing information.
- Checkout manages PCI DSS compliance for payment data, reducing your security and compliance responsibilities.

## Related pages

- [Area overview page with navigation](/learning-implement-checkout.md)
- [Previous page: Overview](/learning-implement-checkout/implement-commercetools-checkout/overview.md)
- [Next page: Set up Checkout](/learning-implement-checkout/implement-commercetools-checkout/set-up-checkout.md)
- [Search documentation and API specs](/search.md)