commercetools Checkout WebView component

You can integrate commercetools Checkout within a React Native Application through a WebView component.

WebView component

This feature is still under development and, therefore, it is subject to change.

To integrate commercetools Checkout within a React Native application, you must create a WebView component which loads the commercetools Checkout application.

Through the WebView component you must inject some JavaScript code to:

  • Create a window.commercetoolsCheckoutData object with the required parameters and optional configuration.
  • Add a message event listener to forward commercetools Checkout messages to your application.
  • Call the window.initCommercetoolsCheckout function to load commercetools Checkout.
  • Create a message handler to react to the messages that commercetools Checkout sends.

For more information on the values to replace the placeholders in the following code, see this table.

WebView component for React Native ApplicationsJavaScript
source={{ uri: { commercetoolsCheckoutHost } }}
onMessage={(messageEvent) => {
const data = JSON.parse(;
switch (data.code) {
case 'checkout_cancelled':
// do something
case 'order_created':
// do something
case '...':
// do something
window.commercetoolsCheckoutData = {
projectKey: '{projectKey}',
applicationKey: '{applicationKey}',
cartId: '{cartId}',
host: 'https://app.checkout.{region}',
accessToken: '{accessToken}',
locale: '{locale}',
window.addEventListener('message', function (messageEvent) {
if (origin === '{commercetoolsCheckoutHost}') {