Integrate Checkout

Prerequisites

Following are the prerequisites to integrate commercetools Checkout using the Checkout Browser SDK:

• A Composable Commerce Project
• An API Client with at least the manage_orders:{projectKey} or manage_orders:{projectKey}:{storeKey} scope
• An API Client with at least the manage_sessions scope
• Checkout added to your Project
• At least one payment Connector and one Application configured

Create Carts

Checkout can only be initialized for Carts created with the Carts API. You must provide the id of the Cart in the request to create a Checkout Session, which is required to initialize Checkout.

Create Checkout Sessions

Checkout Sessions hold the permissions and information to initialize Checkout. To create a Checkout Session, you must include the corresponding code in your backend as follows to send a request to the Sessions API.

To send requests to the Session API, you must use an access token with at least the manage_sessions scope. In the request, you must provide the identifier of the Cart and of the Application.

The id returned in the response must be used as the value of the sessionId property in the init and checkout methods.

POST https://session.{region}.commercetools.com/{projectKey}/sessions
Authorization: Bearer <Token manage_sessions:{projectKey}>

{
    "cart": {
        "cartRef": {
            "id": "{cartId}"
        }
    },
    "metadata": {
        "applicationKey": "{applicationKey}"
    }
}

{
  "id": "537ec3b7-01f5-47b6-8a5c-3974a8bc4812",
  "expiryAt": "2024-03-13T10:20:45.661Z",
  "lastModifiedAt": "2024-03-13T09:20:45.661Z",
  "createdAt": "2024-03-13T09:20:45.661Z",
  "metadata": {
    "applicationKey": "{applicationKey}"
  },
  "activeCart": {
    "cartRef": {
      "id": "{cartId}"
    }
  },
  "state": "ACTIVE"
}

Locales

When initializing Checkout, setting the locale ensures that the checkout process is translated into the preferred language, and it also affects the formatting of numbers, such as the decimal separator for prices.

If an unsupported locale is set, the checkout process will automatically revert to en, which is the default locale.