Payment Integration with CyberSource Example

You can integrate composable storefront with a CyberSource payment subscription in a PCI-compliant scenario, where no card information is sent through SAP Commerce Cloud.

On a default installation of composable storefront, the checkout process uses the Accelerator mocked configuration mechanism for payments. The structure and behavior of the mocked payment is very similar to CyberSource in terms of functionality, in that it uses Silent Post Order, it does the field mappings for payment details, and so on.

For more information, see Mocked Configuration.

Once CyberSource is up and running as a payment gateway in your SAP Commerce Cloud backend, refer to the information in the following sections to integrate CyberSource with composable storefront.

Providing a Custom Implementation for the CheckoutPaymentAdapter

Payment information functionality is encapsulated in a "Payment Adapter". For CyberSource integration, create a custom implementation for the CheckoutPaymentAdapter interface. This instance encapsulates the new checkout logic for CyberSource and overrides the default mock implementation from composable storefront. The following is an example:

import {
  PaymentDetails,
  CheckoutPaymentAdapter,
  CardType
} from "@spartacus/core";
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

@Injectable()
export class CybersourceCheckoutPaymentAdapter
  implements CheckoutPaymentAdapter {
  constructor() {}

  public create(
    userId: string,
    cartId: string,
    paymentDetails: PaymentDetails
  ): Observable<PaymentDetails> {
    // Cybersource-based logic to create payment details
  }

  // Add other methods to get endpoints, map payment fields, and so on, as needed.
}

Setting up a Custom Payment Module

Export your custom payment adapter in a module, and include the module in your main application. With this, composable storefront uses your custom payment adapter instead of the default one that is provided for OCC. The following is an example:

import { NgModule } from "@angular/core";
import { CheckoutPaymentAdapter } from "@spartacus/core";
import { CybersourceCheckoutPaymentAdapter } from "./checkout.adapter";

@NgModule({
  providers: [
    {
      provide: CheckoutPaymentAdapter,
      useClass: CybersourceCheckoutPaymentAdapter
    }
  ]
})
export class CybersourceCheckoutModule {}

For more information, see Extending Checkout.