SAP Digital Payments Integration

The SAP Digital Payments integration provides an out-of-the-box solution for integrating payment service providers with your storefront. This integration simplifies the payment process by offering SAP Digital Payments with ready-to-use PSP connectivity.

SAP Digital Payments integration is an out-of-the-box alternative to current custom payment service provider (PSP) integrations. This integration uses SAP Digital Payments with ready-to-use PSP connectivity.

For more information, see SAP Digital Payments Integration.

Requirements

To integrate SAP Digital Payments with composable storefront, you must have one of the following:

SAP Commerce Cloud 2105, along with SAP Commerce Cloud, Integration Extension Pack 2108 or later
SAP Commerce Cloud 2011, along with SAP Commerce Cloud, Integration Extension Pack 2102 or later

Enabling SAP Digital Payment Integration in composable storefront

To enable SAP Digital Payments Integration in composable storefront, you need to configure both the SAP Commerce Cloud back end, and the composable storefront front end.

Configuring SAP Commerce Cloud

The following steps describe how to configure the SAP Commerce Cloud back end for integration with SAP Digital Payments.

Procedure

Follow the steps for Setting Up SAP Commerce Cloud for use with Composable Storefront.
Enable the SAP Digital Payments Extensions.

For more information, see SAP Digital Payments Integration.
Build and update the system so that the new functionality provided by the SAP Digital Payments integration extensions is available.

This step also creates sample CMS data for the electronics-spaContentCatalog content catalog.

Configuring Composable Storefront

Perform the following steps after you have set up your composable storefront. For more information, see Building the Composable Storefront From 5.2 Libraries.

Procedure

Install the SAP Digital Payments integration library by running the following command from within the root directory of your storefront application:

ng add @spartacus/digital-payments

When you run this command, the schematics create a module for the Digital Payments integration that includes all of the required imports and configuration.

Alternatively, you can create the module manually and import it into your application, as shown in the following example:

import { NgModule } from '@angular/core';
import { CHECKOUT_FEATURE } from '@spartacus/checkout/base/root';
import { CmsConfig, I18nConfig, provideConfig } from '@spartacus/core';
import {
  dpTranslationChunksConfig,
  dpTranslations,
} from '@spartacus/digital-payments/assets';
@NgModule({
  providers: [
    provideConfig(<CmsConfig>{
      featureModules: {
        [CHECKOUT_FEATURE]: {
          module: () =>
            import('@spartacus/digital-payments').then(
              (m) => m.DigitalPaymentsModule
            ),
        },
      },
    }),
    provideConfig(<I18nConfig>{
      i18n: {
        resources: dpTranslations,
        chunks: dpTranslationChunksConfig,
        fallbackLang: 'en',
      },
    }),
  ],
})
export class DigitalPaymentsFeatureModule {}

Build and start the storefront app to verify your changes.

Note

The DigitalPaymentsModule is a wrapper module that imports the CheckoutModule. As a result, it is necessary for the DigitalPaymentsModule to override the CheckoutModule for the checkout feature. For this to work properly, you need to configure the CHECKOUT_FEATURE to lazy load Digital Payments (as shown in the example above), and then in your storefront app, you need to ensure the DigitalPaymentsFeatureModule is imported after the CheckoutModule.

Configuring SAP Digital Payments for B2B Checkout and Scheduled Replenishment

When you use schematics to install the Digital Payments integration library, the schematics automatically generate the DigitalPaymentsFeatureModule, which works with the base composable storefront checkout feature. To make Digital Payments work with the B2B checkout or scheduled replenishment, you can create the necessary wrapper module manually, and update the DigitalPaymentsFeatureModule, as shown below.

The following is an example of the wrapper module that is needed for Digital Payments to work with the B2B checkout:

import { NgModule } from '@angular/core';
import { CheckoutB2BModule } from '@spartacus/checkout/b2b';
import { DigitalPaymentsModule } from '@spartacus/digital-payments'
@NgModule({
  imports: [DigitalPaymentsModule, CheckoutB2BModule],
})
export class B2BDigitalPaymentsModule {}

The following is an example of the updated DigitalPaymentsFeatureModule that is configured to work with the B2B checkout:

provideConfig(<CmsConfig>{
  featureModules: {
    [CHECKOUT_FEATURE]: {
      module: () =>
        import('./b2b-digital-payments.module').then(
          (m) => m.B2BDigitalPaymentsModule
        ),
    },
  },
}),

The following is an example of the wrapper module that is needed for Digital Payments to work with scheduled replenishment:

import { NgModule } from '@angular/core';
import { CheckoutScheduledReplenishmentModule } from '@spartacus/checkout/scheduled-replenishment';
import { DigitalPaymentsModule } from '@spartacus/digital-payments'
@NgModule({
  imports: [DigitalPaymentsModule, CheckoutScheduledReplenishmentModule],
})
export class ReplenishmentDigitalPaymentsModule {}

The following is an example of the updated DigitalPaymentsFeatureModule that is configured to work with scheduled replenishment:

provideConfig(<CmsConfig>{
  featureModules: {
    [CHECKOUT_FEATURE]: {
      module: () =>
        import('./replenishment-digital-payments.module').then(
          (m) => m.ReplenishmentDigitalPaymentsModule
        ),
    },
  },
}),