System interactions

Let’s walk through a typical checkout process to see how different components of the commercetools solution work together.

The Customer browses and searches the website until they find the product they’re interested in, and then clicks Add to Cart (1).

commercetools Frontend - Experience layer sends the customer’s action to commercetools Frontend - Orchestration layer for processing (2).

commercetools Frontend - Orchestration layer collects the necessary information (context such as country or store, customer information, and product ID and quantity) and calls the Composable Commerce Carts API (3) to create a new cart if none exists for the current session, or update the current cart, adding the item to the cart. Composable Commerce returns the updated cart to commercetools Frontend - Orchestration layer (4), which returns the cart to commercetools Frontend - Experience layer (5), which displays the cart to the Customer (6).

Satisfied with the item(s) in their cart, the Customer begins the checkout process. Most checkout flows typically begin by having the customer choose (or enter) their shipping address, which provides sufficient information to calculate taxes. When Composable Commerce has the shipping address information, it uses a Tax integration hosted in commercetools Connect (7) to call an external Tax calculation service (8) to calculate the cart’s taxes.

For payment, the Customer enters their credit card information directly into a secure form managed by Checkout (9), which then accesses a Payment gateway (10) to authorize the card. The authorization code, but none of the other credit card information, is passed to Composable Commerce (11) to ensure the security of the transaction.

With shipping and payment details completed, the order is submitted, and the Seller can view or review the order in the Merchant Center (12). Additional integrations, hosted within commercetools Connect, will send the order to the seller’s Order management system (13) for fulfillment.