# System interactions

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

## Walk through a typical purchase and checkout process

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

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

**commercetools Frontend - Orchestration layer** collects the necessary information—context such as country or store, customer details, and product ID and quantity. It then calls the [Carts API](/api/projects/carts.md) to create or update a cart for the current session.
**commercetools commerce APIs** return the updated cart to **commercetools Frontend - Orchestration layer**. This is then passed to **commercetools Frontend - Experience layer**, which displays the cart to the **Customer**.

Satisfied with the items 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. Once **commercetools commerce APIs** have the shipping address, an external **Tax calculation service** is called through a **Tax integration** hosted in **Connect**.

For a [B2C Retail](/tutorials/implementation-guide/system-interactions.md#b2c-retail-system-interactions) payment, the **Customer** enters credit card details into a secure form managed by **Checkout**. **Checkout** then accesses a **Payment gateway** to authorize the card.

In a [guide for B2B Manufacturing](/tutorials/implementation-guide/system-interactions.md#b2b-manufacturing-system-interactions) solution, for a buy-now-pay-later payment, the customer enters their purchase order number during checkout. For other payment methods, an integrated **Payment gateway** can perform various authorizations such as credit card authorization.

The authorization code, but none of the other credit card information, is passed to **commercetools** 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**. Additional integrations, hosted within **Connect**, will send the order to the seller’s **Order management system** for fulfillment.

## B2C Retail system interactions

![End to end flow for a typical checkout process](https://docs.commercetools.com/tutorials/images/implementation-guide/system-interactions-end-to-end-b2c.png)

## B2B Manufacturing system interactions

![End to end flow for a typical checkout process](https://docs.commercetools.com/tutorials/images/implementation-guide/system-interactions-end-to-end-b2b.png)

## Related pages

- [Area overview page with navigation](/tutorials.md)
- [Previous page: Architecture](/tutorials/implementation-guide/architecture.md)