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.

Features

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

Assigning an email to the cart.
Setting the shipping address.
Selecting the shipping method.
Providing payment details.
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.

Installation

Add the module files

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 Extension

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 Implementation

1. Extend SDK configuration

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 page

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.