# Checkout overview

Learn about Checkout and how you can start using it.

Learn more about how to implement Checkout in our self-paced Implement Checkout module.

## What is Checkout

Checkout is an out-of-the-box checkout solution that offers merchants a straightforward to implement, and conversion efficient way to add a checkout system to their shopper experiences.
Additionally, it provides you the flexibility to support existing and future channels, and the speed to convert new sales opportunities.

Checkout supports two modes:

- Complete Checkout mode to create and customize the entire checkout experience with Checkout.
- Payment Only mode to keep an existing checkout flow but accept payments using the Checkout payment functionality.

Checkout includes everything required to provide the checkout functionality, such as infrastructure, [APIs](https://docs.commercetools.com/checkout/payment-intents-api.md), as well as the client [SDK](https://docs.commercetools.com/checkout/browser-sdk.md). Integrations with third-party services, such as payment service providers, can be configured through [commercetools Connect](https://docs.commercetools.com/connect).

## Why Checkout

Implementing a checkout solution might seem straightforward. However, it involves integrating product catalog, order processing, pricing, cart management, and payment service providers (PSPs). Beyond designing the interface, it requires time and effort to ensure correct, secure, and performant execution.

With Checkout, you can significantly accelerate your time to market. The [Checkout Browser SDK](https://docs.commercetools.com/checkout/browser-sdk.md) drastically lowers the need to build and maintain Checkout, including PSP integration. By leveraging our expertise and ready-made features, you can focus on other critical aspects of your business, reduce development time, and get your product in front of customers faster, giving you a competitive edge in the market.

## Features

- Out-of-the-box checkout UI: create a one-page checkout experience with minimal development effort.
- Seamless and fast integration: reduce 50 API calls to 3 to create an adaptable checkout solution, and go live 80% faster with a wide range of Composable Commerce APIs and features.
- Built-in PCI compliance: handle payments securely and confidently without the burden of compliance worries. Checkout is compliant with the [payment card industry data security standard (PCI DSS)](https://docs-prv.pcisecuritystandards.org/PCI%20DSS/Standard/PCI-DSS-v4_0_1.pdf), the current compliance standard.
- Localization: localize your checkout experience to display local currencies, regional tax details, and offer multi-language support.
- Customization: customize Checkout with rule-based routing, for example, show payment method X in country Y, or show payment method A when product B is added to the cart.
- Real-time feedback: subscribe to event [Messages](https://docs.commercetools.com/checkout/messages.md) to receive real-time feedback about activities in the checkout process, helping you stay informed and improve customer experiences.

## Use cases

Checkout empowers you to elevate your commerce capabilities by providing seamless shopping experiences to customers and helping you in making every touchpoint a sales opportunity.

The following are some of the key scenarios where our checkout solution can be used:

- Convert campaign pages and microsites into seamless shopping experiences. By adding a "Buy Now" button and integrating Checkout, customers can complete their purchase directly within the campaign or microsite, thus eliminating the need for redirects to the main commerce site.
- Use QR codes on product packaging to instantly check out the product. You will not be redirected to a shop page, but instead, to the checkout process directly.
- Take advantage of an effortless process when integrating challenging shopping features while creating mobile applications to enhance customer connections.

## Complete Checkout and Payment Only modes

Depending on your needs, you can use Checkout in two modes:

- Complete Checkout
- Payment Only

### Complete Checkout mode

The Complete Checkout mode is recommended if you want to create and customize your entire checkout experience with Checkout.

When using this mode, you can leverage all the Checkout functionality to provide your customers with the following:

- Shipping and billing address forms
- Selection of the shipping method
- Selection of the payment method and entry of payment data
- Acceptance of terms and conditions
- Order summary
- Checkout success and failure pages

### Payment Only mode

The Payment Only mode lets you keep your existing checkout flow, but you can use Checkout to accept payments. This mode renders a payment method component that displays your available payment methods and communicates with PSPs (to process the payment) and the Carts and Orders API (to create the Order).

When using Payment Only mode, you can leverage the order creation and payment functionality of Checkout to let your customers select a payment method and enter their payment data. Other Checkout functionality, such as adding an address or shipping method, is not available.

## Checkout architecture

Checkout contains several components that work together to process payments and manage the checkout flow.

### Checkout Application

The Checkout Application is the commercetools-hosted service that runs the checkout logic. It orchestrates everything during a customer's checkout: it reads or updates Cart and Order data, communicates with payment providers, and enforces the configurations you set.

Depending on the Checkout [mode](https://docs.commercetools.com/checkout/overview.md#complete-checkout-and-payment-only-modes), you can create two types of Applications:

- Complete Checkout: corresponds to the Complete Checkout mode. In addition to the general settings, you can activate the discount code functionality on your checkout, add user agreements, and add Payment Integrations.
- Payment Only: corresponds to the Payment Only mode. You can configure only the general settings and add Payment Integrations.

You can create and configure Checkout Applications through the Merchant Center, and then integrate with them by using the Checkout APIs/SDK from your code.

### Connectors

[Connectors](https://docs.commercetools.com/checkout/connectors-and-applications.md#connectors) are integrations between Checkout and third-party systems, primarily Payment Service Providers (PSPs) and gift card systems. Connectors provide an abstraction layer, and handle the heavy lifting, when interacting with external payment APIs.

commercetools provides a marketplace of public Connectors, such as Adyen, PayPal, and Stripe, that you can install and use. You can also use custom (Organization) Connectors if you need your own integration; for example, to a PSP that isn't provided.

Connectors determine the [Payment Integration types](https://docs.commercetools.com/checkout/connectors-and-applications.md#payment-integration-types) and [supported payment methods](https://docs.commercetools.com/checkout/connectors-and-applications.md#supported-psps-payment-integration-types-and-payment-methods) based on the PSP. For example, an Adyen Connector can provide you with methods like credit card, Klarna, and Apple Pay, whereas a PayPal Connector offers only PayPal payments.

Before setting up a Checkout Application, you must install at least one Connector.

### Merchant Center configuration

In the Merchant Center, you can manage Checkout settings, such as connecting payment providers (through Connectors) and creating Applications. An Application represents a specific checkout configuration for a certain context or purpose; for example, an Application for a specific brand or country.

You can create multiple Applications under one Project, even combining Complete Checkout and Payment Only Applications as needed.

### Browser SDK

The [Checkout Browser SDK](https://docs.commercetools.com/checkout/browser-sdk.md) lets you embed the checkout UI into your storefront. Available as an `npm` package or a JavaScript file, the SDK provides methods to start the checkout process. When invoked, the SDK loads the Checkout Application's UI in either a full-screen overlay or inline within an element on your page.

Depending on the SDK method you call, you can launch the UI and flow for either the Complete Checkout or Payment Only mode.

### Component relationships

The following diagram shows how Checkout components interact with each other:

```mermaid
flowchart TD

  MC["Merchant Center"] -->|Installs & Manages| CA["Checkout Application<br/><small>(Complete or Payment Only)</small>"]

  subgraph ConnectMarketplace["Connect Marketplace"]
	  CPC["Public Connectors<br/><small>(Adyen, PayPal, Stripe...)</small>"]
	  OCC["Organization Connectors<br/><small>(Custom PSP integrations)</small>"]
  end

  ConnectMarketplace -->|Supplies Connectors| CO["Connector<br/><small>(Adyen Account: 1234)</small>"]

  subgraph "Payment Hub <br/>(Checkout + Payment Integrations)"
	  CO
	  CA
	  CO -->|Provides Payment Methods| CA
  end

  CO -->|Reads/Updates| CoCoPay["Payment and <br/>Payment Methods"]
  CO -->|Integrates with| PSP[Payment <br/>Providers]
  CA -->|Reads/Updates| CartOrder[Cart and Order data]

  subgraph Frontend
	  SDK["Browser SDK<br/><small>(npm / JS library)</small>"]
	  SDK -->|Embeds Checkout UI| CA
  end

```

### Integration flows

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

Complete Checkout 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

```

Payment Only 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

```

For detailed integration instructions, see [Integrate Checkout](https://docs.commercetools.com/checkout/installing-checkout.md).

## Getting started workflow

To get started with Checkout, follow these steps:

1. In the Merchant Center main menu, click Checkout. Then, [confirm permissions and a Subscription](https://docs.commercetools.com/checkout/permissions-subscription.md).
2. [Install at least one Connector from Connect](https://docs.commercetools.com/checkout/connectors-and-applications.md#connectors).
3. [Create at least one Application](https://docs.commercetools.com/checkout/connectors-and-applications.md#applications).
4. [Integrate Checkout with your web application](https://docs.commercetools.com/checkout/installing-checkout.md).
5. Customize the following according to your needs:

   - [Font family and colors](https://docs.commercetools.com/checkout/custom-style.md)
   - [Texts and labels](https://docs.commercetools.com/checkout/custom-texts-labels.md)
   - [Address forms](https://docs.commercetools.com/checkout/custom-address-forms.md)
   - [Address field validation rules](https://docs.commercetools.com/checkout/custom-address-fields-validation.md)
   - [Payment Integrations](https://docs.commercetools.com/checkout/payment-integrations-customization.md)

   When using Checkout in Payment Only [mode](https://docs.commercetools.com/checkout/overview.md#complete-checkout-and-payment-only-modes), you can only customize the style, texts and labels, and Payment Integrations.

## Access Checkout using an SDK

Checkout can be accessed using the [Java, TypeScript, and .NET SDKs](https://docs.commercetools.com/checkout/dev-tooling.md). These SDKs, which are separate from the Checkout Browser SDK, provide a convenient way to interact with commercetools HTTP APIs, including Import API and Audit Log API.

For information on setting up and using these SDKs, see the following documentation:

- [Java](https://docs.commercetools.com/checkout/dev-tooling/java-sdk-getting-started?activePath=checkout-api)
- [TypeScript](https://docs.commercetools.com/checkout/dev-tooling/ts-sdk-getting-started?activePath=checkout-api)
- [.NET](https://docs.commercetools.com/checkout/dev-tooling/dotnet-sdk-getting-started?activePath=checkout-api)

## Related pages

- [Section overview page](https://docs.commercetools.com/checkout.md)
- [Next page: Hosts and authorization](https://docs.commercetools.com/checkout/hosts-and-authorization.md)