This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

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

<WebView
  source={{ uri: { commercetoolsCheckoutHost } }}
  onMessage={(messageEvent) => {
    const data = JSON.parse(messageEvent.nativeEvent.data);
    switch (data.code) {
      case 'checkout_cancelled':
        // do something
        break;
      case 'order_created':
        // do something
        break;
      case '...':
        // do something
        break;
    }
  }}
  injectedJavaScript={`
   window.commercetoolsCheckoutData =  {
     projectKey: '{projectKey}',
     applicationKey: '{applicationKey}',
     cartId: '{cartId}',
     host: 'https://app.checkout.{region}.commercetools.com',
     accessToken: '{accessToken}',
     locale: '{locale}',
   }


   window.initCommercetoolsCheckout();


   window.addEventListener('message', function (messageEvent) {
     if (origin === '{commercetoolsCheckoutHost}') {
       window.ReactNativeWebView.postMessage(JSON.stringify(messageEvent.data));
     }
   });
 `}
/>;