Integrate Checkout
Use the Checkout Browser SDK to integrate commercetools Checkout with web applications.
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}
ormanage_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
To create the API Clients, you can use the Admin client template in the Merchant Center.
You can create a single API Client with all the required scopes. However, we recommend creating two for security reasons.
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}/sessionsAuthorization: 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.
Locale | Language | Price formatting |
---|---|---|
en (fallback locale) | English | €10,000.00 |
de | German | 10.000,00 € |
en-us | English - United States | $10,000.00 |
fr | French | 10.000,00 € |
it | Italian | 10.000,00 € |