SAP Commerce Cloud: Checkout

The Storefront boilerplate along with the checkout module provides flexibility to customize the checkout process. This guide focuses on enhancing the checkout flow for SAP Commerce Cloud, considering its unique workflow and features.

Featuresri:link

In the context of SAP Commerce Cloud integration, we'll cover the following aspects of the checkout flow using the Storefront:

ri:checkbox-circle-fill
Assigning an email to the cart.
ri:checkbox-circle-fill
Setting the shipping address.
ri:checkbox-circle-fill
Selecting the shipping method.
ri:checkbox-circle-fill
Providing payment details.
ri:checkbox-circle-fill
Placing an order using checkout data.

While many aspects of the checkout process are supported out-of-the-box by the module, completing the checkout process requires handling payment details, including billing address.

Installationri:link

Add the module filesri:link

To install the module, you need an enterprise license and credentials. Contact your Customer Support Manager if you're already a customer. If you're not a customer yet, contact our sales team.

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module checkout -e sapcc

Follow the instructions in the command line to complete the installation. To make sure the installation is finished, go to the apps/storefront-middleware/sf-modules folder and check if there's a folder named checkout inside.

Middleware Extensionri:link

To enable the completion of the checkout process in SAP Commerce Cloud, we need to install checkout extension in the Middleware configuration.

// storefront-middleware/integrations/sapcc/config.ts

import type { MiddlewareConfig } from "@vsf-enterprise/sapcc-api";
import type { ApiClientExtension, Integration } from "@vue-storefront/middleware";
import { multistoreExtension, unifiedApiExtension } from "./extensions";
+import { checkoutExtensionFactory } from "@sf-modules-middleware/checkout";

// ...

export const config = {
  location: "@vsf-enterprise/sapcc-api/server",
  configuration: {
    // ...
  },
  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
    unifiedApiExtension,
    ...(IS_MULTISTORE_ENABLED === "true" ? [multistoreExtension] : []),
    checkoutExtensionFactory(),   ],
} satisfies Integration<MiddlewareConfig>;

Then, export the type of the new extension in the storefront-middleware/types.ts file in root directory of the Middleware.

// storefront-middleware/types.ts

export {
  type UnifiedEndpoints,
} from "./integrations/sapcc/types";

export type { CheckoutEndpoints } from "@sf-modules-middleware/checkout";

Frontend Implementationri:link

1. Extend SDK configurationri:link

First, you need to add the newly installed extension to the SDK config. To do so, edit the sdk/sdk.config.ts file in your Next.js Storefront directory.

// storefront-unified-nextjs/sdk/sdk.config.ts

import { contentfulModule } from '@vsf-enterprise/contentful-sdk';
import { CreateSdkOptions, createSdk } from '@vue-storefront/next';
import type { UnifiedEndpoints } from 'storefront-middleware/types'; import type {   UnifiedEndpoints,   CheckoutEndpoints, } from 'storefront-middleware/types'; 
//...

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
  unified: buildModule(middlewareModule<UnifiedEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
  checkout: buildModule(middlewareModule<CheckoutEndpoints>, {     apiUrl: `${middlewareUrl}/commerce/checkout`,     defaultRequestConfig: {       headers: getRequestHeaders(),     },   }),   contentful: buildModule(contentfulModule, {
    apiUrl: `${middlewareUrl}/cntf`,
  }),
}));

export type Sdk = ReturnType<typeof getSdk>;

2. Create checkout pageri:link

In your pages directory create a checkout page, add the layout and the checkout component coming from module to it:

// storefront-unified-nextjs/pages/checkout.tsx

import { Checkout } from '@sf-modules/checkout';
import { useTranslation } from 'next-i18next';
import { appRoutes } from '~/config';
import { createGetServerSideProps } from '~/helpers/ssr';
import { CheckoutLayout } from '~/layouts';

export const getServerSideProps = createGetServerSideProps({ i18nNamespaces: ['address', 'cart', 'checkout'] });

export function CheckoutPage() {
  const { t } = useTranslation('checkout');

  return (
    <CheckoutLayout backHref={appRoutes.cart.compile()} backLabel={t('back')} heading={t('checkout')}>
      <Checkout />
    </CheckoutLayout>
  );
}

export default CheckoutPage;

With these steps, your checkout page is now effectively integrated with SAP Commerce Cloud, ensuring a whole checkout process from start to finish.