feat: support multiple payment gateway (#21374)

ijitendrasap · web-flow · commit 9ff2cda08d83 · 2026-04-27T20:41:27.000+05:30
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.spec.ts
@@ -7,7 +7,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Cart } from '@spartacus/cart/base/root';
 import { Product } from '@spartacus/core';
-import { OpfActiveConfiguration } from '@spartacus/opf/base/root';
 import { OpfPaymentErrorHandlerService } from '@spartacus/opf/payment/core';
 import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core';
 import {
@@ -33,17 +32,6 @@ const mockCart: Cart = {
   code: '123',
 };
 
-const mockActiveConfiguration: OpfActiveConfiguration = {
-  digitalWalletQuickBuy: [
-    {
-      merchantId: 'merchant.com.adyen.upscale.test',
-      provider: OpfQuickBuyProviderType.APPLE_PAY,
-      countryCode: 'US',
-    },
-    { merchantId: 'merchant.test.example' },
-  ],
-};
-
 describe('ApplePayComponent', () => {
   let component: ApplePayComponent;
   let fixture: ComponentFixture<ApplePayComponent>;
@@ -110,50 +98,54 @@ describe('ApplePayComponent', () => {
       provider: OpfQuickBuyProviderType.APPLE_PAY,
       countryCode: mockCountryCode,
       merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
+    };
+    component.activeConfiguration = {
+      digitalWalletQuickBuy: [digitalWallet],
     };
-    component.activeConfiguration = { digitalWalletQuickBuy: [digitalWallet] };
 
     const mockObservable = of(true);
     mockApplePayService.isApplePaySupported.and.returnValue(mockObservable);
 
     fixture.detectChanges();
-    expect(component.isApplePaySupported$).toBe(mockObservable);
+    expect(component.isApplePaySupported$).toEqual(mockObservable);
   });
 
   it('should not initialize isApplePaySupported$ provider is not Apple pay', () => {
     const digitalWallet: OpfQuickBuyDigitalWallet = {
       provider: OpfQuickBuyProviderType.GOOGLE_PAY,
       countryCode: mockCountryCode,
       merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
+    };
+    component.activeConfiguration = {
+      digitalWalletQuickBuy: [digitalWallet],
     };
-    component.activeConfiguration = { digitalWalletQuickBuy: [digitalWallet] };
-
-    const mockObservable = of(true);
-    mockApplePayService.isApplePaySupported.and.returnValue(mockObservable);
 
     fixture.detectChanges();
+    expect(component.isApplePaySupported$).toBeUndefined();
     expect(mockApplePayService.isApplePaySupported).not.toHaveBeenCalled();
   });
 
   it('should start applePayService', () => {
     mockApplePayService.start.and.returnValue(
       of(<ApplePayJS.ApplePayPaymentAuthorizationResult>{ status: 1 })
     );
+
+    const digitalWallet: OpfQuickBuyDigitalWallet = {
+      provider: OpfQuickBuyProviderType.APPLE_PAY,
+      countryCode: mockCountryCode,
+      merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
+    };
+
     component.activeConfiguration = {
-      digitalWalletQuickBuy: [
-        {
-          provider: OpfQuickBuyProviderType.APPLE_PAY,
-          countryCode: mockCountryCode,
-          merchantId: 'merchant.com.adyen.upscale.test',
-        },
-      ],
+      digitalWalletQuickBuy: [digitalWallet],
     };
-    component.activeConfiguration = mockActiveConfiguration;
+
     fixture.detectChanges();
 
     component.initTransaction();
-    expect(
-      mockOpfPaymentErrorHandlerService.handlePaymentError
-    ).not.toHaveBeenCalled();
+    expect(mockApplePayService.start).toHaveBeenCalled();
   });
 });
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.ts
@@ -31,7 +31,9 @@ import { ApplePayService } from './apple-pay.service';
   imports: [NgIf, AsyncPipe],
 })
 export class ApplePayComponent implements OnInit {
-  @Input() activeConfiguration: OpfActiveConfiguration;
+  @Input() activeConfiguration:
+    | OpfActiveConfiguration
+    | OpfActiveConfiguration[];
 
   protected applePayService = inject(ApplePayService);
   protected currentProductService = inject(CurrentProductService);
@@ -43,10 +45,15 @@ export class ApplePayComponent implements OnInit {
   applePayDigitalWallet?: OpfQuickBuyDigitalWallet;
 
   ngOnInit(): void {
-    this.applePayDigitalWallet =
-      this.activeConfiguration?.digitalWalletQuickBuy?.find(
+    const activeConfigurations = Array.isArray(this.activeConfiguration)
+      ? this.activeConfiguration
+      : [this.activeConfiguration];
+    this.applePayDigitalWallet = activeConfigurations
+      ?.flatMap((config) => config.digitalWalletQuickBuy || [])
+      .find(
         (digitalWallet) =>
-          digitalWallet.provider === OpfQuickBuyProviderType.APPLE_PAY
+          digitalWallet.provider === OpfQuickBuyProviderType.APPLE_PAY &&
+          digitalWallet.enabled
       );
     if (
       !this.applePayDigitalWallet?.merchantId ||
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.spec.ts
@@ -10,6 +10,7 @@ import {
   ElementRef,
 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { OpfGooglePayComponent } from './google-pay.component';
 import { OpfGooglePayService } from './google-pay.service';
 
@@ -64,9 +65,9 @@ describe('OpfGooglePayComponent', () => {
     await detectChanges();
 
     expect(mockOpfGooglePayService.loadResources).toHaveBeenCalled();
-    expect(mockOpfGooglePayService.initClient).toHaveBeenCalledWith(
-      component.activeConfiguration
-    );
+    expect(mockOpfGooglePayService.initClient).toHaveBeenCalledWith([
+      component.activeConfiguration,
+    ]);
   });
 
   it('should update ready to pay state when Google Pay is ready', async () => {
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts
@@ -29,15 +29,20 @@ export class OpfGooglePayComponent implements OnInit {
   protected opfGooglePayService = inject(OpfGooglePayService);
   protected changeDetectionRef = inject(ChangeDetectorRef);
 
-  @Input() activeConfiguration: OpfActiveConfiguration;
+  @Input() activeConfiguration:
+    | OpfActiveConfiguration
+    | OpfActiveConfiguration[];
 
   @ViewChild('googlePayButtonContainer') googlePayButtonContainer: ElementRef;
 
   isReadyToPayState$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   ngOnInit(): void {
+    const activeConfigurations = Array.isArray(this.activeConfiguration)
+      ? this.activeConfiguration
+      : [this.activeConfiguration];
     this.opfGooglePayService.loadResources().then(() => {
-      this.opfGooglePayService.initClient(this.activeConfiguration);
+      this.opfGooglePayService.initClient(activeConfigurations);
       this.opfGooglePayService.isReadyToPay().then((response: any) => {
         this.isReadyToPayState$.next(!!response?.result);
         this.changeDetectionRef.detectChanges();
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts
@@ -4,11 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+/// <reference types="@types/googlepay" />
 import { ElementRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Cart } from '@spartacus/cart/base/root';
 import { Address, PriceType } from '@spartacus/core';
-import { OpfResourceLoaderService } from '@spartacus/opf/base/root';
+import {
+  OpfActiveConfiguration,
+  OpfResourceLoaderService,
+} from '@spartacus/opf/base/root';
 import { OpfPaymentFacade } from '@spartacus/opf/payment/root';
 import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core';
 import {
@@ -86,7 +90,7 @@ describe('OpfGooglePayService', () => {
     ]);
     mockQuickBuyButtonsService = jasmine.createSpyObj(
       'OpfQuickBuyButtonsService',
-      ['getQuickBuyProviderConfig']
+      ['getQuickBuyProviderConfig', 'getActiveConfigurationForProvider']
     );
 
     mockOpfQuickBuyConfig = {
@@ -145,7 +149,7 @@ describe('OpfGooglePayService', () => {
 
   describe('getClient', () => {
     it('should return the Google Payment client instance', () => {
-      const activeConfiguration = {};
+      const activeConfiguration: OpfActiveConfiguration[] = [];
       service.initClient(activeConfiguration);
 
       const client = service['getClient']();
@@ -225,7 +229,7 @@ describe('OpfGooglePayService', () => {
 
   describe('isReadyToPay', () => {
     it('should return info about readiness to pay from the Google Pay API', async () => {
-      const activeConfiguration = {};
+      const activeConfiguration: OpfActiveConfiguration[] = [];
 
       service.initClient(activeConfiguration);
 
@@ -246,8 +250,20 @@ describe('OpfGooglePayService', () => {
   });
 
   describe('initClient', () => {
-    it('should initialize the Google Payment client with configurations', () => {
-      const activeConfiguration = {};
+    it('should initialize the Google Payment client with configurations (array)', () => {
+      const activeConfiguration: any[] = [];
+      service.initClient(activeConfiguration);
+
+      const client = service['googlePaymentClient'];
+
+      expect(client).toBeDefined();
+    });
+
+    it('should initialize the Google Payment client with single configuration', () => {
+      const activeConfiguration: OpfActiveConfiguration = {
+        merchantId: 'test-merchant',
+        providerType: 'PAYMENT_GATEWAY',
+      } as any;
       service.initClient(activeConfiguration);
 
       const client = service['googlePaymentClient'];
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts
@@ -169,8 +169,20 @@ export class OpfGooglePayService {
     ]);
   }
 
-  initClient(activeConfiguration: OpfActiveConfiguration): void {
-    this.setAllowedPaymentMethodsConfig(activeConfiguration);
+  initClient(
+    activeConfiguration: OpfActiveConfiguration | OpfActiveConfiguration[]
+  ): void {
+    const activeConfigurations = Array.isArray(activeConfiguration)
+      ? activeConfiguration
+      : [activeConfiguration];
+    const googlePayGateway =
+      this.opfQuickBuyButtonsService.getActiveConfigurationForProvider(
+        OpfQuickBuyProviderType.GOOGLE_PAY,
+        activeConfigurations
+      );
+    if (googlePayGateway) {
+      this.setAllowedPaymentMethodsConfig(googlePayGateway);
+    }
     this.updateGooglePaymentClient();
   }
 
@@ -498,9 +510,8 @@ export class OpfGooglePayService {
     const googlePayConfig =
       this.opfQuickBuyButtonsService.getQuickBuyProviderConfig(
         OpfQuickBuyProviderType.GOOGLE_PAY,
-        activeConfiguration
+        [activeConfiguration]
       );
-
     this.googlePaymentRequest.allowedPaymentMethods = [
       {
         parameters: {
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.spec.ts
@@ -11,6 +11,7 @@ import { OpfQuickBuyProviderType } from '../../root/model';
 import { OpfQuickBuyButtonsComponent } from './opf-quick-buy-buttons.component';
 import { OpfQuickBuyButtonsService } from './opf-quick-buy-buttons.service';
 import createSpy = jasmine.createSpy;
+import { OpfActiveConfiguration } from '@spartacus/opf/base/root';
 
 const routerStateSubject = new BehaviorSubject<RouterState>({
   state: {
@@ -33,6 +34,8 @@ describe('OpfQuickBuyButtonsComponent', () => {
     opfQuickBuyButtonsServiceMock = jasmine.createSpyObj('OpfQuickBuyService', [
       'getPaymentGatewayConfiguration',
       'isQuickBuyProviderEnabled',
+      'getQuickBuyProviderConfig',
+      'getActiveConfigurationForProvider',
     ]);
 
     await TestBed.configureTestingModule({
@@ -70,7 +73,7 @@ describe('OpfQuickBuyButtonsComponent', () => {
 
   it('should determine if a payment method is enabled', () => {
     const provider = OpfQuickBuyProviderType.APPLE_PAY;
-    const activeConfiguration = {};
+    const activeConfiguration: OpfActiveConfiguration[] = [];
     opfQuickBuyButtonsServiceMock.isQuickBuyProviderEnabled.and.returnValue(
       true
     );
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.ts
@@ -26,7 +26,9 @@ import { OpfQuickBuyButtonsService } from './opf-quick-buy-buttons.service';
 })
 export class OpfQuickBuyButtonsComponent implements OnInit {
   protected opfQuickBuyButtonsService = inject(OpfQuickBuyButtonsService);
-  protected paymentGatewayConfig$: Observable<OpfActiveConfiguration>;
+  protected paymentGatewayConfig$: Observable<
+    OpfActiveConfiguration | OpfActiveConfiguration[]
+  >;
 
   PAYMENT_METHODS = OpfQuickBuyProviderType;
 
@@ -37,7 +39,7 @@ export class OpfQuickBuyButtonsComponent implements OnInit {
 
   isPaymentMethodEnabled(
     provider: OpfQuickBuyProviderType,
-    activeConfiguration: OpfActiveConfiguration
+    activeConfiguration: OpfActiveConfiguration | OpfActiveConfiguration[]
   ): boolean {
     return this.opfQuickBuyButtonsService.isQuickBuyProviderEnabled(
       provider,
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.service.spec.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.service.spec.ts
diff --git a/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.service.ts b/integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.service.ts
