Vue Storefront is now Alokai! Learn More
Checkout

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.

Middleware Extension

To enable the completion of the checkout process in SAP Commerce Cloud, we need to extend the unified extension API with a method that handles setting payment details.

That step is already provided with the Storefront and it includes:

  1. Extending the unifiedApiExtension methods with the apiMethods property.
  2. Implementing the new createPaymentAndPlaceOrder method.
// middleware.config.ts
import { type Config, type Context, createUnifiedExtension, methods, normalizers } from "@vsf-enterprise/unified-api-sapcc";
import { createPaymentAndPlaceOrder } from "[checkout module path]"; 
const apiMethods = methods<typeof normalizers>(); const unifiedApiExtension = createUnifiedExtension<Context>()({
  normalizers,
  apiMethods: {
    ...apiMethods,     createPaymentAndPlaceOrder, // [!code ++]
  },
});

With these changes, a custom createPaymentAndPlaceOrder method will be available in the SDK.

Frontend Implementation

1. Create checkout page

In your pages directory create a checkout page and add the layout to it:

// pages/checkout.tsx
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')}>

    </CheckoutLayout>
  );
}

export default CheckoutPage;

2. Add Checkout module

Add the checkout component from module to the checkout page. Just import it add it to the template:

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