Integrate commercetools Checkout

Placeholder values

The code samples in this documentation contain placeholders which must be replaced with the following values.

Prerequisites

The following prerequisites apply both for integrating commercetools Checkout using the commercetools Checkout Browser SDK and the WebView component.

• A Composable Commerce Project

• A commercetools Checkout account with at least one Application configured

• A Composable Commerce public API Client with the following scopes:

  • view_published_products:{projectKey}
  • view_categories:{projectKey}
  • manage_my_profile:{projectKey} or manage_my_profile:{projectKey}:{storeKey}
  • manage_my_payments:{projectKey}
  • manage_my_orders:{projectKey} or manage_my_orders:{projectKey}:{storeKey}
  • manage_my_shopping_lists:{projectKey}
  • create_anonymous_token:{projectKey}

• If you want to create your Carts with a private API Client, the API Client must have at least the following scope:

  • manage_orders:{projectKey} or manage_orders:{projectKey}:{storeKey}
  To create a public API Client, you can use the Mobile & single-page application client template. To create a private API Client, you can use the Admin client template.

Create a Cart

To initialize commercetools Checkout, you must always provide the {cartId} of a Cart. You can create a Cart with one of the following Composable Commerce APIs:

• My Carts: using the public API Client, which has the required manage_my_orders:{projectKey} scope.

• Carts: using the private API Client, which has the required manage_orders:{projectKey} scope.

  To create a Cart with the Carts API, you first need to do one of the following:

  • Create an access token with the anonymous session flow and then provide the {anonymousId} as the value of the anonymousId field of the CartDraft.
  • Create an access token with the password flow and then provide the {customerId} as the value of the customerId field of the CartDraft.

Locales

When initializing commercetools 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.

Regions and hosts

The commercetools Checkout application is available at the following hosts.