SAP Commerce Cloud: B2B Checkout

This module extends the checkout process in the Storefront to support B2B features in SAP Commerce Cloud. With this module, you can easily integrate two different payment types, such as account (invoice) and credit card. You'll be able to select the cost center and one of it's shipping addresses.

Features

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

Assigning a payment type to the cart.
Setting the cost center (account payment type only).
Setting the shipping address.
Selecting the shipping method.
Providing payment details (credit card payment type only).
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 with the credit-card payment type 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-b2b -e sapcc-b2b

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-b2b inside.

Middleware Extension

To enable the completion of the B2B checkout process in SAP Commerce Cloud, we need to install the extension in Middleware configuration that handles payment type, cost centers and setting payment details.

// 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 { b2bCheckoutExtensionFactory } from "@sf-modules-middleware/checkout-b2b"; 
// ...

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

Checkout for the B2B platform requires an overridden version of the setCartAddress method. To enable that version, edit the Unified extension:

// storefront-middleware/integrations/sapcc/extensions/unified.ts

import {   b2bCheckoutOverrideMethods, } from "@sf-modules-middleware/checkout-b2b"; // ...

export const unifiedApiExtension = createUnifiedExtension({
  methods: {     override: {       ...b2bCheckoutOverrideMethods    },   }, // ...
});

As B2B checkout module extends the checkout process with the account payment type and the cost centers addresses, it's necessary to add custom normalizer fields:

// storefront-middleware/integrations/sapcc/extensions/unified.ts

import {
  b2bCheckoutOverrideMethods,
  normalizerCustomFields, } from "@sf-modules-middleware/checkout-b2b";
// ...

export const unifiedApiExtension = createUnifiedExtension({
  normalizers: {     addCustomFields: [normalizerCustomFields],   },   methods: {
    override: {
      ...b2bCheckoutOverrideMethods
    },
  },
// ...
});

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

// storefront-middleware/types.ts

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

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

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,   B2BCheckoutEndpoints, } from 'storefront-middleware/types'; 
//...

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
  unified: buildModule(middlewareModule<UnifiedEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
  b2bCheckout: buildModule(middlewareModule<B2BCheckoutEndpoints>, {     apiUrl: `${middlewareUrl}/commerce/b2b-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 { useTranslation } from 'next-i18next';
import { Checkout } from '@sf-modules/checkout-b2b';
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;

3. Add the B2B cost center info to the order success page (Nice to have for B2B store).

Additionally, the cost center field can be added to order success page:

// storefront-unified-nextjs/pages/order/success.tsx

//..
  <span className="font-medium">{t('paymentMethod')}</span>: {order.paymentMethod}
</div>
{order?.costCenter && (
  <div>
    <span className="font-medium">{t('costCenter')}</span>: {order.costCenter.name}
  </div>
)}
{order?.billingAddress && (
//..

Naturally, the costCenter string's translation must be added.

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