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 Alokai 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.

Frontend Implementation

1. Create checkout page

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

// storefront-unified-nextjs/app/[locale]/(checkout)/checkout/page.tsx

import { CheckoutClient } from '@sf-modules/checkout-b2b';
import { pick } from 'lodash-es';
import { NextIntlClientProvider } from 'next-intl';
import { getMessages, getTranslations } from 'next-intl/server';

export async function generateMetadata() {
  const t = await getTranslations('CheckoutPage');

  return {
    title: t('heading'),
  };
}

export default async function CheckoutPage() {
  const messages = await getMessages();

  return (
    <NextIntlClientProvider
      messages={pick(messages, [
        'CheckoutPage',
        'AddressModal',
        'OrderSummary',
        'AddressModal',
        'AddressFormFields',
        'CheckoutB2B',
      ])}
    >
      <CheckoutClient />
    </NextIntlClientProvider>
  );
}

We also need to create layout file for checkout.

// storefront-unified-nextjs/app/[locale]/(checkout)/checkout/layout.tsx

import { SfButton, SfIconArrowBack } from '@storefront-ui/react';
import { getTranslations } from 'next-intl/server';
import type { PropsWithChildren } from 'react';

import { Link } from '@/config/navigation';

interface DefaultLayoutProps extends PropsWithChildren {}
export default async function DefaultLayout({ children }: DefaultLayoutProps) {
  const t = await getTranslations('CheckoutPage');

  return (
    <>
      <div className="mb-20" data-testid="checkout-layout">
        <div className="mb-10 mt-4 flex justify-between px-4 md:mt-8 md:px-0">
          <h1 className="font-semibold typography-headline-3 md:typography-headline-1">{t('heading')}</h1>
          <SfButton
            as={Link}
            className="flex md:hidden"
            data-testid="back-button-mobile"
            href="/cart"
            size="sm"
            slotPrefix={<SfIconArrowBack />}
            variant="tertiary"
          >
            {t('backButton')}
          </SfButton>
          <SfButton
            as={Link}
            className="hidden md:flex"
            href="/cart"
            slotPrefix={<SfIconArrowBack />}
            variant="tertiary"
          >
            {t('backButton')}
          </SfButton>
        </div>
        {children}
      </div>
    </>
  );
}

2. 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/app/[locale]/(checkout)/order/success/page.client.tsx

//..

export default function OrderSuccessClientPage() {
  const t = useTranslations('OrderPage.Success');
  const checkoutB2BTranslate = useTranslations('CheckoutB2B'); 
  //..
    <span className="font-medium">{t('paymentMethod')}</span>: {order.paymentMethod}
  </div>
  {order?.$custom?.costCenter && (
    <div>
      <span className="font-medium">{checkoutB2BTranslate('costCenter')}</span>: {order.$custom.costCenter.name}
    </div>
  )}
  {order?.billingAddress && (
  //..

The last step to handle translations properly is to add the CheckoutB2B key to the NextIntlClientProvider component in the order/success page.

// storefront-unified-nextjs/app/[locale]/(checkout)/order/success/page.tsx

//..

export default function OrderSuccessPage() {
  const messages = useMessages();

  return (
    <NextIntlClientProvider messages={pick(messages, ['OrderPage.Success'])}>    <NextIntlClientProvider messages={pick(messages, ['OrderPage.Success', 'CheckoutB2B'])}>      <OrderSuccessClientPage />
    </NextIntlClientProvider>
  );
}

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.