Checkout overview

Ask about this Page

Copy for LLM

View as Markdown

Learn about Checkout and how you can start using it.

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

What is Checkout

Checkout is a prebuilt solution, in addition to Composable Commerce. It offers a seamless, efficient, and safer checkout solution to integrate into your commerce websites or applications. It also provides the flexibility to support existing and future channels, and the speed to convert new sales opportunities. The Checkout application is available by default in the Merchant Center.

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 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), 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 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 Composable Commerce (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 in Composable Commerce, communicates with payment providers, and enforces the configurations you set.

Depending on the Checkout mode, 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 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 and supported 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 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:

Integration flows

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

Complete Checkout flow:

Payment Only flow:

For detailed integration instructions, see Integrate Checkout.

Workflow

To get started with Checkout, follow these steps:

In the Merchant Center main menu, click Checkout. Then, confirm permissions and a Subscription.
Install at least one Connector from Connect.
Create at least one Application.
Integrate Checkout with your web application.
Customize the following according to your needs:
When using Checkout in Payment Only mode, you can only customize the style, texts and labels, and Payment Integrations.

Access Checkout using a Composable Commerce SDK

Checkout can be accessed using Composable Commerce's Java, TypeScript, and .NET SDKs. These SDKs, which are separate from the Checkout Browser SDK, provide a convenient way to interact with Composable Commerce APIs, including the HTTP API, Import API, and Audit Log API.

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

Checkout overview

What is Checkout.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Why Checkout.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Features.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Use cases.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Complete Checkout and Payment Only modes.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Complete Checkout mode.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Payment Only mode.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Checkout architecture.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Checkout Application.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Connectors.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Merchant Center configuration.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Browser SDK.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Component relationships.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Integration flows.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Workflow.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}

Access Checkout using a Composable Commerce SDK.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}