Introduction to commercetools Checkout

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.

Checkout modes: Complete Checkout and Payment Only

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).

Checkout Sessions

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

A Session request requires the following:

• An API Client access token with the manage_sessions scope
• The Cart id or key
• The Checkout Application id or key

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

The following diagram shows the Complete Checkout initialization flow:

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.

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.

Payment Only workflow

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

• It exists in Composable Commerce and is ready for checkout
• It contains specific shipping information
• It contains specific billing information

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:

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)

Key takeaways

• commercetools Checkout is a service that manages payment processing and checkout flows for Composable Commerce 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.

Test your knowledge